/* ============================================================
   app.css — Premium Edition (sobriedade moderna)
   Escolanovavida · Terapeutas
   ------------------------------------------------------------
   Diretrizes: Rico, elegante, seguro, firme, autoridade,
   confiança. Pra rico sem rebuscado. Sobriedade moderna.

   Mudanças desta versão:
   - Dourado bronze/champagne (mais sóbrio, menos amarelo)
   - Tipografia firme (pesos 600/700 marcados)
   - Escala de espaçamento consistente (--s-1..--s-12)
   - Sombras sutis premium
   - Modais e flash centralizados (sem duplicação em views)
   - Foco visível em tudo (WCAG AA)
   - prefers-reduced-motion respeitado
   - Touch targets >= 44px no mobile
   - Hierarquia clara de botões (.btn-primary / .btn / .btn-ghost / .btn-perigo)
   - Cards com filete dourado discreto, hover refinado
   - Estados vazios, skeleton e helpers utilitários
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

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

:root {
    /* ============================================================
       PALETA — 60 / 30 / 10 refinada
       60% creme suave (respiração)
       30% branco / bordas sutis (estrutura)
       10% dourado bronze (autoridade)
       ============================================================ */

    /* Fundos */
    --creme:        #faf7ee;
    --creme-2:      #f4efe0;
    --creme-3:      #ede5cf;

    /* Cartões e bordas */
    --card:         #ffffff;
    --borda:        #ebe3d0;
    --borda2:       #d4c89a;
    --borda-strong: #b8a878;

    /* Dourado bronze (premium, sóbrio) */
    --ouro:         #a87a1f;
    --ouro-2:       #c19234;
    --ouro-cl:      #fdf9ed;
    --ouro-brd:     #d6bb74;
    --ouro-hov:     #7a5613;
    --ouro-lt:      #f0e2b3;
    --ouro-deep:    #5e3f0a;

    /* Texto */
    --texto:        #1c1810;
    --texto-2:      #2e271a;
    --muted:        #5a5040;
    --muted2:       #8d8270;
    --muted3:       #b3a98f;

    /* Funcionais — discretos */
    --danger:       #a13420;
    --danger-bg:    #fdf3ef;
    --danger-brd:   #ecc7bb;
    --ok:           #1f6628;
    --ok-bg:        #eef6ee;
    --ok-brd:       #c6dec9;
    --warn:         #8a6a1a;
    --warn-bg:      #fdf6e3;
    --warn-brd:     #ecd99e;
    --info:         #1a5fa8;
    --info-bg:      #eef4fb;
    --info-brd:     #b7d2ee;

    /* Escala de espaçamento */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-7:  28px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;

    /* Raios */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Sombras (sutis, premium) */
    --shadow-xs:  0 1px 2px rgba(28, 24, 16, .04);
    --shadow-sm:  0 2px 6px rgba(28, 24, 16, .05);
    --shadow:     0 1px 3px rgba(28, 24, 16, .04), 0 4px 12px rgba(28, 24, 16, .05);
    --shadow-md:  0 4px 14px rgba(28, 24, 16, .07);
    --shadow-lg:  0 10px 28px rgba(28, 24, 16, .10);
    --shadow-xl:  0 20px 48px rgba(28, 24, 16, .14);
    --shadow-focus: 0 0 0 3px rgba(168, 122, 31, .22);

    /* Tipografia */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;

    /* Transições */
    --t-fast:  120ms cubic-bezier(.4, 0, .2, 1);
    --t-base:  180ms cubic-bezier(.4, 0, .2, 1);
    --t-slow:  280ms cubic-bezier(.4, 0, .2, 1);

    /* Header sticky height */
    --header-h: 64px;

    /* ============================================================
       LEGACY — variáveis usadas por views não-migradas (admin/IA,
       perfil público, sistema). Mantidas para compatibilidade.
       Mapeadas aos tokens novos.
       ============================================================ */
    --cinza:        var(--creme-2);
    --cor-primaria: var(--ouro);
    --rede-cor:     var(--ouro-hov);
    --verde-cl:     var(--ok-bg);
}

/* ============================================================ BASE ============================================================ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden; }
body {
    overflow-x: hidden;
    max-width: 100vw;
    font-family: var(--font-body);
    color: var(--texto);
    background: var(--creme);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-5); }
main.full-width { max-width: none; padding: 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-5); }

/* ============================================================ TIPOGRAFIA ============================================================ */
h1, h2, h3, h4, h5, .tit-editorial {
    font-family: var(--font-display);
    color: var(--texto);
    line-height: 1.18;
    letter-spacing: -0.018em;
    font-weight: 600;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; }
h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: .98rem; font-weight: 600; }

h1 em, h2 em, h3 em, .tit-editorial em {
    font-style: italic; font-weight: 500; color: var(--ouro);
}

.num-editorial, .num-display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.022em;
    font-variant-numeric: oldstyle-nums;
}

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: .68rem; text-transform: uppercase;
    letter-spacing: .18em; font-weight: 700;
    color: var(--ouro);
}
.eyebrow::before {
    content: ''; width: 18px; height: 1px;
    background: var(--ouro); flex-shrink: 0;
}

a { color: var(--ouro); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--ouro-hov); }

/* ============================================================ FOCO VISÍVEL ============================================================ */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.btn-primary:focus-visible,
.btn:focus-visible,
.btn-perigo:focus-visible,
.btn-gold-outline:focus-visible,
.btn-ghost:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ============================================================ HEADER ============================================================ */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: saturate(120%);
}
.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); gap: var(--s-4);
}
.logo {
    color: var(--texto); font-size: 1.05rem; font-weight: 700;
    letter-spacing: -.01em;
}
.logo span { color: var(--ouro); font-weight: 500; }

nav { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
nav a { color: var(--muted); font-size: .88rem; transition: color var(--t-fast); font-weight: 500; }
nav a:hover { color: var(--ouro); }
.nav-cta-terapeuta { color: var(--ouro) !important; font-weight: 600; }
.nav-cta-terapeuta:hover { color: var(--ouro-hov) !important; }

/* Hambúrguer */
.hamburger-btn {
    background: none; border: none; cursor: pointer;
    padding: .5rem; border-radius: var(--radius-sm);
    position: relative; display: flex; align-items: center;
    min-width: 44px; min-height: 44px; justify-content: center;
    transition: background var(--t-fast);
}
.hamburger-btn:hover { background: var(--creme-2); }
.hamburger-lines { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.hamburger-lines span { display: block; height: 2px; background: var(--texto); border-radius: 2px; transition: all var(--t-base); }
.hamburger-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--danger); color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
}

/* ============================================================ BOTÕES ============================================================ */
.btn, .btn-primary, .btn-perigo, .btn-gold-outline, .btn-ghost, .btn-dark {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    padding: .65rem 1.25rem;
    border-radius: var(--radius);
    font-size: .9rem; font-weight: 600;
    font-family: inherit;
    cursor: pointer; text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast),
                box-shadow var(--t-fast);
    white-space: nowrap;
    min-height: 40px;
    line-height: 1.2;
    letter-spacing: .005em;
}

.btn-primary {
    background: var(--ouro); color: #fff;
    border-color: var(--ouro);
    box-shadow: 0 1px 2px rgba(168, 122, 31, .25);
}
.btn-primary:hover {
    background: var(--ouro-hov); border-color: var(--ouro-hov);
    color: #fff;
    box-shadow: 0 4px 10px rgba(168, 122, 31, .28);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(168, 122, 31, .25); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    background: var(--muted3); border-color: var(--muted3);
    cursor: not-allowed; transform: none; box-shadow: none;
}

.btn { background: var(--card); color: var(--texto); border-color: var(--borda2); }
.btn:hover { border-color: var(--ouro); color: var(--ouro); background: var(--card); }

.btn-gold-outline {
    background: transparent; color: var(--ouro-hov);
    border-color: var(--ouro-brd);
}
.btn-gold-outline:hover { background: var(--ouro-cl); border-color: var(--ouro); color: var(--ouro-hov); }

.btn-ghost {
    background: transparent; color: var(--muted);
    border-color: transparent;
    padding-left: var(--s-3); padding-right: var(--s-3);
}
.btn-ghost:hover { background: var(--creme-2); color: var(--texto); }

.btn-perigo { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-perigo:hover { background: #842616; border-color: #842616; color: #fff; }

.btn-dark { background: var(--texto); color: #fff; border-color: var(--texto); }
.btn-dark:hover { background: #000; border-color: #000; color: #fff; }

.btn-sm { padding: .4rem .85rem; font-size: .82rem; min-height: 32px; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; min-height: 48px; }
.btn-block { width: 100%; }

.icon-btn {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: transparent; border: 1px solid transparent;
    cursor: pointer; font-size: 1rem;
    color: var(--muted);
    display: inline-grid; place-items: center;
    transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--creme-2); color: var(--texto); border-color: var(--borda); }
.icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-brd); }

/* ============================================================ ALERTAS / FLASH ============================================================ */
.alert {
    position: relative;
    padding: .85rem 1.1rem;
    border-radius: var(--radius);
    margin: var(--s-4) 0;
    font-size: .9rem; line-height: 1.5;
    border: 1px solid;
}
.alert-ok    { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-brd); }
.alert-erro  { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-brd); }
.alert-info  { background: var(--info-bg);   color: var(--info);   border-color: var(--info-brd); }
.alert-warn  { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-brd); }

.flash-auto {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: var(--s-4);
    padding-right: 2.5rem !important;
}
.flash-auto .flash-msg { flex: 1; }
.flash-auto .flash-close {
    position: absolute; right: .5rem; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    color: inherit; opacity: .55;
    padding: .25rem .4rem;
    border-radius: var(--radius-sm);
    transition: opacity var(--t-fast), background var(--t-fast);
    min-width: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
.flash-auto .flash-close:hover { opacity: 1; background: rgba(0,0,0,.05); }
.flash-auto .flash-progress {
    position: absolute; bottom: 0; left: 0;
    height: 2px; width: 100%;
    background: currentColor; opacity: .3;
    transform-origin: left;
    animation: flashProgress 5s linear forwards;
}
@keyframes flashProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.flash-fade { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translateY(-8px); }

/* ============================================================ FORMULÁRIOS ============================================================ */
.form-group { margin-bottom: var(--s-5); }
label {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    margin-bottom: .35rem;
    font-weight: 600;
    letter-spacing: .005em;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="tel"],
input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"],
select, textarea {
    width: 100%;
    padding: .7rem .95rem;
    border: 1px solid var(--borda2);
    border-radius: var(--radius);
    font-size: .92rem;
    font-family: inherit;
    background: var(--card);
    color: var(--texto);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    min-height: 44px;
}
input::placeholder, textarea::placeholder { color: var(--muted3); }
input:hover, select:hover, textarea:hover { border-color: var(--ouro-brd); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ouro);
    box-shadow: var(--shadow-focus);
    background: var(--card);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--creme-2); color: var(--muted2);
    cursor: not-allowed;
}

textarea { resize: vertical; min-height: 100px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-4); }

.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: .3rem; }
.checkbox-group label {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: .9rem; color: var(--texto);
    cursor: pointer; font-weight: 500; margin: 0;
}
input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: var(--ouro);
    cursor: pointer; flex-shrink: 0;
}
.form-help { font-size: .8rem; color: var(--muted2); margin-top: .35rem; line-height: 1.45; }
.form-error { font-size: .82rem; color: var(--danger); margin-top: .35rem; line-height: 1.4; font-weight: 500; }

/* ============================================================ CARDS ============================================================ */
.card {
    background: var(--card);
    border: 1px solid var(--borda);
    border-radius: var(--radius-lg);
    padding: var(--s-6);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.card + .card { margin-top: var(--s-4); }
.card:hover { border-color: var(--borda2); box-shadow: var(--shadow-sm); }

.card-flat { box-shadow: none; }
.card-feature {
    background: linear-gradient(180deg, var(--card) 0%, var(--ouro-cl) 130%);
    border-color: var(--ouro-brd);
}

.card h2, .card h3 { color: var(--texto); }
.card-eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted2);
    font-weight: 700;
    margin-bottom: var(--s-3);
}

/* ============================================================ BADGES / CHIPS / TAGS ============================================================ */
.badge, .chip, .tag {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .65rem;
    border-radius: var(--radius-pill);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .005em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-pendente   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-brd); }
.badge-em_revisao { background: var(--info-bg);   color: var(--info);   border-color: var(--info-brd); }
.badge-aprovado   { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-brd); }
.badge-suspenso   { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-brd); }
.badge-gold       { background: var(--ouro-cl);   color: var(--ouro-hov); border-color: var(--ouro-brd); }

.tag {
    background: var(--creme-2); color: var(--muted);
    border-color: var(--borda); font-weight: 500;
}
.tag-gold { background: var(--ouro-cl); color: var(--ouro-hov); border-color: var(--ouro-brd); font-weight: 600; }
.tag-esp  { background: #fdf6e2; color: var(--ouro-deep); border-color: #ecd99e; }
.tag-mais { background: transparent; color: var(--muted2); border: 1px dashed var(--borda2); }

.plano-basic   { background: var(--creme-2); color: var(--muted);    border: 1px solid var(--borda); font-weight: 500; }
.plano-pro     { background: var(--info-bg); color: var(--info);     border: 1px solid var(--info-brd); }
.plano-premium {
    background: linear-gradient(135deg, var(--ouro-lt), var(--ouro-cl));
    color: var(--ouro-hov);
    border: 1px solid var(--ouro);
    font-weight: 700;
}

.notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: var(--radius-pill);
    margin-left: .25rem; vertical-align: middle; line-height: 1;
}
.acc-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--radius-pill);
    margin-left: .35rem; vertical-align: middle;
}

/* ============================================================ MODAIS ============================================================ */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(28, 24, 16, .55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 600;
    align-items: center; justify-content: center;
    padding: var(--s-5);
}
.modal-overlay.aberto { display: flex; }
.modal {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 0;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-xl);
    animation: modalEntrar var(--t-slow) cubic-bezier(.34, 1.3, .64, 1);
    overflow: hidden;
    max-height: 90vh;
    border: 1px solid var(--borda);
    /* [SPRINT-CONCLUIR] Flexbox: header fixo, body scrolla — botão sempre acessível */
    display: flex; flex-direction: column;
}
@keyframes modalEntrar {
    from { transform: translateY(-16px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-header {
    padding: var(--s-5) var(--s-6) var(--s-4);
    border-bottom: 1px solid var(--borda);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card); z-index: 1;
    flex-shrink: 0; /* [SPRINT-CONCLUIR] */
}
.modal-titulo {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 600;
    color: var(--texto);
    letter-spacing: -.01em;
}
.modal-fechar {
    background: var(--creme-2);
    border: 1px solid var(--borda);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer;
    color: var(--muted);
    padding: 0; flex-shrink: 0;
    transition: all var(--t-fast);
}
.modal-fechar:hover { background: var(--borda); color: var(--texto); }
.modal-body { padding: var(--s-5) var(--s-6) var(--s-6); flex: 1 1 auto; overflow-y: auto; min-height: 0; /* [SPRINT-CONCLUIR] body scrolla, header fixo */ }

/* ============================================================ DRAWER (mobile menu) ============================================================ */
.painel-drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(28, 24, 16, .5);
    z-index: 300;
    backdrop-filter: blur(4px);
}
.painel-drawer-overlay.aberto { display: block; }
.painel-drawer {
    position: fixed; top: 0; right: -300px; bottom: 0;
    width: 280px;
    background: var(--card);
    z-index: 301;
    box-shadow: var(--shadow-xl);
    transition: right var(--t-base);
    overflow-y: auto;
    padding: var(--s-4) 0 var(--s-8);
}
.painel-drawer.aberto { right: 0; }
.painel-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-2) var(--s-4) var(--s-4);
    border-bottom: 1px solid var(--borda);
    margin-bottom: var(--s-2);
}
.painel-drawer-fechar {
    background: var(--creme-2);
    border: 1px solid var(--borda);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer;
    color: var(--muted);
    transition: all var(--t-fast);
}
.painel-drawer-fechar:hover { background: var(--borda); color: var(--texto); }

.painel-drawer .painel-menu {
    flex-direction: column; gap: .15rem;
    padding: 0 var(--s-3);
}
.painel-drawer .painel-menu strong { display: block; }
.painel-drawer .painel-menu hr { display: block; }

.nav-desktop { display: flex; }

@media (max-width: 768px) {
    .nav-desktop { display: none !important; }
}

/* ============================================================ MENUS — admin/terapeuta ============================================================ */
.painel-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: var(--s-8);
    margin: var(--s-8) 0;
}
.painel-menu { display: flex; flex-direction: column; gap: var(--s-1); }
.painel-menu strong {
    font-size: .7rem; font-weight: 700;
    color: var(--muted2);
    padding: var(--s-3) var(--s-4) .25rem;
    display: block;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.painel-menu a {
    padding: .55rem var(--s-4);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--muted);
    font-size: .9rem;
    transition: all var(--t-fast);
    display: flex; align-items: center; gap: var(--s-2);
}
.painel-menu a:hover { background: var(--creme-2); color: var(--texto); }
.painel-menu a.ativo {
    background: var(--ouro-cl);
    color: var(--ouro-hov);
    font-weight: 600;
}
.painel-menu hr { border: none; border-top: 1px solid var(--borda); margin: var(--s-2) var(--s-3); }

.adm-menu, .ter-menu { display: flex; flex-direction: column; gap: 0; }
.adm-section, .ter-section {
    font-size: .68rem; font-weight: 700;
    color: var(--muted2);
    letter-spacing: .12em; text-transform: uppercase;
    padding: var(--s-3) var(--s-4) .35rem;
}
.adm-item, .ter-item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: .55rem var(--s-4);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
    transition: all var(--t-fast);
    cursor: pointer; border: none; background: none;
    width: 100%; text-align: left;
    min-height: 36px;
}
.adm-item:hover, .ter-item:hover { background: var(--creme-2); color: var(--texto); }
.adm-item.ativo, .ter-item.ativo {
    background: var(--ouro-cl);
    color: var(--ouro-hov);
    font-weight: 600;
    position: relative;
}
.adm-item.ativo::before, .ter-item.ativo::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 8px; bottom: 8px;
    width: 3px;
    background: var(--ouro);
    border-radius: 0 3px 3px 0;
}
.adm-item .ico, .ter-item .ico {
    font-size: 1rem; width: 22px;
    text-align: center; flex-shrink: 0; line-height: 1;
}
.adm-item .label, .ter-item .label { flex: 1; }
.adm-item .chevron { font-size: .7rem; color: var(--muted2); transition: transform var(--t-base); }
.adm-item .badge-r {
    background: var(--danger); color: #fff;
    font-size: .68rem; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
}

.adm-sub { overflow: hidden; max-height: 0; transition: max-height var(--t-slow); }
.adm-sub.open { max-height: 600px; }
.adm-sub-item {
    display: flex; align-items: center; gap: var(--s-2);
    padding: .42rem var(--s-4) .42rem 2.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--muted);
    font-size: .85rem;
    transition: all var(--t-fast);
    min-height: 34px;
}
.adm-sub-item:hover { background: var(--creme-2); color: var(--texto); }
.adm-sub-item.ativo { color: var(--ouro-hov); font-weight: 600; }

.adm-divider, .ter-divider {
    border: none;
    border-top: 1px solid var(--borda);
    margin: var(--s-2) var(--s-3);
}

.ter-section-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; cursor: pointer;
    font-size: .68rem; font-weight: 700; color: var(--muted2);
    letter-spacing: .12em; text-transform: uppercase;
    padding: var(--s-3) var(--s-4) .35rem;
    border-radius: var(--radius);
    transition: color var(--t-fast);
    font-family: inherit;
}
.ter-section-btn:hover { color: var(--ouro); }
.ter-sec-direita { display: inline-flex; align-items: center; gap: .35rem; }
.ter-sec-seta {
    font-size: 1rem; font-weight: 400;
    letter-spacing: 0; text-transform: none;
    color: var(--muted2);
    transition: color var(--t-fast);
}
.ter-section-btn:hover .ter-sec-seta { color: var(--ouro); }
.ter-sec-body { overflow: hidden; max-height: 0; transition: max-height var(--t-slow); }
.ter-sec-body.aberta { max-height: 800px; }

/* ============================================================ TABELAS ============================================================ */
.tabela {
    width: 100%; border-collapse: collapse;
    font-size: .9rem;
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.tabela th {
    text-align: left;
    padding: .75rem .9rem;
    background: var(--creme-2);
    border-bottom: 2px solid var(--borda2);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.tabela td {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
}
.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: var(--ouro-cl); }

/* ============================================================ PAGINAÇÃO ============================================================ */
.paginacao {
    display: flex; gap: var(--s-1);
    justify-content: center;
    margin: var(--s-8) 0; flex-wrap: wrap;
}
.paginacao a, .paginacao span {
    padding: .5rem .9rem;
    border: 1px solid var(--borda2);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: .88rem; font-weight: 500;
    color: var(--muted);
    background: var(--card);
    transition: all var(--t-fast);
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.paginacao a:hover { border-color: var(--ouro); color: var(--ouro); background: var(--ouro-cl); }
.paginacao .ativo { background: var(--ouro); color: #fff; border-color: var(--ouro); font-weight: 700; }

/* ============================================================ BUSCA — Hero premium ============================================================ */
.busca-hero {
    background: linear-gradient(180deg, var(--card) 0%, var(--creme) 100%);
    padding: var(--s-12) var(--s-5) var(--s-8);
    text-align: center;
    border-bottom: 1px solid var(--borda);
    position: relative;
}
.busca-hero::after {
    content: ''; position: absolute;
    bottom: -1px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 1px;
    background: var(--ouro);
}
.busca-hero .eyebrow { margin-bottom: var(--s-4); justify-content: center; }
.busca-hero h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.4rem);
    font-weight: 600;
    line-height: 1.18;
    margin: 0 auto var(--s-3);
    color: var(--texto);
    max-width: 720px;
}
.busca-hero h1 em { color: var(--ouro); font-style: italic; font-weight: 500; }
.busca-hero-sub {
    font-size: .98rem; color: var(--muted);
    max-width: 540px; margin: 0 auto var(--s-7);
    line-height: 1.6;
}

/* Search bar integrada */
.search-integrated {
    display: flex; gap: 0;
    max-width: 720px; margin: 0 auto;
    background: var(--card);
    border: 1.5px solid var(--borda2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow var(--t-base), border-color var(--t-base);
    flex-wrap: wrap;
}
.search-integrated:focus-within {
    border-color: var(--ouro);
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(168, 122, 31, .1);
}
.search-integrated input,
.search-integrated select {
    flex: 1; min-width: 140px;
    background: transparent;
    border: none; border-right: 1px solid var(--borda);
    color: var(--texto);
    padding: .9rem 1.1rem;
    font-size: .92rem;
    min-height: 52px;
}
.search-integrated input:focus,
.search-integrated select:focus {
    outline: none; background: var(--ouro-cl); box-shadow: none;
}
.search-integrated .btn-search {
    background: var(--ouro); color: #fff;
    border: none; padding: 0 var(--s-7);
    font-size: .92rem; font-weight: 700;
    cursor: pointer;
    transition: background var(--t-fast);
    border-radius: 0;
    min-height: 52px;
    letter-spacing: .015em;
}
.search-integrated .btn-search:hover { background: var(--ouro-hov); }

.geo-button {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background: transparent;
    border: 1px solid var(--ouro-brd);
    color: var(--ouro);
    padding: .5rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: .85rem; font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
    margin-top: var(--s-4);
    font-family: inherit;
    min-height: 40px;
}
.geo-button:hover {
    background: var(--ouro-cl);
    border-color: var(--ouro);
    color: var(--ouro-hov);
}
.geo-button:disabled { opacity: .6; cursor: progress; }

.busca-view-toggle {
    display: inline-flex;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}
.bvt-btn {
    background: transparent; border: 0;
    padding: .5rem .9rem;
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--muted2);
    transition: all var(--t-fast);
    line-height: 1; font-family: inherit;
    min-width: 44px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}
.bvt-btn:hover { background: var(--creme-2); color: var(--texto); }
.bvt-btn.bvt-ativo { background: var(--ouro-cl); color: var(--ouro-hov); }
.bvt-btn + .bvt-btn { border-left: 1px solid var(--borda); }

/* Cards de terapeuta */
.busca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--s-5);
    margin: 0 0 var(--s-8);
}
.card-terapeuta { text-decoration: none; color: var(--texto); display: block; }
.card-terapeuta .card {
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
    padding: var(--s-5);
    height: 100%; box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.card-terapeuta .card::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--ouro);
    transition: width var(--t-base);
}
.card-terapeuta:hover .card {
    border-color: var(--ouro-brd);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.card-terapeuta:hover .card::before { width: 100%; }

.card-terapeuta img {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ouro-brd);
    flex-shrink: 0;
}
.card-avatar-placeholder {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ouro), var(--ouro-2));
    border: 2px solid var(--ouro-brd);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.4rem; font-weight: 600;
    flex-shrink: 0;
    letter-spacing: .01em;
}
.card-terapeuta h3 {
    font-size: 1.02rem;
    margin: 0 0 .15rem;
    font-weight: 700;
    color: var(--texto);
    letter-spacing: -.01em;
}
.card-terapeuta .tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: var(--s-2); }

.ct-cabecalho {
    display: flex; align-items: center;
    gap: var(--s-3); margin-bottom: var(--s-3);
}
.ct-cabecalho-info { flex: 1; min-width: 0; }
.ct-nota {
    display: flex; align-items: center; gap: .3rem;
    margin-top: .25rem;
    font-size: .82rem;
}

.ct-bio {
    font-size: .87rem; color: var(--muted);
    margin: 0 0 var(--s-3);
    line-height: 1.55;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.busca-list .ct-bio { -webkit-line-clamp: unset; display: block; }

.ct-especialidades { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 var(--s-3); }
.ct-tags-base { margin-top: var(--s-2); }
.ct-valor {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok-brd);
    font-weight: 600;
}

.ct-bio-vermais {
    color: var(--ouro);
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
}
.busca-list .ct-bio-vermais { display: none; }

.busca-list { display: block; }
.busca-list .card-terapeuta { display: block; margin-bottom: var(--s-4); }
.busca-list .card-terapeuta .card { padding: var(--s-5) var(--s-6); }
.busca-list .ct-cabecalho { margin-bottom: var(--s-3); }
.busca-list .card-terapeuta img,
.busca-list .card-avatar-placeholder { width: 78px; height: 78px; font-size: 1.6rem; }
.busca-list .card-terapeuta h3 { font-size: 1.1rem; }

/* ============================================================ STARS / RATING ============================================================ */
.stars { display: inline-flex; gap: 2px; }
.star-filled { color: var(--ouro); font-size: 1rem; }
.star-empty  { color: var(--borda2); font-size: 1rem; }

/* ============================================================ WHATSAPP BUTTON ============================================================ */
.btn-whatsapp {
    display: flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    background: #25D366;
    color: #fff;
    padding: .85rem 1.5rem;
    border-radius: var(--radius);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t-fast), transform var(--t-fast);
    border: none; cursor: pointer;
    width: 100%;
    min-height: 48px;
}
.btn-whatsapp:hover { background: #1FBA5B; color: #fff; transform: translateY(-1px); }
.btn-whatsapp .wa-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; flex-shrink: 0; }

/* ============================================================ STATS / KPI ============================================================ */
.stat-card {
    background: var(--card);
    border: 1px solid var(--borda);
    border-radius: var(--radius-lg);
    padding: var(--s-5);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.stat-card:hover { border-color: var(--borda2); box-shadow: var(--shadow-sm); }
.stat-card .label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted2);
    font-weight: 700;
}
.stat-card .value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.1rem;
    letter-spacing: -.022em;
    margin-top: .35rem;
    line-height: 1.05;
    color: var(--texto);
}
.stat-card .delta {
    font-size: .8rem; color: var(--ok);
    margin-top: .35rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .25rem;
}
.stat-card .delta.down { color: var(--danger); }
.stat-card.highlighted {
    background: linear-gradient(135deg, var(--ouro), var(--ouro-hov));
    color: #fff;
    border-color: var(--ouro);
}
.stat-card.highlighted .label,
.stat-card.highlighted .value { color: #fff; }
.stat-card.highlighted .label { color: rgba(255,255,255,.85); }

/* ============================================================ ESTADOS VAZIOS ============================================================ */
.empty-state {
    text-align: center;
    padding: var(--s-10) var(--s-5);
    color: var(--muted);
}
.empty-state-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ouro-cl);
    color: var(--ouro);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: var(--s-4);
}
.empty-state h3 {
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: var(--s-2);
}
.empty-state p {
    font-size: .92rem;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto var(--s-5);
}
.empty-state-actions {
    display: inline-flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center;
}

.empty-state-compact {
    text-align: center;
    padding: var(--s-6) var(--s-4);
    color: var(--muted2);
    font-size: .9rem;
    line-height: 1.5;
}
.empty-state-compact .empty-state-icon { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: var(--s-3); }

/* ============================================================ SKELETON LOADERS ============================================================ */
.skel {
    display: block;
    background: linear-gradient(90deg,
        var(--creme-2) 0%,
        var(--creme-3) 50%,
        var(--creme-2) 100%);
    background-size: 200% 100%;
    animation: skelPulse 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skelPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skel-text { height: 1em; margin-bottom: .4em; border-radius: 4px; }
.skel-text:last-child { width: 70%; margin-bottom: 0; }
.skel-circle { border-radius: 50%; }
.skel-card {
    border: 1px solid var(--borda);
    border-radius: var(--radius-lg);
    padding: var(--s-5);
    background: var(--card);
}

/* ============================================================ FOOTER ============================================================ */
.site-footer {
    border-top: 1px solid var(--borda);
    padding: var(--s-8) 0 var(--s-7);
    margin-top: var(--s-16);
    font-size: .85rem;
    color: var(--muted2);
    text-align: center;
    background: var(--card);
}
.site-footer a { color: var(--muted2); text-decoration: none; transition: color var(--t-fast); }
.site-footer a:hover { color: var(--ouro); }

/* ============================================================ SCROLLBAR ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--creme); }
::-webkit-scrollbar-thumb { background: var(--borda2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }

/* ============================================================ QUIZ ============================================================ */
.pergunta-opcao, .quiz-opcao {
    display: block;
    padding: .9rem 1.1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    margin-bottom: .55rem;
    cursor: pointer;
    transition: all var(--t-fast);
    font-size: .94rem;
    background: var(--card);
    min-height: 48px;
}
.pergunta-opcao:hover, .quiz-opcao:hover {
    border-color: var(--ouro-brd);
    background: var(--ouro-cl);
}
.pergunta-opcao.selected, .quiz-opcao.selected,
.pergunta-opcao:has(input:checked), .quiz-opcao:has(input:checked) {
    background: var(--ouro-lt);
    border-color: var(--ouro);
    font-weight: 600;
    color: var(--texto);
}

/* ============================================================ RESPONSIVO ============================================================ */
@media (max-width: 1023px) {
    .painel-layout { grid-template-columns: 200px 1fr; gap: var(--s-6); }
}

@media (max-width: 768px) {
    .busca-hero { padding: var(--s-8) var(--s-4) var(--s-6); }
    .busca-hero h1 { font-size: 1.55rem; }
    .painel-layout { grid-template-columns: 1fr !important; }
    .painel-layout > nav { display: none; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .search-integrated { flex-direction: column; border-radius: var(--radius); }
    .search-integrated input,
    .search-integrated select {
        border-right: none;
        border-bottom: 1px solid var(--borda);
        min-width: 100%;
    }
    .search-integrated .btn-search {
        border-radius: 0 0 var(--radius) var(--radius);
        width: 100%;
    }
    nav { gap: var(--s-3); }
    .site-header .container {
        height: auto;
        padding: var(--s-3) var(--s-5);
        flex-wrap: wrap;
    }
    .tabela { font-size: .85rem; }
    .tabela th, .tabela td { padding: .55rem; }
    .tabela, table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
    main, .container { padding: 0 var(--s-4); }
    .busca-grid { grid-template-columns: 1fr; }
    .card { padding: var(--s-4); }
    .btn-primary, .btn { padding: .6rem 1.1rem; font-size: .88rem; }
}

/* ============================================================ AGENDA v2 mobile ============================================================ */
@media (max-width: 768px) {
    .agenda-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-2);
        margin-bottom: var(--s-3);
    }

    .ag-card {
        display: flex;
        align-items: flex-start;
        gap: var(--s-3);
        padding: var(--s-3);
        background: var(--card);
        border: 1px solid var(--borda);
        border-radius: var(--radius);
        margin-bottom: .45rem;
        -webkit-tap-highlight-color: transparent;
        transition: border-color var(--t-fast), background var(--t-fast);
    }
    .ag-card:active {
        border-color: var(--ouro-brd);
        background: var(--ouro-cl);
    }
    .ag-card-date {
        text-align: center;
        background: var(--ouro);
        color: #fff;
        border-radius: var(--radius-sm);
        padding: .35rem .5rem;
        min-width: 44px;
        flex-shrink: 0;
    }
    .ag-card-date.cancelado { background: var(--muted2); }
    .ag-card-date-d {
        font-family: var(--font-display);
        font-size: 1.05rem; font-weight: 600;
        line-height: 1.1;
    }
    .ag-card-date-m { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
    .ag-card-body   { flex: 1; min-width: 0; }
    .ag-card-nome   {
        font-size: .92rem; font-weight: 600; color: var(--texto);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ag-card-meta   { font-size: .76rem; color: var(--muted); margin-top: .15rem; line-height: 1.4; }
    .ag-card-tags   { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }

    .modal-overlay.aberto {
        align-items: flex-end;
        padding: 0;
    }
    .modal-overlay.aberto .modal {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-width: 100%;
        max-height: 92vh;
        overflow-y: auto;
    }
    .modal-overlay.aberto .modal-header::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: var(--borda2);
        border-radius: var(--radius-pill);
        margin: 0 auto .65rem;
    }

    .cal-cell { min-height: 48px; padding: .2rem; }
    .cal-head  { font-size: .65rem; padding: .25rem 0; }
    .cal-ag    { font-size: .62rem; padding: .1rem .25rem; }

    .pront-grid-2 { grid-template-columns: 1fr !important; }
    .rel-grid-2 { grid-template-columns: 1fr 1fr !important; }
    .rel-tabela-mobile { display: none; }
    .form-row { grid-template-columns: 1fr; }

    .painel-layout > div > h2 { font-size: 1rem; }
    .painel-layout > div > .page-header { margin-bottom: var(--s-4); }

    .bvt-btn, .icon-btn { min-width: 44px; min-height: 44px; }
}

/* Cards de terapeuta — mobile */
@media (max-width: 720px) {
    .busca-grid { grid-template-columns: 1fr !important; }
    .busca-view-toggle { display: none !important; }

    .ct-cabecalho {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: var(--s-3) !important;
    }
    .ct-cabecalho-info { width: 100% !important; }
    .ct-cabecalho-info > div:first-child { justify-content: center !important; }
    .ct-nota { justify-content: center !important; }

    .card-terapeuta img,
    .card-avatar-placeholder,
    .busca-list .card-terapeuta img,
    .busca-list .card-avatar-placeholder {
        width: 120px !important;
        height: 120px !important;
        font-size: 2.2rem !important;
    }

    .ct-bio { text-align: left !important; }
    .ct-especialidades, .ct-tags-base { justify-content: flex-start !important; }
}

/* Perfil mobile hero */
@media (max-width: 720px) {
    .perfil-mobile-hero {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: var(--s-4) !important;
    }
    .perfil-mobile-hero .selo-escola-mobile { display: inline-flex !important; }
    .perfil-mobile-hero .selo-escola-desktop { display: none !important; }

    .perfil-mobile-hero > img,
    .perfil-mobile-hero > div[style*="border-radius:50%"] {
        width: 220px !important;
        height: 220px !important;
        border-width: 3px !important;
        font-size: 3.5rem !important;
    }
    .perfil-mobile-hero > div[style*="flex:1"] {
        flex: none !important;
        width: 100% !important;
        text-align: center !important;
    }
    .perfil-mobile-hero h1 {
        font-family: var(--font-display) !important;
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: -.018em !important;
        margin: var(--s-3) 0 var(--s-4) !important;
        color: var(--texto) !important;
    }
    .perfil-mobile-hero p { text-align: center !important; }
    .perfil-mobile-hero .stars { justify-content: center !important; }
    .perfil-mobile-hero > div[style*="flex:1"] > div[style*="display:flex;align-items:center"]:not([style*="background"]) {
        justify-content: center !important;
    }
    .perfil-mobile-hero .tags {
        justify-content: center !important;
        gap: .5rem !important;
    }
    .perfil-mobile-hero .tags .tag {
        padding: .42rem 1rem !important;
        font-size: .85rem !important;
        border-radius: var(--radius-pill) !important;
    }
    .perfil-mobile-hero > div[style*="flex:1"] > div[style*="background:var(--ouro-cl)"] {
        margin-top: var(--s-4) !important;
        padding: var(--s-4) var(--s-5) !important;
        text-align: center !important;
    }
    .perfil-mobile-hero .cta-desktop { text-align: center; margin-top: var(--s-4); }
    .perfil-mobile-hero .cta-desktop .btn-whatsapp { width: 100% !important; }
}

/* ============================================================ UTILITÁRIOS ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--muted); }
.text-muted2 { color: var(--muted2); }
.text-gold { color: var(--ouro); }
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok); }
.font-display { font-family: var(--font-display); }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1) !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mt-6 { margin-top: var(--s-6) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-5 { margin-bottom: var(--s-5) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }

.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;
}

/* ============================================================ A11Y — REDUCED MOTION ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .skel { animation: none; background: var(--creme-2); }
}

/* ============================================================ PRINT ============================================================ */
@media print {
    .site-header, .site-footer, .painel-drawer-overlay, .painel-drawer,
    .hamburger-btn, .modal-overlay, .flash-auto { display: none !important; }
    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}


/* ============================================================
   v2 — REDESIGN MOBILE BUSCA (additivo, não substitui o anterior)
   ------------------------------------------------------------
   - Hero compacto mobile (eyebrow + sub-headline somem)
   - Search progressiva: input + botão; filtros expansíveis
   - Header mobile compacto (52px)
   - Cards horizontais com expansão acordeão (mobile-only)
   - Box "Pergunte" reposicionado entre cards
   ============================================================ */

/* ----- Header compacto no mobile (52px em vez de 64) ----- */
@media (max-width: 768px) {
    :root { --header-h: 52px; }
    .site-header .container { height: 52px; padding: 0 var(--s-4); }
    .logo { font-size: .98rem; }
    .logo span { font-size: .82rem; }
}

/* ----- Hero compacto mobile ----- */
@media (max-width: 768px) {
    .busca-hero {
        padding: var(--s-4) var(--s-4) var(--s-3);
    }
    .busca-hero::after { display: none; }
    .busca-hero .eyebrow { display: none; }
    .busca-hero-sub { display: none; }
    .busca-hero h1 {
        font-size: 1.32rem;
        margin: 0 auto var(--s-3);
        line-height: 1.22;
    }
    .busca-hero h1 .desktop-only-inline { display: none; }
}

/* ----- Search progressiva (estado colapsado mobile) ----- */
@media (max-width: 768px) {
    .search-integrated {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--s-1);
        padding: var(--s-1);
        background: var(--card);
        border: 1.5px solid var(--borda2);
        border-radius: var(--radius-lg);
        overflow: visible;
    }
    .search-integrated input[type="text"] {
        flex: 1;
        min-width: 0;
        background: transparent;
        border: none;
        border-right: none;
        padding: .65rem .75rem;
        min-height: 40px;
        font-size: .92rem;
    }
    .search-integrated input[type="text"]:focus { background: transparent; box-shadow: none; }

    /* Esconde os 2 selects no mobile por padrão */
    .search-integrated select { display: none; }

    /* Botão buscar vira ícone redondo */
    .search-integrated .btn-search {
        width: 42px; height: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: var(--radius);
        font-size: 0;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .search-integrated .btn-search::after {
        content: '⌕';
        font-size: 22px;
        font-weight: 400;
        line-height: 1;
    }
}

/* Barra de filtros mobile (chips abaixo da search) */
.busca-filtros-bar {
    display: none;
}
@media (max-width: 768px) {
    .busca-filtros-bar {
        display: flex;
        gap: var(--s-2);
        flex-wrap: wrap;
        margin-top: var(--s-3);
    }
    .chip-filtros, .chip-geo {
        display: inline-flex;
        align-items: center;
        gap: var(--s-1);
        padding: .42rem .85rem;
        border-radius: var(--radius-pill);
        font-size: .82rem;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--t-fast);
        font-family: inherit;
        background: var(--card);
        border: 1px solid var(--borda2);
        color: var(--texto);
        min-height: 36px;
    }
    .chip-filtros { background: var(--card); border-color: var(--ouro-brd); color: var(--ouro-hov); font-weight: 600; }
    .chip-filtros:hover { background: var(--ouro-cl); }
    .chip-filtros.aplicados { background: var(--ouro); color: #fff; border-color: var(--ouro); }
    .chip-filtros .chip-count {
        background: rgba(255,255,255,.25);
        color: inherit;
        padding: 0 6px;
        border-radius: var(--radius-pill);
        font-size: .72rem;
        font-weight: 700;
        min-width: 18px;
        text-align: center;
    }
    .chip-filtros:not(.aplicados) .chip-count { display: none; }
    .chip-geo {
        background: transparent;
        border: 1px dashed var(--ouro-brd);
        color: var(--ouro);
    }
    .chip-geo:hover { background: var(--ouro-cl); border-style: solid; }
    .chip-geo.ativo { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-brd); }
    .chip-geo:disabled { opacity: .6; cursor: progress; }
}

/* ----- Filtros expandidos (drawer mobile) ----- */
.busca-filtros-expandidos {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--t-slow);
}
.busca-filtros-expandidos.aberto { max-height: 220px; }

@media (max-width: 768px) {
    .busca-filtros-expandidos {
        margin-top: var(--s-3);
    }
    .busca-filtros-expandidos.aberto {
        padding-top: var(--s-1);
    }
    .busca-filtros-expandidos select.filtro-mobile {
        display: block !important;
        width: 100%;
        margin-bottom: var(--s-2);
        background: var(--card);
        border: 1px solid var(--borda2);
        border-radius: var(--radius);
        padding: .65rem .9rem;
        min-height: 44px;
        font-size: .9rem;
    }
}
@media (min-width: 769px) {
    /* Desktop: os selects originais estão visíveis na search-integrated.
       O bloco .busca-filtros-expandidos some (já tem selects no form). */
    .busca-filtros-expandidos { display: none; }
    .busca-filtros-bar { display: none; }
}

/* Hide de elementos específicos por viewport (utility) */
@media (max-width: 768px) { .hide-mobile { display: none !important; } }
@media (min-width: 769px) { .hide-desktop { display: none !important; } }

/* ----- Chips de filtros aplicados (acima dos resultados) ----- */
.filtros-aplicados-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    align-items: center;
}
.filtros-aplicados-bar .label {
    font-size: .76rem;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-right: var(--s-1);
}
.chip-aplicado {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .35rem .25rem .8rem;
    background: var(--ouro-cl);
    color: var(--ouro-hov);
    border: 1px solid var(--ouro-brd);
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--t-fast);
}
.chip-aplicado:hover { background: var(--ouro-lt); color: var(--ouro-deep); }
.chip-aplicado .x {
    width: 18px; height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(168, 122, 31, .15);
    font-size: 13px;
    line-height: 1;
}
.chip-aplicado:hover .x { background: rgba(168, 122, 31, .3); }

/* ----- Cards expansíveis (mobile only) ----- */
@media (max-width: 768px) {
    .busca-grid { gap: var(--s-3); }

    /* Reset do layout centralizado mobile (anterior) */
    .card-terapeuta { display: block; }
    .card-terapeuta .card { padding: 0; overflow: hidden; }

    /* Bloco visível sempre (colapsado) */
    .ct-resumo {
        display: flex;
        gap: var(--s-3);
        padding: var(--s-3) var(--s-4);
        align-items: center;
        cursor: pointer;
        background: transparent;
        border: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    .ct-resumo:active { background: var(--creme); }
    .ct-resumo .ct-foto img,
    .ct-resumo .ct-foto .card-avatar-placeholder {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.3rem !important;
        border-width: 1.5px !important;
        flex-shrink: 0;
    }
    .ct-resumo .ct-info { flex: 1; min-width: 0; }
    .ct-resumo .ct-nome-linha {
        display: flex;
        align-items: center;
        gap: .35rem;
        flex-wrap: wrap;
    }
    .ct-resumo .ct-nome-linha h3 {
        font-size: .98rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        line-height: 1.2;
    }
    .ct-resumo .ct-meta {
        font-size: .74rem;
        color: var(--muted2);
        margin-top: 2px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ct-resumo .ct-bio-resumida {
        font-size: .8rem;
        color: var(--muted);
        line-height: 1.4;
        margin-top: 4px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .ct-resumo .ct-tags-resumo {
        display: flex;
        gap: .25rem;
        flex-wrap: wrap;
        margin-top: 6px;
    }
    .ct-resumo .ct-tags-resumo .tag {
        font-size: .68rem;
        padding: .15rem .55rem;
    }
    .ct-resumo .ct-chevron {
        flex-shrink: 0;
        font-size: 1rem;
        color: var(--ouro);
        align-self: flex-start;
        margin-top: 4px;
        transition: transform var(--t-base);
        line-height: 1;
    }
    .card-terapeuta.expandido .ct-resumo .ct-chevron { transform: rotate(180deg); }

    /* Detalhe expansível */
    .ct-detail {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t-slow);
        background: var(--ouro-cl);
        border-top: 0px solid transparent;
    }
    .card-terapeuta.expandido .ct-detail {
        max-height: 800px;
        border-top: 1px solid var(--ouro-brd);
    }
    .card-terapeuta.expandido .card {
        border-color: var(--ouro-brd);
        box-shadow: var(--shadow-md);
    }
    .card-terapeuta.expandido .card::before { width: 100% !important; }

    .ct-detail-inner { padding: var(--s-4) var(--s-4) var(--s-5); }

    .ct-bio-completa {
        font-size: .87rem;
        color: var(--muted);
        line-height: 1.55;
        margin-bottom: var(--s-3);
    }
    .ct-detail-secao {
        margin-bottom: var(--s-3);
    }
    .ct-detail-secao .ct-detail-label {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--muted2);
        font-weight: 700;
        margin-bottom: var(--s-1);
        display: block;
    }
    .ct-detail-secao .tags { display: flex; gap: .35rem; flex-wrap: wrap; }
    .ct-detail-secao .tag { font-size: .76rem; padding: .25rem .7rem; }

    .ct-cta-grupo {
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
        margin-top: var(--s-4);
    }
    .ct-cta-grupo .btn-whatsapp,
    .ct-cta-grupo .btn-gold-outline {
        width: 100%;
        text-decoration: none;
        min-height: 46px;
    }
}

/* ----- Desktop: detalhe nunca aparece (cards seguem comportamento original) ----- */
@media (min-width: 769px) {
    .ct-detail { display: none !important; }
    .ct-chevron { display: none !important; }
    /* Desktop usa as classes originais .ct-cabecalho, .ct-bio etc.
       que já existem no app.css. As classes .ct-resumo etc. são exclusivas mobile. */
    .ct-resumo { display: contents; }
    .ct-resumo .ct-info,
    .ct-resumo .ct-foto { display: contents; }
}

/* ----- Box "Pergunte" abaixo dos filtros (empurra cards pra baixo após 1.2s) -----
   Animação: começa com max-height:0 + opacity:0 e expande pra altura natural,
   empurrando os cards seguintes pra baixo. Fade-in simultâneo. ----- */
.cta-pergunte-aposfiltros {
    margin: 0 var(--s-5);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    animation: ctaPergSlide 0.6s cubic-bezier(.4, 0, .2, 1) 1.2s forwards;
}
@keyframes ctaPergSlide {
    0%   { max-height: 0;     opacity: 0; transform: translateY(-6px); margin-top: 0; }
    50%  { max-height: 220px; opacity: 0.5; }
    100% { max-height: 220px; opacity: 1; transform: translateY(0); margin-top: var(--s-6); }
}
.cta-pergunte-aposfiltros .cta-pergunte-link {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    background: linear-gradient(135deg, var(--ouro-cl) 0%, var(--card) 100%);
    border: 1px solid var(--ouro-brd);
    border-radius: var(--radius-lg);
    padding: var(--s-4) var(--s-5);
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-fast), box-shadow var(--t-base), border-color var(--t-base);
}
.cta-pergunte-aposfiltros .cta-pergunte-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--ouro);
}
.cta-pergunte-aposfiltros .cta-pergunte-icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; margin-top: .15rem; }
.cta-pergunte-aposfiltros .cta-pergunte-content { flex: 1; min-width: 0; }
.cta-pergunte-aposfiltros .cta-pergunte-titulo {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--texto);
    line-height: 1.25;
    letter-spacing: -.01em;
    margin-bottom: .3rem;
}
.cta-pergunte-aposfiltros .cta-pergunte-desc {
    font-size: .87rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 .3rem;
}
.cta-pergunte-aposfiltros .cta-pergunte-cta {
    font-size: .85rem;
    color: var(--ouro-hov);
    font-weight: 600;
}
@media (max-width: 768px) {
    .cta-pergunte-aposfiltros { margin-left: var(--s-4); margin-right: var(--s-4); }
    .cta-pergunte-aposfiltros .cta-pergunte-link { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
    .cta-pergunte-aposfiltros .cta-pergunte-icon { font-size: 1.5rem; }
    .cta-pergunte-aposfiltros .cta-pergunte-titulo { font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cta-pergunte-aposfiltros {
        animation: none;
        max-height: none;
        opacity: 1;
        transform: none;
        margin-top: var(--s-6);
    }
    .cta-pergunte-aposfiltros .cta-pergunte-link { transition: none; }
    .cta-pergunte-aposfiltros .cta-pergunte-link:hover { transform: none; box-shadow: none; }
    .ct-detail, .ct-chevron { transition: none !important; }
}

/* Toggle de view escondido no mobile (já estava, reforço) */
@media (max-width: 768px) {
    .busca-view-toggle { display: none !important; }
}

/* ----- Hint de toque no mobile (acessibilidade) ----- */
@media (max-width: 768px) {
    .ct-resumo:focus-visible {
        outline: 2px solid var(--ouro);
        outline-offset: -2px;
        border-radius: var(--radius-lg);
    }
}