/* =====================================================================
   Ariadne Moreira — main.css
   Organização:
     1. @font-face (Fraunces + Inter variable fonts, locais)
     2. :root tokens (cores, espaçamentos, tipografia, raios, sombras)
     3. Reset (Andy Bell modern reset, adaptado)
     4. Base (body, headings, links, focus, accessibility)
     5. Container (utility .container)
     6. Reduced motion (override global)

   Próximas subfases adicionam blocos por seção (hero, métricas, sobre, etc.)
   ===================================================================== */


/* ─── 1. @font-face ─────────────────────────────────────────────────── */

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/Fraunces-VariableFont.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/assets/fonts/Inter-VariableFont.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─── 2. :root tokens ───────────────────────────────────────────────── */

:root {
    /* Paleta — base CLAUDE.md + variantes derivadas */
    --color-sage:           #9CAF88;
    --color-sage-dark:      #6B7F65;
    --color-beige:          #E8DCC4;
    --color-beige-soft:     #F0E7D5;
    --color-terracota:        #C97B5C;
    --color-terracota-dark:   #A85F42;  /* AA-Large; reservado a fundos charcoal */
    --color-terracota-darker: #8E4731;  /* AA texto pequeno em offwhite/beige/beige-soft */
    --color-offwhite:         #FAF7F2;
    --color-charcoal:         #3D3A36;
    --color-charcoal-soft:    #5C5852;  /* texto secundário */
    --color-sage-darker:      #4F6149;  /* AA texto pequeno em offwhite/beige/beige-soft */

    /* === Mapa de fundos por dobra (Padrão Hierárquico Narrativo) ===
       Sistema: 3 tons de bege rotacionados com intenção emocional.
       Todos os fundos garantem contraste AAA com texto charcoal #3D3A36.
       ─────────────────────────────────────────────────────────────
       Hero          → moldura beige (E8DCC4) + interno offwhite (FAF7F2)
       Métricas      → offwhite           (pausa visual leve)
       Sobre         → beige-soft (F0E7D5) (introspecção, mais quente) ⭐
       Método        → offwhite           (clareza didática)
       Especialidades→ beige (E8DCC4)     (destaque "menu")
       Depoimentos   → offwhite           (voz do paciente, neutro)
       Investimento  → beige-soft (F0E7D5) (decisão calorosa)         ⭐
       FAQ           → offwhite           (clareza informacional)
       CTA Final     → beige (E8DCC4)     (eco do hero — fecha como abriu)
       Footer        → charcoal (3D3A36)  (contraste de fechamento)         */
    --bg-section-hero-frame:   var(--color-beige);
    --bg-section-hero-inner:   var(--color-offwhite);
    --bg-section-metrics:      var(--color-offwhite);
    --bg-section-about:        var(--color-beige-soft);
    --bg-section-method:       var(--color-offwhite);
    --bg-section-specialties:  var(--color-beige);
    --bg-section-testimonials: var(--color-offwhite);
    --bg-section-investment:   var(--color-beige-soft);
    --bg-section-faq:          var(--color-offwhite);
    --bg-section-cta-final:    var(--color-beige);
    --bg-section-footer:       var(--color-charcoal);

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

    /* Escala fluida (ratio 1.250 — Major Third) */
    --text-xs:      clamp(0.75rem,   0.71rem + 0.18vw, 0.875rem);  /* 12-14 */
    --text-sm:      clamp(0.875rem,  0.84rem + 0.18vw, 1rem);      /* 14-16 */
    --text-base:    clamp(1rem,      0.95rem + 0.25vw, 1.125rem);  /* 16-18 */
    --text-lg:      clamp(1.125rem,  1.05rem + 0.4vw,  1.375rem);  /* 18-22 */
    --text-xl:      clamp(1.375rem,  1.25rem + 0.6vw,  1.75rem);   /* 22-28 */
    --text-2xl:     clamp(1.75rem,   1.55rem + 1vw,    2.5rem);    /* 28-40 */
    --text-3xl:     clamp(2.25rem,   1.9rem  + 1.8vw,  3.75rem);   /* 36-60 — H1 hero */
    --text-display: clamp(2.75rem,   2rem    + 3.75vw, 5.5rem);    /* 44-88 — opcional */

    --leading-tight: 1.15;
    --leading-snug:  1.3;
    --leading-base:  1.6;
    --leading-loose: 1.8;

    /* Espaçamento — escala 8px com meio-passo 4px */
    --space-2xs: 0.25rem;   /*   4px */
    --space-xs:  0.5rem;    /*   8px */
    --space-sm:  1rem;      /*  16px */
    --space-md:  1.5rem;    /*  24px */
    --space-lg:  2rem;      /*  32px */
    --space-xl:  3rem;      /*  48px */
    --space-2xl: 4rem;      /*  64px */
    --space-3xl: 6rem;      /*  96px */
    --space-4xl: 8rem;      /* 128px */

    /* Raios */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --radius-pill: 999px;

    /* Sombras — sutis, nada agressivo */
    --shadow-sm: 0 1px 2px rgba(61, 58, 54, 0.04), 0 1px 3px rgba(61, 58, 54, 0.06);
    --shadow-md: 0 4px 6px rgba(61, 58, 54, 0.04), 0 10px 15px rgba(61, 58, 54, 0.08);

    /* Transições */
    --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* easeOutQuad */
    --ease-sage: cubic-bezier(0.16, 1,    0.3,  1);     /* easeOutExpo */
    --dur-fast:  200ms;
    --dur-base:  400ms;
    --dur-slow:  700ms;

    /* Layout */
    --container-max:     1180px;
    --container-padding: clamp(1rem, 4vw, 2rem);

    /* Tema base aplicado ao body */
    color-scheme: light;
    accent-color: var(--color-sage);
}


/* ─── 3. Reset (Andy Bell modern reset) ─────────────────────────────── */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Defesa global contra overflow horizontal causado por elementos
       com transform/position absolute que possam vazar o viewport. */
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    min-height: 100svh;
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Defesa global, par com o html acima. max-width controla casos
       em que algum descendente tenta esticar além da viewport. */
    overflow-x: hidden;
    max-width: 100vw;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul, ol {
    list-style: none;
    padding: 0;
}


/* ─── 4. Base ───────────────────────────────────────────────────────── */

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-charcoal);
    background: var(--color-offwhite);
    font-feature-settings: 'kern' 1, 'liga' 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--color-charcoal);
    font-variation-settings: 'opsz' 36;  /* optical sizing alto = display */
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
    text-wrap: pretty;
    max-width: 65ch;
}

a {
    color: var(--color-terracota-darker);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--dur-fast) var(--ease-soft);
}

a:hover {
    color: var(--color-terracota-darker);
}

strong, b {
    font-weight: 600;
}

/* Skip link — primeiro elemento focável da página */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    transform: translateY(-100%);
    transition: transform var(--dur-fast) var(--ease-soft);
    z-index: 100;
}

.skip-link:focus-visible {
    transform: translateY(0);
    color: var(--color-offwhite);
}

/* Foco visível custom — terracota com offset, contraste WCAG AA */
:focus-visible {
    outline: 2px solid var(--color-terracota-darker);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Seleção de texto */
::selection {
    background: var(--color-beige);
    color: var(--color-charcoal);
}

/* Scrollbar discreto (apenas Webkit/Blink) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-offwhite); }
::-webkit-scrollbar-thumb {
    background: var(--color-beige);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-sage); }


/* ─── 5. Container ──────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* =====================================================================
   === HEADER ===
   Header não-sticky. Logo Fraunces + nav Inter + CTA pílula carvão.
   Mobile: nav colapsa em hambúrguer (visual apenas, JS futuro).
   Desktop (>= 1080px): nav visível, hambúrguer some.
   ===================================================================== */

.site-header {
    background: var(--color-offwhite);
    position: relative;
    z-index: 10;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-sm);
}

.site-header__logo {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--color-charcoal);
    text-decoration: none;
    font-variation-settings: 'opsz' 14;
    flex-shrink: 0;
}

.site-header__nav {
    display: none;
}

.site-header__menu-toggle {
    background: none;
    border: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    position: relative;
    order: 3;
}

.site-header__menu-icon {
    position: absolute;
    top: calc(50% - 3px);
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 1.5px;
    background: var(--color-charcoal);
    border-radius: 2px;
}

.site-header__menu-icon::before {
    content: "";
    position: absolute;
    top: 5.5px;
    left: 0;
    width: 18px;
    height: 1.5px;
    background: var(--color-charcoal);
    border-radius: 2px;
}

.site-header__cta {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
    background: var(--color-charcoal-soft);
    color: var(--color-offwhite);
    transform: translateY(-1px);
}

/* Patch I: link "Entrar" — discreto, à esquerda do CTA Agendar.
   Visível em mobile e desktop; em mobile fica entre o menu toggle e o CTA. */
.site-header__login {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-soft);
}

.site-header__login:hover,
.site-header__login:focus-visible {
    color: var(--color-terracota-darker);
}

@media (min-width: 1080px) {
    .site-header__inner {
        padding-block: var(--space-md);
    }

    .site-header__menu-toggle {
        display: none;
    }

    .site-header__nav {
        display: block;
        flex: 1;
    }

    .site-header__nav-list {
        display: flex;
        gap: var(--space-lg);
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .site-header__nav-list a {
        font-family: var(--font-sans);
        font-size: 14px;
        color: var(--color-charcoal-soft);
        text-decoration: none;
        transition: color var(--dur-fast) var(--ease-soft);
    }

    .site-header__nav-list a:hover,
    .site-header__nav-list a:focus-visible {
        color: var(--color-charcoal);
    }

    .site-header__cta {
        font-size: 14px;
        padding: 10px 20px;
    }

    .site-header__login {
        font-size: 14px;
    }
}


/* =====================================================================
   === HERO ===
   Estilos do hero "Cartão Postal Artesanal" da home: moldura beige
   externa envolvendo um cartão offwhite com border-radius.
   ===================================================================== */

/* ─── Frame externo (moldura beige) ─────────────────────────────── */

.hero {
    background: var(--bg-section-hero-frame);
    padding: 12px;
    /* A moldura beige é uma caixa visual fechada — nada deve vazar dela. */
    overflow: hidden;
}

/* ─── Área interna (offwhite + radius) ──────────────────────────── */

.hero > .hero-postal {
    background: var(--bg-section-hero-inner);
    border-radius: 16px;
    padding: 16px 18px 24px;
}

/* ─── Hero (conteúdo) ─────────────────────────────────────────────── */

.hero-postal {
    text-align: center;
}

.hero-postal__photo-wrap {
    position: relative;
    width: 76%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    margin: 0 auto var(--space-lg);
    border-radius: 50% 50% 16px 16px / 60% 60% 16px 16px;
    overflow: hidden;
    background: var(--color-sage);
}

.hero-postal__seal {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(250, 247, 242, 0.95);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    color: var(--color-charcoal-soft);
    letter-spacing: 0.04em;
}

.hero-postal__photo {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero-postal__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-postal__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin-block-end: var(--space-xs);
    font-variation-settings: 'opsz' 9;
}

.hero-postal__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin-block-end: var(--space-sm);
    text-wrap: balance;
    font-variation-settings: 'opsz' 144;
}

.hero-postal__subtitle {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--color-charcoal-soft);
    max-width: 32ch;
    margin: 0 auto var(--space-lg);
    text-wrap: pretty;
}

.hero-postal__cta {
    display: block;
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    padding: 16px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.hero-postal__cta:hover,
.hero-postal__cta:focus-visible {
    background: var(--color-charcoal-soft);
    color: var(--color-offwhite);
    transform: translateY(-1px);
}

.hero-postal__cta-note {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-sage-darker);
    text-align: center;
    margin-block-start: var(--space-sm);
}

/* ─── Credenciais (mobile-first; vira último item da coluna esquerda em desktop) ─── */

.hero-postal__credentials {
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid rgba(61, 58, 54, 0.08);
    text-align: inherit;  /* center em mobile, left em desktop (herda do hero) */
}

.hero-postal__credentials-eyebrow {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-sage-darker);
    margin-block-end: var(--space-sm);
}

.hero-postal__credentials-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.hero-postal__credentials-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 32ch;
    margin-inline: auto;  /* center em mobile (sobrescrito em desktop) */
}

.hero-postal__credentials-degree {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-charcoal);
    font-variation-settings: 'opsz' 14;
}

.hero-postal__credentials-school {
    font-family: var(--font-sans);
    font-size: 10px;
    color: var(--color-charcoal-soft);
    letter-spacing: 0.02em;
}

/* ─── Desktop (>= 1080px) ─────────────────────────────────────────── */

@media (min-width: 1080px) {

    /* Frame desktop — moldura mais espessa */
    .hero {
        padding: 16px;
        display: flex;
        justify-content: center;
    }

    /* Cartão interno — radius menor + largura limitada */
    .hero > .hero-postal {
        border-radius: 12px;
        max-width: 1180px;
        width: 100%;
    }

    /* Hero: 2 colunas */
    .hero-postal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: center;
        text-align: left;
        padding: 56px 40px;
    }

    .hero-postal__photo-wrap {
        grid-column: 2;
        grid-row: 1 / span 6;
        width: 100%;
        max-width: none;
        aspect-ratio: 4 / 5;
        border-radius: 12px;
        margin: 0;
    }

    .hero-postal__seal {
        bottom: 16px;
        right: 16px;
    }

    /* Bloco credenciais — último item da coluna esquerda do grid */
    .hero-postal__credentials {
        grid-column: 1;
    }

    .hero-postal__credentials-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .hero-postal__credentials-item {
        margin-inline: 0;  /* alinha à esquerda no desktop */
    }

    .hero-postal__credentials-degree {
        font-size: 14px;
    }

    .hero-postal__credentials-school {
        font-size: 11px;
    }

    .hero-postal__eyebrow {
        grid-column: 1;
        margin-block-end: var(--space-sm);
    }

    .hero-postal__title {
        grid-column: 1;
        font-size: 60px;
        margin-block-end: var(--space-md);
    }

    .hero-postal__subtitle {
        grid-column: 1;
        max-width: 38ch;
        margin: 0 0 var(--space-lg);
        font-size: 16px;
    }

    .hero-postal__cta {
        grid-column: 1;
        justify-self: start;
        display: inline-block;
        padding: 16px 32px;
        font-size: 15px;
    }

    .hero-postal__cta-note {
        grid-column: 1;
        text-align: left;
    }
}


/* ─── Hero — animações de entrada ─────────────────────────────────── */

@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-postal__eyebrow,
.hero-postal__title,
.hero-postal__subtitle,
.hero-postal__cta,
.hero-postal__cta-note,
.hero-postal__credentials {
    animation: hero-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-postal__eyebrow      { animation-delay: 100ms; }
.hero-postal__title        { animation-delay: 200ms; }
.hero-postal__subtitle     { animation-delay: 300ms; }
.hero-postal__cta          { animation-delay: 400ms; }
.hero-postal__cta-note     { animation-delay: 500ms; }
.hero-postal__credentials  { animation-delay: 600ms; }

/* A foto (.hero-postal__photo-wrap) NÃO recebe animação — é o LCP da
   página e deve estar pintada já no primeiro frame. */


/* =====================================================================
   === MÉTRICAS ===
   Faixa de prova social abaixo do hero. Fundo offwhite (token
   --bg-section-metrics), 3 colunas com divisórias verticais sutis.
   Contadores animados via IntersectionObserver (script no rodapé).
   ===================================================================== */

.metrics {
    background: var(--bg-section-metrics);
    padding-block: var(--space-2xl);
}

.metrics__container {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.metrics__eyebrow {
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-xl) 0;
    font-variation-settings: 'opsz' 9;
}

.metrics__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.metrics__item {
    text-align: center;
    padding-inline: var(--space-md);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
}

/* Divisórias verticais entre items (não no primeiro) */
.metrics__item + .metrics__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(61, 58, 54, 0.12);
}

.metrics__value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    font-variation-settings: 'opsz' 36;
    line-height: 1;
}

.metrics__star {
    width: clamp(16px, 3.5vw, 18px);
    height: clamp(16px, 3.5vw, 18px);
    color: var(--color-terracota-darker);
    flex-shrink: 0;
}

.metrics__number {
    /* tabular-nums evita pulinho horizontal durante animação */
    font-variant-numeric: tabular-nums;
}

.metrics__label {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-charcoal-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

@media (min-width: 1080px) {
    .metrics {
        padding-block: var(--space-3xl);
    }

    .metrics__value {
        font-size: 48px;
    }

    .metrics__star {
        width: 24px;
        height: 24px;
    }

    .metrics__label {
        font-size: 13px;
    }

    .metrics__item {
        padding-inline: var(--space-lg);
    }
}


/* =====================================================================
   === SOBRE ===
   Seção introspectiva. Fundo beige-soft (token --bg-section-about),
   layout 2 colunas em desktop com card sticky lateral contendo
   citação destacada + formação acadêmica completa.
   ===================================================================== */

.about {
    background: var(--bg-section-about);
    padding-block: var(--space-2xl);
}

.about__container {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.about__eyebrow {
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-xl) 0;
    font-variation-settings: 'opsz' 9;
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.about__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 144;
    text-wrap: balance;
}

.about__body p {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-md) 0;
    text-wrap: pretty;
}

.about__highlight {
    color: var(--color-charcoal) !important;
    font-weight: 500 !important;
}

.about__signoff {
    font-family: var(--font-serif) !important;
    font-style: italic;
    font-size: 18px !important;
    color: var(--color-sage-darker) !important;
    margin-block-start: var(--space-md) !important;
}

/* Card lateral (citação + formação) */
.about__card {
    background: var(--color-offwhite);
    padding: var(--space-lg) var(--space-md);
    border-radius: 12px;
    border-left: 3px solid var(--color-terracota);
}

.about__quote-mark {
    font-family: var(--font-serif);
    font-size: 56px;
    line-height: 0.4;
    color: var(--color-terracota-darker);
    display: block;
    margin-block-end: 0;
    font-style: italic;
}

.about__quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 4vw, 22px);
    line-height: 1.35;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-lg) 0;
    text-wrap: balance;
    font-variation-settings: 'opsz' 36;
}

.about__divider {
    border: 0;
    border-top: 0.5px solid rgba(61, 58, 54, 0.15);
    margin-block: var(--space-md);
}

.about__credentials-eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-sm) 0;
}

.about__credentials-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about__credentials-item {
    margin-block-end: var(--space-sm);
}

.about__credentials-item:last-child {
    margin-block-end: 0;
}

.about__credential-degree {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--color-charcoal);
    display: block;
    line-height: 1.3;
    margin-block-end: 2px;
    font-variation-settings: 'opsz' 14;
}

.about__credential-school {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
}

@media (min-width: 1080px) {
    .about {
        padding-block: var(--space-3xl);
    }

    .about__grid {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--space-2xl);
        align-items: start;
    }

    .about__title {
        font-size: 40px;
        margin-block-end: var(--space-lg);
    }

    .about__body p {
        font-size: 15.5px;
    }

    /* Card sticky em desktop — acompanha o scroll do texto */
    .about__aside {
        position: sticky;
        top: var(--space-xl);
    }

    .about__card {
        padding: var(--space-xl) var(--space-lg);
    }
}


/* =====================================================================
   === MÉTODO ===
   3 pilares com numeração editorial em Fraunces grande terracota.
   Fundo offwhite (token --bg-section-method) — pausa visual após o
   beige-soft do Sobre. Cards brancos com hairline charcoal 6%.
   ===================================================================== */

.method {
    background: var(--bg-section-method);
    padding-block: var(--space-2xl);
}

.method__container {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.method__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-xl) auto;
}

.method__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 9;
}

.method__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 144;
    text-wrap: balance;
}

.method__lead {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-charcoal-soft);
    margin: 0;
    text-wrap: pretty;
}

.method__pillars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.method__pillar {
    background: #FFFFFF;
    padding: var(--space-lg) var(--space-md);
    border-radius: 12px;
    border: 1px solid rgba(61, 58, 54, 0.06);
}

.method__number {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(40px, 8vw, 56px);
    line-height: 1;
    color: var(--color-terracota-darker);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 144;
}

.method__pillar-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-sm) 0;
    font-variation-settings: 'opsz' 36;
    text-wrap: balance;
}

.method__pillar-text {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--color-charcoal-soft);
    margin: 0;
    text-wrap: pretty;
}

/* Animação de entrada — fade-up sequencial dos 3 pilares quando entram na viewport */
.method__pillar {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.method__pillar.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.method__pillar.is-visible:nth-child(1) { transition-delay: 0ms;   }
.method__pillar.is-visible:nth-child(2) { transition-delay: 120ms; }
.method__pillar.is-visible:nth-child(3) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    .method__pillar {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (min-width: 1080px) {
    .method {
        padding-block: var(--space-3xl);
    }

    .method__pillars {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    .method__pillar {
        padding: var(--space-xl) var(--space-lg);
    }

    .method__number {
        font-size: 64px;
        margin-block-end: var(--space-lg);
    }
}


/* =====================================================================
   === ESPECIALIDADES ===
   8 itens em grade. Fundo beige (token --bg-section-specialties), cards
   offwhite com ponto terracota como acento decorativo. Não são tags
   interativas — são informação estática estilizada.
   ===================================================================== */

.specialties {
    background: var(--bg-section-specialties);
    padding-block: var(--space-2xl);
}

.specialties__container {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.specialties__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-xl) auto;
}

.specialties__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 9;
}

.specialties__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 144;
    text-wrap: balance;
}

.specialties__lead {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-charcoal-soft);
    margin: 0;
    text-wrap: pretty;
}

.specialties__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.specialties__item {
    background: var(--color-offwhite);
    padding: var(--space-md);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.specialties__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-terracota);
    flex-shrink: 0;
}

.specialties__label {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--color-charcoal);
    line-height: 1.25;
    font-variation-settings: 'opsz' 14;
    text-wrap: balance;
}

.specialties__footer {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: var(--space-xl) 0 0 0;
}

.specialties__footer-link {
    color: var(--color-terracota-darker);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(201, 123, 92, 0.4);
    margin-inline-start: 4px;
    transition: text-decoration-color var(--dur-fast) var(--ease-soft);
}

.specialties__footer-link:hover,
.specialties__footer-link:focus-visible {
    text-decoration-color: var(--color-terracota-darker);
}

/* Animação de entrada — fade-up sequencial dos 8 itens */
.specialties__item {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.specialties__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.specialties__item.is-visible:nth-child(1) { transition-delay: 0ms;   }
.specialties__item.is-visible:nth-child(2) { transition-delay: 60ms;  }
.specialties__item.is-visible:nth-child(3) { transition-delay: 120ms; }
.specialties__item.is-visible:nth-child(4) { transition-delay: 180ms; }
.specialties__item.is-visible:nth-child(5) { transition-delay: 240ms; }
.specialties__item.is-visible:nth-child(6) { transition-delay: 300ms; }
.specialties__item.is-visible:nth-child(7) { transition-delay: 360ms; }
.specialties__item.is-visible:nth-child(8) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
    .specialties__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (min-width: 1080px) {
    .specialties {
        padding-block: var(--space-3xl);
    }

    .specialties__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }

    .specialties__item {
        padding: var(--space-lg) var(--space-md);
    }

    .specialties__label {
        font-size: 16px;
    }

    .specialties__footer {
        font-size: 14px;
        margin-block-start: var(--space-2xl);
    }
}


/* =====================================================================
   === DEPOIMENTOS ===
   4 cards estilo carta com 4 reviews reais do Zenklub. Fundo offwhite
   (token --bg-section-testimonials), grid 1-col mobile / 2x2 desktop.
   ===================================================================== */

.testimonials {
    background: var(--bg-section-testimonials);
    padding-block: var(--space-2xl);
}

.testimonials__container {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.testimonials__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-xl) auto;
}

.testimonials__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 9;
}

.testimonials__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 144;
    text-wrap: balance;
}

.testimonials__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    letter-spacing: 0.02em;
}

.testimonials__source-star {
    width: 14px;
    height: 14px;
    color: var(--color-terracota-darker);
    flex-shrink: 0;
}

.testimonials__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.testimonials__card {
    background: var(--color-offwhite);
    padding: var(--space-lg) var(--space-md);
    border-radius: 12px;
    border: 1px solid rgba(61, 58, 54, 0.06);
    position: relative;
    display: flex;
    flex-direction: column;
}

.testimonials__quote-mark {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 48px;
    line-height: 0.4;
    color: var(--color-terracota-darker);
    display: block;
    margin-block-end: var(--space-sm);
    height: 18px;
}

.testimonials__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    text-wrap: pretty;
    font-variation-settings: 'opsz' 36;
    flex-grow: 1;
}

.testimonials__attribution {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid rgba(61, 58, 54, 0.08);
}

.testimonials__author {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-sage-darker);
    font-variation-settings: 'opsz' 14;
}

.testimonials__date {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-charcoal-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Animação de entrada — fade-up sequencial dos 4 cards */
.testimonials__card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.testimonials__card.is-visible:nth-child(1) { transition-delay: 0ms;   }
.testimonials__card.is-visible:nth-child(2) { transition-delay: 100ms; }
.testimonials__card.is-visible:nth-child(3) { transition-delay: 200ms; }
.testimonials__card.is-visible:nth-child(4) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
    .testimonials__card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (min-width: 1080px) {
    .testimonials {
        padding-block: var(--space-3xl);
    }

    .testimonials__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .testimonials__card {
        padding: var(--space-xl) var(--space-lg);
    }

    .testimonials__text {
        font-size: 16px;
    }
}


/* =====================================================================
   === INVESTIMENTO ===
   2 produtos lado a lado: Sessão Única + Pacote 4 Sessões (destacado).
   Fundo beige-soft (--bg-section-investment) — momento de decisão calorosa.
   ===================================================================== */

.investment {
    background: var(--bg-section-investment);
    padding-block: var(--space-2xl);
}

.investment__container {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.investment__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-xl) auto;
}

.investment__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
}

.investment__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    text-wrap: balance;
}

.investment__lead {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-charcoal-soft);
    margin: 0;
}

.investment__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.investment__card {
    background: var(--color-offwhite);
    padding: var(--space-xl) var(--space-lg);
    border-radius: 12px;
    border: 1px solid rgba(61, 58, 54, 0.06);
    position: relative;
    display: flex;
    flex-direction: column;
}

.investment__card--featured {
    border-color: var(--color-terracota-darker);
    border-width: 2px;
}

.investment__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-terracota);
    color: var(--color-offwhite);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.investment__plan-name {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.015em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
}

.investment__plan-tagline {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.4;
}

.investment__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-block-end: var(--space-xs);
}

.investment__price-currency {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--color-charcoal-soft);
}

.investment__price-amount {
    font-family: var(--font-serif);
    font-size: clamp(40px, 8vw, 56px);
    font-weight: 500;
    line-height: 1;
    color: var(--color-charcoal);
    letter-spacing: -0.025em;
}

.investment__price-period {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin-inline-start: 4px;
}

.investment__price-note {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-lg) 0;
    font-weight: 500;
}

.investment__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl) 0;
    flex-grow: 1;
}

.investment__features li {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-charcoal-soft);
    padding-block: 6px;
    padding-inline-start: 20px;
    position: relative;
    border-block-start: 0.5px solid rgba(61, 58, 54, 0.08);
}

.investment__features li:first-child {
    border-block-start: none;
}

.investment__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-terracota-darker);
    font-weight: 600;
}

.investment__cta {
    display: block;
    text-align: center;
    padding: 14px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.investment__cta--secondary {
    background: transparent;
    color: var(--color-charcoal);
    border: 1px solid var(--color-charcoal);
}

.investment__cta--secondary:hover,
.investment__cta--secondary:focus-visible {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    transform: translateY(-1px);
}

.investment__cta--primary {
    background: var(--color-terracota);
    color: var(--color-offwhite);
}

.investment__cta--primary:hover,
.investment__cta--primary:focus-visible {
    background: var(--color-terracota-dark);
    transform: translateY(-1px);
}

.investment__footer-note {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: var(--space-xl) 0 0 0;
    letter-spacing: 0.02em;
}

@media (min-width: 1080px) {
    .investment {
        padding-block: var(--space-3xl);
    }

    .investment__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        max-width: 880px;
        margin: 0 auto;
    }

    .investment__card {
        padding: var(--space-2xl) var(--space-xl);
    }

    .investment__plan-name {
        font-size: 26px;
    }
}


/* =====================================================================
   === FAQ ===
   4 perguntas em <details>/<summary> nativos. Fundo offwhite (token
   --bg-section-faq). Hairline entre items, ícone +/- terracota
   animado. Animação de abertura via interpolate-size com fallback.
   ===================================================================== */

.faq {
    background: var(--bg-section-faq);
    padding-block: var(--space-2xl);
}

.faq__container {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.faq__header {
    text-align: center;
    margin-block-end: var(--space-xl);
}

.faq__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
}

.faq__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin: 0;
    text-wrap: balance;
}

.faq__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq__item {
    border-block-end: 1px solid rgba(61, 58, 54, 0.08);
}

.faq__item:first-child {
    border-block-start: 1px solid rgba(61, 58, 54, 0.08);
}

.faq__details > summary {
    list-style: none;
}

.faq__details > summary::-webkit-details-marker {
    display: none;
}

.faq__summary {
    cursor: pointer;
    padding-block: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    color: var(--color-charcoal);
    letter-spacing: -0.01em;
    transition: color var(--dur-fast) var(--ease-soft);
}

.faq__summary:hover,
.faq__summary:focus-visible {
    color: var(--color-terracota-darker);
}

/* Ícone +/- com pseudo-elementos */
.faq__icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    background: var(--color-terracota);
    transition: transform var(--dur-fast) var(--ease-soft);
}

.faq__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    transform: translateY(-50%);
}

.faq__icon::after {
    left: 50%;
    top: 0;
    width: 1.5px;
    height: 100%;
    transform: translateX(-50%);
}

.faq__details[open] .faq__icon::after {
    transform: translateX(-50%) scaleY(0);
}

.faq__answer {
    padding-block-end: var(--space-md);
    padding-inline-end: var(--space-xl);
}

.faq__answer p {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-charcoal-soft);
    margin: 0;
}

/* Animação de abertura — interpolate-size onde suportado, fallback abre instantâneo */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    .faq__details::details-content {
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: opacity var(--dur-base) var(--ease-soft),
                    height var(--dur-base) var(--ease-soft),
                    content-visibility var(--dur-base) allow-discrete;
    }

    .faq__details[open]::details-content {
        opacity: 1;
        height: auto;
    }
}

@media (min-width: 1080px) {
    .faq {
        padding-block: var(--space-3xl);
    }

    .faq__summary {
        font-size: 19px;
        padding-block: var(--space-lg);
    }

    .faq__answer p {
        font-size: 15px;
    }
}


/* =====================================================================
   === CTA FINAL ===
   Chamada final compacta antes do footer. Eco visual do hero (fundo
   beige) — fecha a página como abriu.
   ===================================================================== */

.cta-final {
    background: var(--bg-section-cta-final);
    padding-block: var(--space-3xl);
}

.cta-final__container {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    text-align: center;
}

.cta-final__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
}

.cta-final__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(32px, 7vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    text-wrap: balance;
}

.cta-final__subtitle {
    font-family: var(--font-sans);
    font-size: clamp(15px, 3vw, 17px);
    line-height: 1.6;
    color: var(--color-charcoal-soft);
    margin: 0 auto var(--space-xl) auto;
    max-width: 520px;
}

.cta-final__cta {
    display: inline-block;
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    padding: 16px 32px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
    margin-block-end: var(--space-md);
}

.cta-final__cta:hover,
.cta-final__cta:focus-visible {
    background: var(--color-charcoal-soft);
    color: var(--color-offwhite);
    transform: translateY(-1px);
}

.cta-final__note {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-sage-darker);
    margin: 0;
    letter-spacing: 0.02em;
}

@media (min-width: 1080px) {
    .cta-final {
        padding-block: 120px;
    }

    .cta-final__cta {
        font-size: 16px;
        padding: 18px 36px;
    }
}


/* =====================================================================
   === FOOTER ===
   Minimalista charcoal. Contraste de fechamento conforme mapa
   Hierárquico Narrativo (último estrato).
   ===================================================================== */

.site-footer {
    background: var(--bg-section-footer);
    color: var(--color-offwhite);
    padding-block: var(--space-2xl);
}

.site-footer__container {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    text-align: center;
}

.site-footer__brand {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--color-offwhite);
    margin: 0 0 var(--space-sm) 0;
}

.site-footer__crp {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: rgba(250, 247, 242, 0.6);
    margin: 0 0 var(--space-md) 0;
}

.site-footer__tagline {
    font-family: var(--font-sans);
    font-size: 13px;
    color: rgba(250, 247, 242, 0.7);
    margin: 0 0 var(--space-md) 0;
    letter-spacing: 0.02em;
}

.site-footer__legal {
    font-family: var(--font-sans);
    font-size: 11px;
    color: rgba(250, 247, 242, 0.4);
    margin: 0;
    letter-spacing: 0.02em;
}

.site-footer a {
    color: rgba(250, 247, 242, 0.8);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color var(--dur-fast) var(--ease-soft);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--color-offwhite);
}


/* =====================================================================
   === AUTH (cadastro, stubs /agendar e /minha-conta) ===
   Reutiliza a estética Cartão Postal Artesanal: moldura beige + cartão
   offwhite + tipografia Fraunces+Inter. Form com inputs altos,
   focus terracota-darker, mensagens de erro inline.
   ===================================================================== */

.auth-page {
    background: var(--color-offwhite);
    padding-block: var(--space-2xl);
    min-height: 60svh;
}

.auth-frame {
    background: var(--bg-section-hero-frame);
    padding: 12px;
    margin: 0 auto;
    max-width: 560px;
    border-radius: var(--radius-lg);
}

.auth-card {
    background: var(--color-offwhite);
    padding: clamp(28px, 5vw, 56px);
    border-radius: var(--radius-md);
}

.auth-card__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 9;
}

.auth-card__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 5vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    font-variation-settings: 'opsz' 144;
    text-wrap: balance;
}

.auth-card__subtitle {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-xl) 0;
    text-wrap: pretty;
}

/* ─── Form de cadastro ─────────────────────────────────────────────── */

.register-form {
    display: grid;
    gap: var(--space-md);
}

.register-form__banner {
    background: rgba(142, 71, 49, 0.08);
    border: 1px solid var(--color-terracota-darker);
    color: var(--color-terracota-darker);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 14px;
}

.register-form__banner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

.register-form__banner--success {
    background: rgba(79, 97, 73, 0.08);
    border-color: var(--color-sage-darker);
    color: var(--color-sage-darker);
}

.register-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.register-form__label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal);
    letter-spacing: 0.01em;
}

.register-form__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(61, 58, 54, 0.25);
    border-radius: var(--radius-sm);
    background: var(--color-offwhite);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-charcoal);
    transition: border-color var(--dur-fast) var(--ease-soft),
                outline-color var(--dur-fast) var(--ease-soft);
}

.register-form__input::placeholder {
    color: var(--color-charcoal-soft);
    opacity: 0.6;
}

.register-form__input:focus-visible {
    outline: 2px solid var(--color-terracota-darker);
    outline-offset: 2px;
    border-color: var(--color-terracota-darker);
}

.register-form__field--error .register-form__input {
    border-color: var(--color-terracota-darker);
}

.register-form__error {
    color: var(--color-terracota-darker);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
}

.register-form__submit {
    display: inline-block;
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    padding: 14px 28px;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-block-start: var(--space-sm);
    transition: background var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.register-form__submit:hover,
.register-form__submit:focus-visible {
    background: var(--color-charcoal-soft);
    color: var(--color-offwhite);
    transform: translateY(-1px);
}

.register-form__login-link {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: var(--space-sm) 0 0 0;
}

.register-form__login-link a {
    color: var(--color-terracota-darker);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Stubs (/agendar, /minha-conta) ───────────────────────────────── */

.stub-page {
    text-align: center;
}

.stub-page__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    margin-block-start: var(--space-lg);
}

.stub-page__cta {
    display: inline-block;
}

.stub-page__note {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    margin: 0;
}

.stub-page__logout-form {
    margin: 0;
}

.stub-page__logout-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.stub-page__logout-btn:hover,
.stub-page__logout-btn:focus-visible {
    color: var(--color-terracota-darker);
}


/* =====================================================================
   === CATALOG (/agendar) — Subfase 3.2 ===
   Listagem pública dos produtos do banco. Visual ressoa com a seção
   Investimento da landing (mesma paleta + estrutura de card), mas
   classes próprias .catalog-* mantêm o bloco isolado. Card destacado
   (is_featured) ganha border 2px terracota-darker + badge.
   ===================================================================== */

.catalog-page {
    background: var(--color-offwhite);
    padding-block: var(--space-2xl);
}

.catalog-hero {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl) auto;
    padding-inline: var(--space-md);
}

.catalog-hero__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracota-darker);
    margin: 0 0 var(--space-md) 0;
}

.catalog-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(32px, 6vw, 48px);
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 144;
    text-wrap: balance;
}

.catalog-hero__subtitle {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-charcoal-soft);
    margin: 0;
    line-height: 1.6;
}

.catalog-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .catalog-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.catalog-card {
    position: relative;
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: clamp(28px, 4vw, 40px);
    display: flex;
    flex-direction: column;
}

.catalog-card--featured {
    border: 2px solid var(--color-terracota-darker);
}

.catalog-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.catalog-card__title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 4vw, 28px);
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.01em;
    font-variation-settings: 'opsz' 36;
}

.catalog-card__description {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.5;
}

.catalog-card__price-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-block-end: var(--space-xs);
}

.catalog-card__price-currency {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--color-charcoal-soft);
}

.catalog-card__price-value {
    font-family: var(--font-serif);
    font-size: clamp(48px, 8vw, 64px);
    font-weight: 500;
    color: var(--color-charcoal);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 144;
}

.catalog-card__price-note {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
}

.catalog-card__per-session {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-terracota-darker);
    font-weight: 500;
    margin: 0 0 var(--space-md) 0;
}

.catalog-card__details {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0;
    flex-grow: 1;
}

.catalog-card__details li {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal);
    padding-block: 8px;
    padding-inline-start: 24px;
    position: relative;
    border-block-end: 1px solid rgba(61, 58, 54, 0.06);
}

.catalog-card__details li::before {
    content: "\2713"; /* ✓ */
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-terracota-darker);
    font-weight: 600;
}

.catalog-card__details li:last-child {
    border-block-end: none;
}

.catalog-card__cta {
    display: inline-block;
    text-align: center;
    padding: 14px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    margin-block-start: var(--space-md);
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.catalog-card__cta--primary {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

.catalog-card__cta--primary:hover,
.catalog-card__cta--primary:focus-visible {
    background: var(--color-terracota);
    color: var(--color-offwhite);
    transform: translateY(-1px);
}

.catalog-card__cta--secondary {
    background: transparent;
    color: var(--color-charcoal);
    border: 1px solid var(--color-charcoal);
}

.catalog-card__cta--secondary:hover,
.catalog-card__cta--secondary:focus-visible {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    transform: translateY(-1px);
}

.catalog-footnote {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: var(--space-2xl) auto 0 auto;
    padding-inline: var(--space-md);
    max-width: 600px;
    letter-spacing: 0.02em;
}


/* =====================================================================
   === ACCOUNT (/minha-conta) ===
   Dashboard do paciente. Reutiliza tokens do bloco AUTH (auth-card,
   register-form) e adiciona estrutura de seções empilhadas.
   ===================================================================== */

.account-page {
    padding-block: var(--space-2xl);
}

.account-container {
    max-width: 720px;
    margin: 0 auto;
    padding-inline: var(--space-md);
    display: grid;
    gap: var(--space-lg);
}

.account-header {
    text-align: center;
    margin-block-end: var(--space-md);
}

.account-section {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.08);
    border-radius: var(--radius-md);
    padding: clamp(24px, 4vw, 40px);
}

.account-section__title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-md) 0;
    letter-spacing: -0.01em;
    font-variation-settings: 'opsz' 36;
}

.account-section__placeholder {
    background: var(--color-beige-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    text-align: center;
}

.account-section__placeholder p {
    margin: 0 0 var(--space-sm) 0;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
}

.account-section__placeholder p:last-child {
    margin-block-end: 0;
}

.account-section__cta {
    color: var(--color-terracota-darker);
    font-family: var(--font-sans);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.account-section__cta:hover,
.account-section__cta:focus-visible {
    color: var(--color-terracota);
}

.register-form__input--readonly {
    background: rgba(61, 58, 54, 0.04);
    color: var(--color-charcoal-soft);
    cursor: not-allowed;
}

.register-form__hint {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin-block-start: 4px;
}

.account-logout {
    text-align: center;
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid rgba(61, 58, 54, 0.08);
}

/* Zona de perigo (Subfase 2.5c) */
.account-section--danger {
    border: 2px solid rgba(168, 95, 66, 0.3);
    background: rgba(168, 95, 66, 0.02);
}

.account-section__title--danger {
    color: var(--color-terracota-darker);
}

.account-section__danger-warning {
    background: rgba(168, 95, 66, 0.08);
    border-left: 3px solid var(--color-terracota-darker);
    padding: var(--space-md);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-block-end: var(--space-md);
}

.account-danger-details {
    margin-block-start: var(--space-md);
}

.account-danger-details__summary {
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-terracota-darker);
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: var(--space-sm) 0;
    list-style: none;
}

.account-danger-details__summary::-webkit-details-marker {
    display: none;
}

.account-danger-details[open] > .account-danger-details__summary {
    margin-block-end: var(--space-md);
}

.register-form__submit--danger {
    background: var(--color-terracota-darker);
}

.register-form__submit--danger:hover,
.register-form__submit--danger:focus-visible {
    /* Clarear no hover dá feedback de "atenção" sem confirmar
       compromisso visual com a ação destrutiva. */
    background: var(--color-terracota);
}

/* Banner pós-delete na home (?conta_apagada=1) */
.account-deleted-banner {
    background: var(--color-sage-darker);
    color: var(--color-offwhite);
    padding: 12px 16px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 14px;
}


/* =====================================================================
   === ADMIN — Subfase 4.2b ===
   Estilos exclusivos do painel admin. Reaproveita .account-* da Fase 2,
   adiciona apenas o que é específico da agenda admin.
   ===================================================================== */

/* Link "← Voltar ao painel" no header da agenda */
.account-header__back-link {
    color: var(--color-terracota-darker);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-family: var(--font-sans);
    font-size: 14px;
}

.account-header__back-link:hover,
.account-header__back-link:focus-visible {
    color: var(--color-terracota);
}

/* Texto descritivo logo abaixo do título de uma section */
.account-section__description {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

/* Form de bloqueio: 2 datas lado a lado em ≥ 600px */
.admin-block-form__row {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    margin-block-end: var(--space-md);
}

@media (min-width: 600px) {
    .admin-block-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Listagem de bloqueios */
.admin-blocks-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.admin-blocks-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(61, 58, 54, 0.03);
    border: 1px solid rgba(61, 58, 54, 0.08);
    border-radius: var(--radius-sm);
}

.admin-blocks-list__info {
    flex: 1;
    min-width: 0;
}

.admin-blocks-list__period {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0;
}

.admin-blocks-list__reason {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 4px 0 0 0;
    font-style: italic;
}

.admin-blocks-list__delete-form {
    flex-shrink: 0;
    margin: 0;
}

.admin-blocks-list__delete-button {
    background: transparent;
    border: 1px solid var(--color-terracota-darker);
    color: var(--color-terracota-darker);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft);
}

.admin-blocks-list__delete-button:hover,
.admin-blocks-list__delete-button:focus-visible {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

.admin-blocks-list--empty {
    margin-block-start: var(--space-lg);
}

/* === Regras de disponibilidade — Subfase 4.2c-i === */

/* Form de regras: 4 colunas em desktop, empilhado em mobile */
.admin-rule-form__row {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    margin-block-end: var(--space-md);
}

@media (min-width: 768px) {
    .admin-rule-form__row {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        align-items: end;
    }
}

/* Listagem de regras — agrupada por dia da semana */
.admin-rules-list {
    margin-block-start: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.admin-rules-list__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.admin-rules-list__day-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: -0.01em;
}

.admin-rules-list__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.admin-rules-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(61, 58, 54, 0.03);
    border: 1px solid rgba(61, 58, 54, 0.08);
    border-radius: var(--radius-sm);
}

.admin-rules-list__info {
    flex: 1;
    min-width: 0;
}

.admin-rules-list__time {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0;
}

.admin-rules-list__slot {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 2px 0 0 0;
    font-style: italic;
}

.admin-rules-list__delete-form {
    flex-shrink: 0;
    margin: 0;
}

.admin-rules-list__delete-button {
    background: transparent;
    border: 1px solid var(--color-terracota-darker);
    color: var(--color-terracota-darker);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft);
}

.admin-rules-list__delete-button:hover,
.admin-rules-list__delete-button:focus-visible {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

.admin-rules-list--empty {
    margin-block-start: var(--space-lg);
}


/* =====================================================================
 * === ADMIN GRID — Subfase 4.2c-ii Commit C =========================
 * Grid visual interativo de /admin/agenda. Substitui forms simples
 * 4.2b + 4.2c-i. JS em /assets/js/admin-agenda.js.
 * ===================================================================== */

/* Mobile-only / desktop-only switches (escopo agenda admin) */
.admin-agenda-mobile-only { display: none; }

@media (max-width: 767px) {
    .admin-agenda-mobile-only  { display: block; }
    .admin-agenda-desktop-only { display: none; }
}

/* ─── Toolbar de ferramentas (Commit F) ──────────────────────────── */

.admin-grid__tools {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(61, 58, 54, 0.04);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.admin-grid__tools-label {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin-inline-end: var(--space-xs);
}

.admin-grid__tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.15);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.admin-grid__tool:hover {
    background: var(--color-beige-soft);
}

.admin-grid__tool.is-active {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    border-color: var(--color-charcoal);
}

.admin-grid__tool-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.admin-grid__tool-swatch--available { background: var(--color-sage); }
.admin-grid__tool-swatch--block     { background: var(--color-terracota); }
.admin-grid__tool-swatch--clear {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.3);
}

/* ─── Navegação semanal ──────────────────────────────────────────── */

.admin-grid__nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-md);
    flex-wrap: wrap;
}

.admin-grid__nav-button {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(61, 58, 54, 0.15);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    transition: background var(--dur-fast) var(--ease-soft);
}

.admin-grid__nav-button:hover,
.admin-grid__nav-button:focus-visible {
    background: var(--color-beige-soft);
}

.admin-grid__nav-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-grid__week-label {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-charcoal);
    min-width: 280px;
    text-align: center;
    letter-spacing: -0.01em;
}

.admin-grid__today-button {
    margin-inline-start: auto;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--color-terracota-darker);
    color: var(--color-terracota-darker);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft);
}

.admin-grid__today-button:hover,
.admin-grid__today-button:focus-visible {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

/* ─── Grid 7 dias × 28 slots de 30min (08:00–22:00) ──────────────── */

.admin-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 0;
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-offwhite);
    user-select: none;
    -webkit-user-select: none;
}

.admin-grid__day-header {
    text-align: center;
    padding: 10px 4px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-charcoal-soft);
    background: var(--color-beige-soft);
    border-bottom: 1px solid rgba(61, 58, 54, 0.1);
    border-right: 0.5px solid rgba(61, 58, 54, 0.05);
}

.admin-grid__day-header:last-child { border-right: 0; }

.admin-grid__day-header strong {
    display: block;
    font-size: 13px;
    color: var(--color-charcoal);
    font-weight: 500;
    margin-block-start: 2px;
}

.admin-grid__time-label {
    text-align: right;
    padding-inline-end: 8px;
    font-size: 12px;
    color: var(--color-charcoal-soft);
    background: var(--color-offwhite);
    border-right: 1px solid rgba(61, 58, 54, 0.1);
    line-height: 44px;
    height: 44px;
    font-family: var(--font-sans);
}

/* ─── Célula do grid (.gcell) — Commit E: 60min, 44px, label embed ─── */

.gcell {
    height: 44px;
    background: var(--color-offwhite);
    border: 0.5px solid rgba(61, 58, 54, 0.06);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcell:hover { background: rgba(61, 58, 54, 0.04); }

.gcell--available {
    background: rgba(156, 175, 136, 0.55);   /* sage saturado */
    border-color: rgba(107, 127, 101, 0.45);
}

.gcell--available:hover { background: rgba(156, 175, 136, 0.7); }

.gcell--blocked {
    background: rgba(201, 123, 92, 0.45);    /* terracota saturado */
    border-color: rgba(168, 95, 66, 0.5);
}

.gcell--blocked:hover { background: rgba(201, 123, 92, 0.6); }

.gcell--selecting {
    outline: 2px solid #6090d8;
    outline-offset: -2px;
    background: rgba(96, 144, 216, 0.2);
    z-index: 1;
}

.gcell--saving {
    opacity: 0.55;
    pointer-events: none;
}

/* Label centralizado dentro da célula (Disponível/Bloqueado) */
.gcell__label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.gcell--available .gcell__label { color: var(--color-sage-darker); }
.gcell--blocked   .gcell__label { color: var(--color-terracota-darker); }

/* Skeleton enquanto carrega a primeira semana */
.admin-grid__skeleton {
    height: 700px;
    background: linear-gradient(
        90deg,
        rgba(61, 58, 54, 0.03) 0%,
        rgba(61, 58, 54, 0.06) 50%,
        rgba(61, 58, 54, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: admin-grid-pulse 1.5s ease-in-out infinite;
    grid-column: 1 / -1;
}

@keyframes admin-grid-pulse {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 200% 0%; }
}

/* ─── Card "Configurações da agenda" (Commit E) ──────────────────── */

.admin-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 420px;
}

.admin-settings-form__label {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-charcoal);
}

.admin-settings-form__row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}

.admin-settings-form__select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(61, 58, 54, 0.2);
    border-radius: var(--radius-sm);
    background: var(--color-offwhite);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-soft);
}

.admin-settings-form__select:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 2px;
}

.admin-settings-form__submit {
    padding: 10px 22px;
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft);
}

.admin-settings-form__submit:hover,
.admin-settings-form__submit:focus-visible {
    background: var(--color-charcoal-soft);
}

.admin-settings-form__submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Resumo de bloqueios futuros (read-only) ────────────────────── */

.admin-blocks-summary {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.admin-blocks-summary__item {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(61, 58, 54, 0.03);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal);
}

.admin-blocks-summary__item em {
    color: var(--color-charcoal-soft);
    font-style: italic;
}

/* ─── Toast container ────────────────────────────────────────────── */

.admin-toast-container {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 1000;
    pointer-events: none;
}

.admin-toast {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s var(--ease-soft),
                transform 0.25s var(--ease-soft);
    max-width: 360px;
}

.admin-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.admin-toast--error   { background: var(--color-terracota-darker); }
.admin-toast--success { background: var(--color-sage-darker); }

/* ─── Modal de motivo da ferramenta "Bloquear" (Commit F) ────────── */

.admin-grid__modal[hidden] { display: none; }

.admin-grid__modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.admin-grid__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(61, 58, 54, 0.5);
}

.admin-grid__modal-card {
    position: relative;
    background: var(--color-offwhite);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 440px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.admin-grid__modal-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: -0.01em;
}

.admin-grid__modal-summary {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-md) 0;
}

.admin-grid__modal-label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal);
    display: block;
    margin-block-end: 4px;
}

.admin-grid__modal-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(61, 58, 54, 0.2);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    box-sizing: border-box;
    background: var(--color-offwhite);
    color: var(--color-charcoal);
}

.admin-grid__modal-input:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 2px;
}

.admin-grid__modal-hint {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    font-style: italic;
    margin: 6px 0 var(--space-md) 0;
}

.admin-grid__modal-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.admin-grid__modal-cancel,
.admin-grid__modal-confirm {
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background var(--dur-fast) var(--ease-soft);
}

.admin-grid__modal-cancel {
    background: transparent;
    border: 1px solid rgba(61, 58, 54, 0.2);
    color: var(--color-charcoal);
}

.admin-grid__modal-cancel:hover,
.admin-grid__modal-cancel:focus-visible {
    background: var(--color-beige-soft);
}

.admin-grid__modal-confirm {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

.admin-grid__modal-confirm:hover,
.admin-grid__modal-confirm:focus-visible {
    background: var(--color-terracota);
}


/* =====================================================================
 * === AGENDAR PACIENTE — Subfase 4.3a =================================
 * Tela /agendar/{slug}: calendário mensal + horários + summary.
 * ===================================================================== */

.agendar-frame {
    max-width: 980px;
    width: 100%;
}

.agendar-section__header {
    text-align: center;
    margin-block-end: var(--space-lg);
}

.agendar-section__price {
    color: var(--color-terracota-darker);
    font-weight: 500;
}

/* ─── Pacote sem créditos: bloco amigável ────────────────────────── */

.agendar-needs-purchase {
    background: var(--color-beige-soft);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    margin-block: var(--space-md);
}

.agendar-needs-purchase__title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-sm) 0;
}

.agendar-needs-purchase__description {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-charcoal-soft);
    line-height: 1.55;
    margin-block-end: var(--space-md);
}

.agendar-needs-purchase__actions {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.agendar-needs-purchase__back {
    color: var(--color-charcoal-soft);
    font-family: var(--font-sans);
    font-size: 14px;
    text-decoration: none;
}

.agendar-needs-purchase__back:hover {
    color: var(--color-charcoal);
}

/* ─── Aviso de créditos ──────────────────────────────────────────── */

.agendar-credit-info {
    text-align: center;
    background: rgba(156, 175, 136, 0.15);
    color: var(--color-sage-darker);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    margin-block-end: var(--space-md);
}

/* ─── Grid principal ─────────────────────────────────────────────── */

.agendar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block: var(--space-md);
}

@media (min-width: 768px) {
    .agendar-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: start;
    }

    .agendar-grid__calendar { grid-column: 1 / 2; grid-row: 1; }
    .agendar-grid__slots    { grid-column: 2 / 3; grid-row: 1; }
    .agendar-summary        { grid-column: 1 / -1; grid-row: 2; }
}

/* ─── Calendário ─────────────────────────────────────────────────── */

.agendar-grid__calendar {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.agendar-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-end: var(--space-sm);
}

.agendar-calendar__nav-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(61, 58, 54, 0.15);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    transition: background var(--dur-fast) var(--ease-soft);
}

.agendar-calendar__nav-btn:hover:not([disabled]) {
    background: var(--color-beige-soft);
}

.agendar-calendar__nav-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.agendar-calendar__month-label {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0;
    text-align: center;
    flex: 1;
    text-transform: capitalize;
    letter-spacing: -0.01em;
}

.agendar-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-charcoal-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-block-end: 8px;
    border-bottom: 1px solid rgba(61, 58, 54, 0.08);
    margin-block-end: 8px;
}

.agendar-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.agendar-day {
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-charcoal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-soft);
}

.agendar-day--empty {
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.agendar-day--skeleton {
    background: rgba(61, 58, 54, 0.05);
    animation: agendar-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes agendar-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.agendar-day--disabled {
    color: rgba(61, 58, 54, 0.3);
    cursor: not-allowed;
    pointer-events: none;
}

.agendar-day--has-slots {
    background: rgba(156, 175, 136, 0.2);
    color: var(--color-sage-darker);
    font-weight: 500;
}

.agendar-day--has-slots:hover,
.agendar-day--has-slots:focus-visible {
    background: rgba(156, 175, 136, 0.4);
}

.agendar-day--selected {
    background: var(--color-sage-dark);
    color: var(--color-offwhite);
}

.agendar-day--selected:hover,
.agendar-day--selected:focus-visible {
    background: var(--color-sage-darker);
}

.agendar-calendar__legend {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-sm);
    border-top: 1px solid rgba(61, 58, 54, 0.08);
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
}

.agendar-calendar__legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agendar-calendar__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.agendar-calendar__dot--available { background: rgba(156, 175, 136, 0.7); }
.agendar-calendar__dot--selected  { background: var(--color-sage-dark); }

/* ─── Slots ──────────────────────────────────────────────────────── */

.agendar-grid__slots {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.agendar-slots__title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
    text-transform: capitalize;
    letter-spacing: -0.01em;
}

.agendar-slots__hint {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-md) 0;
}

.agendar-slots__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}

.agendar-slots__loading,
.agendar-slots__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-charcoal-soft);
    font-family: var(--font-sans);
    font-size: 14px;
    padding-block: var(--space-md);
    margin: 0;
}

.agendar-slot {
    padding: 10px 0;
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.15);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft);
}

.agendar-slot:hover,
.agendar-slot:focus-visible {
    background: var(--color-beige-soft);
    border-color: rgba(61, 58, 54, 0.3);
}

.agendar-slot--selected {
    background: var(--color-sage-dark);
    color: var(--color-offwhite);
    border-color: var(--color-sage-dark);
}

.agendar-slot--selected:hover,
.agendar-slot--selected:focus-visible {
    background: var(--color-sage-darker);
    border-color: var(--color-sage-darker);
}

/* ─── Summary card ───────────────────────────────────────────────── */

.agendar-summary[hidden] { display: none; }

.agendar-summary {
    background: var(--color-beige);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    border: 1px solid rgba(168, 95, 66, 0.15);
}

.agendar-summary__when {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-sm) 0;
    text-transform: capitalize;
    letter-spacing: -0.01em;
}

.agendar-summary__detail {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    margin: 4px 0;
}

.agendar-summary__cta {
    margin-block-start: var(--space-md);
    min-width: 280px;
}

.agendar-summary__cta[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.agendar-summary__hint {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    font-style: italic;
    margin-block-start: var(--space-xs);
}

/* ─── Toast (paciente) ───────────────────────────────────────────── */

.agendar-toast-container {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 1000;
    pointer-events: none;
}

.agendar-toast {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s var(--ease-soft),
                transform 0.25s var(--ease-soft);
    max-width: 360px;
}

.agendar-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.agendar-toast--error   { background: var(--color-terracota-darker); }
.agendar-toast--success { background: var(--color-sage-darker); }

/* ─── Banner de reagendamento (Subfase 4.4) ──────────────────────── */

.agendar-rebook-banner {
    background: rgba(96, 144, 216, 0.12);
    border: 1px solid rgba(96, 144, 216, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-block-end: var(--space-md);
}

.agendar-rebook-banner__title {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

.agendar-rebook-banner__hint {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-xs) 0;
}

.agendar-rebook-banner__back {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    text-decoration: none;
}

.agendar-rebook-banner__back:hover {
    color: var(--color-charcoal);
}


/* =====================================================================
 * === MINHA CONTA AGENDAMENTOS — Subfase 4.4 ==========================
 * Tabs Próximos/Histórico + cards de appointment.
 * ===================================================================== */

.appointments-section {
    margin-block: var(--space-md);
}

.appointments-tabs {
    display: flex;
    gap: var(--space-2xs);
    margin-block: var(--space-md);
    border-bottom: 1px solid rgba(61, 58, 54, 0.1);
}

.appointments-tab {
    background: transparent;
    border: none;
    padding: 10px 16px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-charcoal-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-block-end: -1px;
    transition: color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.appointments-tab:hover {
    color: var(--color-charcoal);
}

.appointments-tab.is-active {
    color: var(--color-charcoal);
    border-bottom-color: var(--color-terracota-darker);
}

.appointments-tab__count {
    color: var(--color-charcoal-soft);
    font-weight: 400;
    margin-inline-start: 4px;
}

.appointments-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.appointments-panel[hidden] {
    display: none;
}

/* ─── Card de appointment ────────────────────────────────────────── */

.appointment-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
}

@media (min-width: 600px) {
    .appointment-card {
        grid-template-columns: 1.4fr 1.2fr 1fr auto;
        align-items: center;
    }
}

.appointment-card__when {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appointment-card__when strong {
    font-family: var(--font-serif);
    font-size: 17px;
    color: var(--color-charcoal);
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: -0.01em;
}

.appointment-card__date {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
}

.appointment-card__product {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal);
}

.appointment-card__status {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    text-align: center;
    width: fit-content;
}

.appointment-card__status--pendente {
    background: rgba(232, 220, 196, 0.6);
    color: var(--color-charcoal);
}

.appointment-card__status--confirmado {
    background: rgba(156, 175, 136, 0.3);
    color: var(--color-sage-darker);
}

.appointment-card__status--realizada {
    background: rgba(61, 58, 54, 0.08);
    color: var(--color-charcoal-soft);
}

.appointment-card__status--cancelada {
    background: rgba(201, 123, 92, 0.18);
    color: var(--color-terracota-darker);
}

.appointment-card__actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.appointment-card__btn {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appointment-card__btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.appointment-card__btn--secondary {
    background: transparent;
    border-color: rgba(61, 58, 54, 0.2);
    color: var(--color-charcoal);
}

.appointment-card__btn--secondary:hover,
.appointment-card__btn--secondary:focus-visible {
    background: var(--color-beige-soft);
    border-color: rgba(61, 58, 54, 0.35);
}

.appointment-card__btn--danger {
    background: transparent;
    border-color: var(--color-terracota-darker);
    color: var(--color-terracota-darker);
}

.appointment-card__btn--danger:hover,
.appointment-card__btn--danger:focus-visible {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

/* Acessibilidade: hide visually but available pra screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =====================================================================
 * === ADMIN SIDEBAR + SHELL — Subfase 4.5a ===========================
 * Sidebar charcoal fixa em desktop ≥960px, drawer em mobile <960px.
 * Topbar mobile só visível <960px.
 * ===================================================================== */

.admin-body {
    background: #FAF7F2;
    min-height: 100vh;
}

/* ─── Topbar mobile ──────────────────────────────────────────────── */

.admin-topbar-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 16px;
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    position: sticky;
    top: 0;
    z-index: 50;
}

.admin-topbar-mobile__hamburger {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.admin-topbar-mobile__hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-offwhite);
    border-radius: 1px;
}

.admin-topbar-mobile__title {
    flex: 1;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    margin: 0;
    color: var(--color-offwhite);
    letter-spacing: -0.01em;
}

.admin-topbar-mobile__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-offwhite);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 960px) {
    .admin-topbar-mobile { display: none; }
}

/* ─── Sidebar (desktop fixa, mobile drawer) ──────────────────────── */

.admin-sidebar {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    display: flex;
    flex-direction: column;
    width: 280px;
    padding: var(--space-md) 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease-soft);
    overflow-y: auto;
}

.is-drawer-open .admin-sidebar {
    transform: translateX(0);
}

.admin-sidebar__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-soft);
}

.is-drawer-open .admin-sidebar__overlay {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 960px) {
    .admin-sidebar {
        transform: translateX(0);
    }
    .admin-sidebar__overlay {
        display: none;
    }
}

.admin-sidebar__brand {
    padding: 0 var(--space-md) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar__brand-name {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-offwhite);
    margin: 0;
    letter-spacing: -0.01em;
}

.admin-sidebar__brand-sub {
    font-family: var(--font-sans);
    font-size: 11px;
    color: rgba(250, 247, 242, 0.5);
    margin: 2px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-sidebar__nav {
    flex: 1;
    padding: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.admin-sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-sidebar__group-label {
    font-family: var(--font-sans);
    font-size: 10px;
    color: rgba(250, 247, 242, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 var(--space-md);
    margin: 0 0 4px 0;
}

.admin-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-sidebar__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: 10px var(--space-md);
    color: rgba(250, 247, 242, 0.75);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.admin-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-offwhite);
}

.admin-sidebar__link.is-active {
    background: rgba(201, 123, 92, 0.12);
    color: var(--color-offwhite);
    border-left-color: var(--color-terracota);
}

.admin-sidebar__link-label {
    flex: 1;
}

.admin-sidebar__badge {
    background: var(--color-terracota);
    color: var(--color-offwhite);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    min-width: 20px;
    text-align: center;
}

.admin-sidebar__footer {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.admin-sidebar__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-terracota);
    color: var(--color-offwhite);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-sidebar__user-info {
    flex: 1;
    min-width: 0;
}

.admin-sidebar__user-name {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-offwhite);
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar__logout-form {
    margin: 0;
}

.admin-sidebar__logout {
    background: transparent;
    border: 0;
    color: rgba(250, 247, 242, 0.55);
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    transition: color var(--dur-fast) var(--ease-soft);
}

.admin-sidebar__logout:hover {
    color: var(--color-terracota);
}

/* ─── Main area ──────────────────────────────────────────────────── */

.admin-main {
    min-height: 100vh;
    padding: var(--space-md);
}

@media (min-width: 960px) {
    .admin-main {
        margin-left: 280px;
        padding: var(--space-xl) var(--space-lg);
    }
}

.admin-main__inner {
    max-width: 1100px;
    margin: 0 auto;
}


/* =====================================================================
 * === ADMIN AGENDAMENTOS — Subfase 4.5a ==============================
 * ===================================================================== */

.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
    flex-wrap: wrap;
}

.admin-page-header__title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.admin-page-header__subtitle {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    margin: 0;
}

/* CTA primário terracota */
.admin-cta-primary {
    background: var(--color-terracota);
    color: var(--color-offwhite);
    border: 0;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft);
}

.admin-cta-primary:hover,
.admin-cta-primary:focus-visible {
    background: var(--color-terracota-dark);
}

/* Flash banner */
.admin-flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 14px;
    margin-block-end: var(--space-md);
}

.admin-flash--success {
    background: rgba(156, 175, 136, 0.18);
    color: var(--color-sage-darker);
    border: 1px solid rgba(156, 175, 136, 0.3);
}

/* Filtros pílula */
.admin-filters {
    display: flex;
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .admin-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-block-end: 4px;
        margin-inline: calc(-1 * var(--space-sm));
        padding-inline: var(--space-sm);
    }
    .admin-filter { flex-shrink: 0; }
}

.admin-filter {
    padding: 8px 18px;
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.15);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal-soft);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.admin-filter:hover {
    color: var(--color-charcoal);
    background: var(--color-beige-soft);
}

.admin-filter.is-active {
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    border-color: var(--color-charcoal);
}

/* Lista de appointments */
.admin-appts {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.admin-appts__empty {
    background: var(--color-offwhite);
    border: 1px dashed rgba(61, 58, 54, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-charcoal-soft);
    font-family: var(--font-sans);
    font-size: 14px;
}

.admin-appt-card {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .admin-appt-card {
        grid-template-columns: 1.2fr 1.6fr 1fr auto;
        align-items: center;
    }
}

.admin-appt__when {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-appt__time {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-charcoal);
    letter-spacing: -0.01em;
    line-height: 1;
}

.admin-appt__when-meta {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
}

.admin-appt__patient {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-appt__name {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-charcoal);
}

.admin-appt__product {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
}

.admin-appt__status-wrap {
    display: flex;
    justify-content: flex-start;
}

.admin-appt__status {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    width: fit-content;
}

.admin-appt__status--pendente {
    background: rgba(232, 220, 196, 0.6);
    color: var(--color-charcoal);
}

.admin-appt__status--confirmado {
    background: rgba(156, 175, 136, 0.3);
    color: var(--color-sage-darker);
}

.admin-appt__status--realizada {
    background: rgba(61, 58, 54, 0.08);
    color: var(--color-charcoal-soft);
}

.admin-appt__status--cancelada {
    background: rgba(201, 123, 92, 0.18);
    color: var(--color-terracota-darker);
}

.admin-appt__actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.admin-appt__btn {
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.admin-appt__btn--secondary {
    background: transparent;
    border-color: rgba(61, 58, 54, 0.2);
    color: var(--color-charcoal);
}

.admin-appt__btn--secondary:hover,
.admin-appt__btn--secondary:focus-visible {
    background: var(--color-beige-soft);
    border-color: rgba(61, 58, 54, 0.35);
}

.admin-appt__btn--danger {
    background: transparent;
    border-color: var(--color-terracota-darker);
    color: var(--color-terracota-darker);
}

.admin-appt__btn--danger:hover,
.admin-appt__btn--danger:focus-visible {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

/* ─── Modais admin ───────────────────────────────────────────────── */

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.admin-modal[hidden] { display: none; }

.admin-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(61, 58, 54, 0.55);
}

.admin-modal__card {
    position: relative;
    background: var(--color-offwhite);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.admin-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-charcoal-soft);
    font-size: 22px;
    line-height: 1;
}

.admin-modal__close:hover {
    background: rgba(61, 58, 54, 0.06);
    color: var(--color-charcoal);
}

.admin-modal__title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.01em;
    padding-right: var(--space-md);
}

.admin-modal__hint {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

.admin-modal__list {
    margin: 0 0 var(--space-md) 0;
    padding: 0;
}

.admin-modal__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 8px 0;
    border-bottom: 1px solid rgba(61, 58, 54, 0.08);
    font-family: var(--font-sans);
    font-size: 14px;
}

.admin-modal__row:last-child { border-bottom: 0; }

.admin-modal__row dt {
    color: var(--color-charcoal-soft);
    font-size: 13px;
}

.admin-modal__row dd {
    margin: 0;
    color: var(--color-charcoal);
    font-weight: 500;
    text-align: right;
}

.admin-modal__product {
    color: var(--color-charcoal-soft);
    font-weight: 400;
}

.admin-modal__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-block-start: var(--space-md);
}

.admin-modal__btn {
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft);
}

.admin-modal__btn--secondary {
    background: transparent;
    border-color: rgba(61, 58, 54, 0.2);
    color: var(--color-charcoal);
}

.admin-modal__btn--secondary:hover {
    background: var(--color-beige-soft);
}

.admin-modal__btn--primary {
    background: var(--color-terracota);
    color: var(--color-offwhite);
}

.admin-modal__btn--primary:hover {
    background: var(--color-terracota-dark);
}

.admin-modal__btn--danger {
    background: var(--color-terracota-darker);
    color: var(--color-offwhite);
}

.admin-modal__btn--danger:hover {
    background: var(--color-terracota);
}

/* Form interno (modal de criar manual) */
.admin-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-block-end: var(--space-sm);
}

.admin-form__row {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: 1fr 1fr;
    margin-block-end: var(--space-sm);
}

.admin-form__label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal);
}

.admin-form__input {
    padding: 10px 12px;
    border: 1px solid rgba(61, 58, 54, 0.2);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal);
    background: var(--color-offwhite);
}

.admin-form__textarea {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-sans);
}

.admin-form__input:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 1px;
}

.admin-form__error {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-terracota-darker);
    margin: 0;
}

/* Stub */
.admin-stub {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.admin-stub__icon {
    font-size: 40px;
    line-height: 1;
    margin-block-end: var(--space-sm);
}

.admin-stub__title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: -0.01em;
}

.admin-stub__description {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-md) 0;
}

.admin-stub__back {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-terracota-darker);
    text-decoration: none;
}

.admin-stub__back:hover {
    color: var(--color-terracota);
}


/* =====================================================================
 * === ADMIN PACIENTES — Subfase 4.5b =================================
 * ===================================================================== */

/* ─── Banner de senha temporária ─────────────────────────────────── */

.admin-temp-password-banner {
    background: rgba(156, 175, 136, 0.18);
    border: 1px solid rgba(156, 175, 136, 0.4);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-block-end: var(--space-md);
    position: relative;
}

.admin-temp-password-banner[hidden] { display: none; }

.admin-temp-password-banner__close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-charcoal-soft);
    font-size: 18px;
    line-height: 1;
}

.admin-temp-password-banner__close:hover {
    background: rgba(61, 58, 54, 0.06);
}

.admin-temp-password-banner__title {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
}

.admin-temp-password-banner__pwd-line {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
}

.admin-temp-password-banner__pwd {
    font-family: 'Courier New', Consolas, ui-monospace, monospace;
    font-size: 16px;
    font-weight: 600;
    background: var(--color-charcoal);
    color: var(--color-offwhite);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
    user-select: all;
}

.admin-temp-password-banner__hint {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: 0;
    font-style: italic;
}

/* ─── Busca ──────────────────────────────────────────────────────── */

.admin-pacientes-search {
    margin-block-end: var(--space-md);
}

.admin-pacientes-search__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(61, 58, 54, 0.15);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal);
    background: var(--color-offwhite);
    box-sizing: border-box;
}

.admin-pacientes-search__input:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 1px;
}

/* ─── Lista de pacientes ─────────────────────────────────────────── */

.admin-pacientes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.admin-pacientes-list__empty {
    background: var(--color-offwhite);
    border: 1px dashed rgba(61, 58, 54, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
    font-family: var(--font-sans);
    color: var(--color-charcoal-soft);
}

.admin-pacientes-list__empty-hint {
    font-size: 13px;
    margin-block-start: 6px;
}

.admin-pacientes-list__no-results {
    text-align: center;
    color: var(--color-charcoal-soft);
    font-family: var(--font-sans);
    font-size: 14px;
    padding: var(--space-md);
}

/* Card de paciente (linha) */
.admin-pac-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.admin-pac-card:hover,
.admin-pac-card:focus-visible {
    background: var(--color-beige-soft);
    border-color: rgba(61, 58, 54, 0.2);
}

.admin-pac-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-sage);
    color: var(--color-offwhite);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-pac-card__main {
    min-width: 0;
}

.admin-pac-card__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-block-end: 2px;
}

.admin-pac-card__name {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-charcoal);
}

.admin-pac-card__contact {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-pac-card__summary {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: 0;
    font-style: italic;
}

.admin-pac-card__chevron {
    color: var(--color-charcoal-soft);
    font-size: 22px;
    line-height: 1;
}

/* ─── Tags ───────────────────────────────────────────────────────── */

.admin-pac-tag {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    width: fit-content;
}

.admin-pac-tag--nova {
    background: rgba(96, 144, 216, 0.18);
    color: #2c5b9d;
}

.admin-pac-tag--ativa {
    background: rgba(156, 175, 136, 0.3);
    color: var(--color-sage-darker);
}

.admin-pac-tag--pacote {
    background: rgba(156, 175, 136, 0.3);
    color: var(--color-sage-darker);
}

.admin-pac-tag--inativo {
    background: rgba(61, 58, 54, 0.08);
    color: var(--color-charcoal-soft);
}

/* ─── Página dedicada ────────────────────────────────────────────── */

.admin-pac-show__breadcrumb {
    margin: 0 0 var(--space-sm) 0;
}

.admin-pac-show__back {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    text-decoration: none;
}

.admin-pac-show__back:hover {
    color: var(--color-charcoal);
}

.admin-pac-show__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-md);
    align-items: center;
    margin-block-end: var(--space-lg);
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .admin-pac-show__header {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .admin-pac-show__header > .admin-cta-primary {
        grid-column: 1 / -1;
    }
}

.admin-pac-show__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-sage);
    color: var(--color-offwhite);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-pac-show__title-block {
    min-width: 0;
}

.admin-pac-show__name {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.admin-pac-show__contact {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 0 0 8px 0;
}

/* ─── Bloco de seção (anotações + histórico) ─────────────────────── */

.admin-pac-section {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-block-end: var(--space-md);
}

.admin-pac-section__title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.admin-pac-section__hint {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: 0 0 var(--space-md) 0;
    font-style: italic;
}

.admin-pac-section__empty {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    text-align: center;
    padding: var(--space-md);
    margin: 0;
}

.admin-pac-notes-form__actions {
    margin-block-start: var(--space-sm);
    display: flex;
    justify-content: flex-end;
}

/* ─── Histórico de sessões na ficha ──────────────────────────────── */

.admin-pac-history__group-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-charcoal-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: var(--space-md) 0 var(--space-xs) 0;
    padding-block-start: var(--space-xs);
    border-top: 1px solid rgba(61, 58, 54, 0.06);
}

.admin-pac-history__group-title:first-of-type {
    margin-top: var(--space-xs);
    padding-top: 0;
    border-top: 0;
}

.admin-pac-history-card {
    padding: var(--space-sm);
    background: var(--color-beige-soft);
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-xs);
}

.admin-pac-history-card__when {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.admin-pac-history-card__when strong {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-charcoal);
}

.admin-pac-history-card__time {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
}

.admin-pac-history-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: 4px;
    flex-wrap: wrap;
}

.admin-pac-history-card__product {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
}

.admin-pac-history-card__cancel-info {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: 6px 0 0 0;
    padding-block-start: 6px;
    border-top: 1px dashed rgba(61, 58, 54, 0.1);
}

.admin-pac-history-card__cancel-info em {
    font-style: italic;
    color: var(--color-charcoal);
}


/* =====================================================================
 * === ADMIN FINANCEIRO — Subfase 4.5c =================================
 * ===================================================================== */

/* ─── 4 cards de métrica ─────────────────────────────────────────── */

.admin-fin-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
}

@media (min-width: 720px) {
    .admin-fin-metrics {
        grid-template-columns: repeat(4, 1fr);
    }
}

.admin-fin-card {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-fin-card__label {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-charcoal-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    font-weight: 500;
}

.admin-fin-card__value {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.admin-fin-card__hint {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin: 0;
}

.admin-fin-card__hint--positive {
    color: var(--color-sage-darker);
}

.admin-fin-card__hint--negative {
    color: var(--color-terracota-darker);
}

.admin-fin-card__hint--warn {
    color: var(--color-terracota-darker);
}

/* ─── Sections (pendentes + recebidos) ───────────────────────────── */

.admin-fin-section {
    background: var(--color-offwhite);
    border: 1px solid rgba(61, 58, 54, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-block-end: var(--space-md);
}

.admin-fin-section__header {
    margin-block-end: var(--space-sm);
}

.admin-fin-section__title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.admin-fin-section__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-charcoal-soft);
    margin: 0;
}

.admin-fin-section__empty {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-charcoal-soft);
    text-align: center;
    padding: var(--space-md);
    margin: 0;
}

/* ─── Tabela responsiva (CSS grid) ───────────────────────────────── */

.admin-fin-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(61, 58, 54, 0.06);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.admin-fin-table__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-offwhite);
    align-items: center;
    font-family: var(--font-sans);
    font-size: 14px;
}

.admin-fin-table__row--head {
    background: rgba(61, 58, 54, 0.04);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-charcoal-soft);
    font-weight: 500;
}

.admin-fin-table__cell {
    min-width: 0;
}

.admin-fin-table__cell--right {
    text-align: right;
}

.admin-fin-table__cell--action {
    text-align: right;
}

.admin-fin-table__sub {
    display: block;
    font-size: 12px;
    color: var(--color-charcoal-soft);
    margin-top: 2px;
}

.admin-fin-table__due--overdue {
    color: var(--color-terracota-darker);
    font-weight: 500;
}

.admin-fin-mark-paid-form {
    margin: 0;
}

.admin-fin-mark-paid-btn {
    background: var(--color-sage-dark);
    color: var(--color-offwhite);
    border: 0;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-soft);
}

.admin-fin-mark-paid-btn:hover,
.admin-fin-mark-paid-btn:focus-visible {
    background: var(--color-sage-darker);
}

/* Mobile: tabela vira cards empilhados */
@media (max-width: 720px) {
    .admin-fin-table__row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: var(--space-md);
    }
    .admin-fin-table__row--head {
        display: none; /* esconde cabeçalho em mobile */
    }
    .admin-fin-table__cell {
        text-align: left !important;
    }
    /* Adiciona label antes do valor em mobile via attr */
    .admin-fin-table__cell[data-mobile-label]::before {
        content: attr(data-mobile-label);
        display: block;
        font-size: 11px;
        color: var(--color-charcoal-soft);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-block-end: 2px;
        font-weight: 500;
    }
    .admin-fin-table__cell--action {
        text-align: left !important;
    }
}


/* ─── 6. Reduced motion (override global) ───────────────────────────── */

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

    /* Hero: garante estado final visível imediatamente, sem depender
       da animação curtíssima acima ser executada pelo navegador. */
    .hero-postal__eyebrow,
    .hero-postal__title,
    .hero-postal__subtitle,
    .hero-postal__cta,
    .hero-postal__cta-note,
    .hero-postal__credentials {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}