/* =====================================================
   Dra. Cynthia Santana — Estética Integrada
   Protótipo institucional · CSS puro
   ===================================================== */

/* ---------- Variáveis ---------- */
:root {
    /* Marca: marrom-chocolate quente + laranja âmbar (puxado das fotos e do flyer) */
    --cor-principal:     #3B2A22;
    --cor-media:         #6B4A3A;
    --cor-clara:         #C9A48F;
    --cor-suporte:       #EAD9CC;
    --cor-escura:        #2A1D17;
    --cor-quase-preta:   #1A120E;

    --acento:            #E28A3C;
    --acento-claro:      #F2A65A;
    --acento-suave:      rgba(226, 138, 60, 0.12);

    --cor-fundo:         #FBF7F3;   /* linho: sensação de casa */
    --cor-superficie:    #F1E7DE;   /* tom de pele das fotos */
    --cor-ozonio:        #BFDCE6;   /* SÓ no elemento assinatura (O₃ e bolhas) */
    --cor-ozonio-traco:  #7FB3C8;

    --titulo:            #3B2A22;   /* cor de títulos e texto forte */
    --superficie:        #FFFFFF;   /* cartões, menu, formulário */
    --hero-mancha:       rgba(241, 231, 222, 0.9);
    --sobre-fundo:       #2A1D17;
    --sobre-texto:       #EAD9CC;
    --sobre-texto-suave: #C9B6A8;
    color-scheme: light;

    --cinza-azulado:     #EADFD6;   /* bordas suaves, badges (tom quente) */
    --cinza-claro:       #FBF6F1;   /* fundo seções alternadas (creme) */
    --branco:            #FFFFFF;
    --cinza-escuro:      #2B2320;   /* texto corrido */
    --cinza-medio:       #6F625B;   /* texto secundário */
    --cinza-suave:       #A2958E;   /* metadados, legendas */

    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --container-max: 1280px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-sm:   0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg:   0 8px 16px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 12px 24px rgba(0,0,0,0.08), 0 24px 56px rgba(0,0,0,0.14);

    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    --navbar-h: 78px;
    --header-h: var(--navbar-h);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.7;
    color: var(--cinza-escuro);
    background: var(--superficie);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

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

h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.1;
    color: var(--titulo);
}

h2 {
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    letter-spacing: -0.5px;
}

h3 { font-size: 1.45rem; }

h2 em, h1 em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--cor-media);
}

/* ---------- Utilitários ---------- */
/* Foco visível para quem navega pelo teclado */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--transition); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
    background: var(--cor-principal);
    color: var(--branco);
    border-color: var(--titulo);
}
.btn-primary:hover {
    background: var(--cor-media);
    border-color: var(--cor-media);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-dark {
    background: transparent;
    color: var(--titulo);
    border-color: var(--titulo);
}
.btn-outline-dark:hover {
    background: var(--cor-principal);
    color: var(--branco);
    transform: translateY(-2px);
}

.btn-accent {
    background: var(--acento);
    color: var(--cor-quase-preta);
    border-color: var(--acento);
}
.btn-accent:hover {
    background: var(--acento-claro);
    border-color: var(--acento-claro);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(226,138,60,0.35);
}

.btn-sm { padding: 11px 22px; font-size: 0.88rem; }
.btn-block { width: 100%; }

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Header ---------- */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: box-shadow var(--transition);
}
.header.scrolled { box-shadow: var(--shadow-md); }

.navbar {
    background: var(--superficie);
    height: var(--navbar-h);
    border-bottom: 1px solid var(--cinza-azulado);
}
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    gap: 24px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.logo__mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--cor-principal);
    flex-shrink: 0;
}
.logo__mark path { stroke: var(--acento); stroke-width: 2; fill: none; }
.logo__mark circle { fill: var(--cor-ozonio); }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__text strong {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0;
    color: var(--titulo);
}
.logo__text small {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cor-media);
    font-weight: 500;
}
.logo--light .logo__text strong { color: var(--branco); }

.nav-links { display: flex; gap: 28px; margin: 0 auto; white-space: nowrap; } /* centraliza entre o logo e o botão */
/* Instagram e tema ficam juntos, à direita */
.insta-link + .tema-toggle { margin-left: -12px; }
.logo__text { white-space: nowrap; }
.nav-links a {
    position: relative;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--titulo);
    padding: 6px 0;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--acento);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
/* Página atual */
.nav-links a[aria-current]::after { transform: scaleX(1); }
.drawer__links a[aria-current] { color: var(--acento); }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.hamburger span {
    width: 26px;
    height: 2px;
    background: var(--titulo);
    border-radius: 2px;
    transition: all var(--transition);
}

/* Drawer */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,18,14,0.55);
    backdrop-filter: blur(4px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.drawer-overlay.active { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw);
    background: var(--superficie);
    z-index: 160;
    padding: 80px 32px 32px;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.drawer.active { transform: translateX(0); }
.drawer__close {
    position: absolute;
    top: 20px; right: 24px;
    font-size: 2rem;
    line-height: 1;
    color: var(--titulo);
}
.drawer__links { display: flex; flex-direction: column; gap: 6px; }
.drawer__links a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--cinza-azulado);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--titulo);
}
.drawer__ctas { display: flex; flex-direction: column; gap: 12px; }
.drawer__ctas .btn { white-space: normal; text-align: center; }

/* ---------- Hero ----------
   Texto à esquerda, foto grande em arco ("porta de casa") à direita,
   molécula O₃ (corpo · mente · autoestima) por trás e bolhas de oxigênio. */
.hero {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - var(--header-h));
    margin-top: var(--header-h);
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse 55% 60% at 78% 45%, rgba(191,220,230,0.32), transparent 70%),
        radial-gradient(ellipse 50% 50% at 10% 90%, var(--hero-mancha), transparent 70%),
        var(--cor-fundo);
    overflow: hidden;
    padding: 48px 0 64px;
}

.hero__bolhas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    /* o oxigênio fica em volta dela e da molécula, não por cima do texto */
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 58%);
    mask-image: linear-gradient(90deg, transparent 30%, #000 58%);
}
@media (max-width: 992px) {
    .hero__bolhas {
        -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 30%, #000 62%, transparent 75%);
        mask-image: linear-gradient(180deg, transparent 12%, #000 30%, #000 62%, transparent 75%);
    }
}

.hero .container { max-width: 1400px; }
.hero__inner {
    min-width: 0; /* item flex do .hero: sem isso a caixa da foto alarga a página no celular */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
        "head visual"
        "body visual";
    grid-template-rows: 1fr auto; /* nome + texto descem juntos até a base da foto */
    column-gap: 48px;
    align-items: end;
}

.hero__head  { grid-area: head; align-self: end; padding-top: 24px; }
.hero__body  { grid-area: body; align-self: end; }
.hero__visual { grid-area: visual; align-self: end; }

/* SplitText mascara cada linha (overflow:clip): folga vertical para não cortar acento e cauda de g/p */
.hero__nome div { padding-block: 0.12em; margin-block: -0.12em; }

/* H1 = nome (grande) + área e cidade (pequena, para o Google) */
.hero__title { color: var(--titulo); font-weight: 500; margin-bottom: 30px; }
.hero__nome {
    display: block;
    font-size: clamp(3.4rem, 7vw, 7.4rem);
    line-height: 0.98;
    letter-spacing: -2px;
}
.hero__dra {
    font-style: italic;
    font-size: 0.4em;
    letter-spacing: 0;
    vertical-align: 0.95em;
    color: var(--cor-media);
}
.hero__area {
    display: block;
    max-width: 32ch;
    margin-top: 22px;
    font-family: var(--font);
    font-size: clamp(1.02rem, 1.3vw, 1.22rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--cor-media);
}

/* A frase dela continua, discreta */
.hero__frase {
    margin-bottom: 18px;
    padding-left: 14px;
    border-left: 2px solid var(--acento);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--titulo);
}

.hero__subtitle {
    max-width: 500px;
    color: var(--cinza-medio);
    font-size: 1.12rem;
    line-height: 1.65;
    margin-bottom: 36px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}
.hero__actions .btn { padding: 18px 34px; font-size: 1rem; }

.hero__link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--titulo);
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    transition: color var(--transition);
}
.hero__link:hover { color: var(--cor-media); }

/* Caixa com proporção fixa: o SVG (viewBox 500×560) e as esferas
   usam as mesmas coordenadas, em % */
.hero__visual {
    position: relative;
    width: min(100%, 680px);
    aspect-ratio: 500 / 560;
    justify-self: center;
}

.hero__photo {
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 0;
    height: 82%;
    border-radius: 999px 999px var(--radius-sm) var(--radius-sm);
    overflow: hidden;
    background: var(--cor-superficie);
    box-shadow: 0 30px 60px -30px rgba(59,42,34,0.45);
    z-index: 2;
}
.hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

.o3__ligacoes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    stroke: var(--acento);
    stroke-width: 2;
    stroke-linecap: round;
}

.o3__esferas { position: absolute; inset: 0; z-index: 1; margin: 0; }

.o3__esfera {
    position: absolute;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    translate: -50% -50%; /* propriedade separada: o GSAP anima só o transform (scale) */
    background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #E4F1F5 30%, var(--cor-ozonio) 68%, #A3CADA 100%);
    box-shadow: inset -6px -8px 18px rgba(127,179,200,0.35), 0 14px 30px -14px rgba(59,42,34,0.3);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: #3B2A22; /* fixo: a esfera é clara nos dois temas */
    line-height: 1;
}
/* Centros e raios em coordenadas do viewBox 500×560 */
.o3__esfera--mente      { left: 50%; top: 8.21%; width: 17.6%; font-size: 1.2rem; }  /* (250, 46)  r44 */
.o3__esfera--corpo      { left: 12%; top: 21.07%; width: 17.6%; font-size: 1.2rem; }  /* (60, 118)  r44 */
.o3__esfera--autoestima { left: 88%; top: 21.07%; width: 17.6%; font-size: 1rem; }    /* (440, 118) r44 */

/* ---------- Sobre ----------
   Modelo da referência: foto com moldura deslocada + selo, texto, linha com losango,
   frase e lista de credenciais. Seção escura nos dois temas. */
.about {
    padding: 112px 0;
    background: var(--sobre-fundo);
    color: var(--sobre-texto);
}
.about__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 88px;
    align-items: center;
}
.about__image {
    position: relative;
    width: min(100%, 380px);
    justify-self: center;
}
.about__photo {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 15%;
    border-radius: var(--radius-sm);
}
.about__frame {
    position: absolute;
    inset: 22px -22px -22px 22px;
    border: 1.5px solid var(--acento);
    border-radius: var(--radius-sm);
    opacity: 0.7;
}
.about__badge {
    position: absolute;
    z-index: 2;
    right: -20px;
    bottom: 36px;
    padding: 16px 22px;
    background: var(--acento);
    color: #2A1D17;
    border-radius: var(--radius-sm);
    text-align: center;
    box-shadow: 0 16px 32px -12px rgba(0,0,0,0.45);
}
.about__badge strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
}
.about__badge span { font-size: 0.82rem; font-weight: 500; }

.about__eyebrow {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--acento-claro);
    margin-bottom: 14px;
}
.about__text h2 { color: var(--branco); margin-bottom: 22px; }
.about__line { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.about__line i {
    width: 9px;
    height: 9px;
    background: var(--acento);
    transform: rotate(45deg);
}
.about__line span { width: 72px; height: 1px; background: var(--acento); }
.about__lead { font-size: 1.1rem; color: var(--sobre-texto); margin-bottom: 18px; }
.about__quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 1.3;
    color: var(--branco);
    margin-bottom: 30px;
}
.about__credentials { display: grid; gap: 18px; margin-bottom: 38px; }
.about__credentials li { display: flex; gap: 16px; align-items: flex-start; }
.about__credentials svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--acento);
}
.about__credentials strong { display: block; color: var(--branco); font-weight: 600; }
.about__credentials span { font-size: 0.93rem; color: var(--sobre-texto-suave); }

/* ---------- Tratamentos ----------
   Harmonização facial (foco da clínica) em destaque escuro; corporal ao lado;
   o resto vira lista simples. Sem cartões iguais com ícone. */
.tratamentos {
    padding: 112px 0;
    background: var(--cor-fundo);
}
.tratamentos__head { max-width: 640px; margin-bottom: 56px; }
.tratamentos__head p { margin-top: 14px; color: var(--cinza-medio); font-size: 1.08rem; }

.tratamentos__destaques {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* facial e corporal com o mesmo peso */
    gap: 24px;
    align-items: stretch;
}
.destaque {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 44px 40px;
    border-radius: var(--radius-lg);
    background: var(--superficie);
    border: 1px solid var(--cinza-azulado);
}
.cartao-link {
    position: relative;
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.destaque h3 {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-weight: 500;
    margin-bottom: 14px;
}
/* O título é o link; o ::after cobre o bloco inteiro para ele ser clicável */
.destaque__link { color: inherit; }
.destaque__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.destaque__link:focus-visible { outline: none; }
.destaque p { max-width: 46ch; color: var(--cinza-medio); }
.destaque__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    margin-top: 28px;
}
.destaque__lista li {
    padding: 12px 0;
    border-top: 1px solid var(--cinza-azulado);
    font-weight: 500;
    color: var(--titulo);
}
.destaque__ver {
    margin-top: auto;
    padding-top: 28px;
    align-self: flex-start;
    font-weight: 500;
    color: var(--titulo);
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}

/* Aproximação: no mouse (só em telas com ponteiro) e no foco do teclado */
@media (hover: hover) and (pointer: fine) {
    .cartao-link:hover {
        z-index: 1;
        transform: scale(1.03);
        border-color: var(--acento);
        box-shadow: 0 30px 60px -28px rgba(59, 42, 34, 0.4);
    }
}
.cartao-link:focus-within {
    z-index: 1;
    transform: scale(1.03);
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave), 0 30px 60px -28px rgba(59, 42, 34, 0.4);
}
@media (prefers-reduced-motion: reduce) {
    .cartao-link:hover, .cartao-link:focus-within { transform: none; }
}

.tratamentos__outros { margin-top: 72px; }
.tratamentos__outros--pagina { margin-top: 0; }
/* na página de tratamentos a seção já tem fundo branco: blocos em tom de fundo */
.tratamentos__outros--pagina li { background: var(--cor-fundo); }
.tratamentos__outros-titulo { font-size: 1.6rem; font-weight: 500; margin-bottom: 22px; }
.tratamentos__outros ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.tratamentos__outros li {
    padding: 28px 28px 30px;
    border-radius: var(--radius-md);
    background: var(--superficie);
    border: 1px solid var(--cinza-azulado);
}
.tratamentos__outros strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--titulo);
    margin-bottom: 6px;
}
.tratamentos__outros span { color: var(--cinza-medio); font-size: 0.95rem; }

/* A molécula da capa, pequena, marcando a ozonioterapia */
.mini-o3 { display: block; width: 36px; height: 28px; margin-bottom: 10px; }
.mini-o3 path { stroke: var(--acento); stroke-width: 2; fill: none; }
.mini-o3 circle { fill: var(--cor-ozonio); }

.aviso-cfbm {
    margin-top: 48px;
    max-width: 72ch;
    padding-left: 14px;
    border-left: 2px solid var(--cor-ozonio-traco);
    font-size: 0.88rem;
    color: var(--cinza-medio);
}
.tratamentos__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- Home care ---------- */
.homecare {
    padding: 96px 0;
    background: var(--cinza-claro);
}
.homecare__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}
.homecare__photos {
    position: relative;
    height: 420px;
}
.homecare__photo {
    position: absolute;
    width: 240px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 6px solid var(--superficie);
}
.homecare__photo--main { top: 0; left: 8%; z-index: 2; }
.homecare__photo--flyer { bottom: 0; right: 8%; transform: rotate(4deg); }
.homecare__text h2 { margin-bottom: 20px; }
.homecare__text p { color: var(--cinza-medio); margin-bottom: 24px; }

/* ---------- Mentoria VIP ----------
   Uma oferta só: particular, na clínica, com certificado. A foto usa o mesmo
   arco da capa (a "porta" da clínica). */
.mentoring {
    padding: 112px 0;
    background: linear-gradient(160deg, var(--cor-escura), var(--cor-principal) 60%, #6B4A3A);
    color: var(--cor-suporte);
}
.mentoring__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 80px;
    align-items: center;
}
.mentoring__visual { justify-self: center; width: min(100%, 360px); }
.mentoring__visual img {
    width: 100%;
    aspect-ratio: 190 / 259;
    object-fit: cover;
    border-radius: 999px 999px var(--radius-sm) var(--radius-sm);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.mentoring__para { color: var(--acento-claro); font-weight: 500; margin-bottom: 10px; }
.mentoring h2 {
    color: var(--branco);
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    font-weight: 500;
}
.mentoring__lead {
    max-width: 52ch;
    margin: 18px 0 36px;
    font-size: 1.1rem;
    color: var(--cor-suporte);
}
.mentoring__fatos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}
.mentoring__fatos div { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 14px; }
.mentoring__fatos dt {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--branco);
}
.mentoring__fatos dd { font-size: 0.93rem; color: #C9B6A8; }
.mentoring__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.mentoring__link {
    font-weight: 500;
    color: var(--branco);
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-underline-offset: 5px;
}

/* ---------- Contato ---------- */
.contact {
    padding: 112px 0;
    background: linear-gradient(160deg, var(--cor-escura), var(--cor-quase-preta));
    color: var(--branco);
}
.contact__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 72px;
    align-items: start;
}
.contact__info h2 { color: var(--branco); margin-bottom: 18px; }
.contact__info > p { color: var(--cor-suporte); margin-bottom: 40px; max-width: 420px; }

.contact__list { display: flex; flex-direction: column; gap: 22px; }
.contact__list li {
    display: flex;
    align-items: center;
    gap: 16px;
}
.contact__icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: rgba(226,138,60,0.12);
    border: 1px solid rgba(226,138,60,0.3);
    color: var(--acento);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.contact__icon svg { width: 20px; height: 20px; }
.contact__list small { display: block; font-size: 0.82rem; font-weight: 500; color: var(--acento-claro); }
.contact__list strong,
.contact__list a { font-size: 0.98rem; font-weight: 600; color: var(--branco); }
.contact__list a {
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-underline-offset: 4px;
}

.contact__cta { margin-top: 40px; }

/* Mapa do Google (iframe carregado só quando chega perto da tela) */
.contact__mapa { display: flex; flex-direction: column; gap: 16px; }
.contact__mapa iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.05);
}
.contact__mapa-link {
    align-self: flex-start;
    font-weight: 500;
    color: var(--branco);
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-underline-offset: 5px;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--cor-quase-preta);
    color: #A2958E;
    padding: 56px 0 32px;
    font-size: 0.88rem;
}
.footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 48px;
    align-items: start;
}
.footer__marca p { margin-top: 14px; max-width: 42ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 26px; padding-top: 10px; }
.footer__links a { color: #EAD9CC; font-weight: 500; transition: color var(--transition); }
.footer__links a:hover { color: var(--acento-claro); }
.footer__aviso,
.footer__copy { grid-column: 1 / -1; font-size: 0.8rem; }
.footer__aviso { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ---------- Página de produtos ---------- */
.produtos-hero {
    margin-top: var(--header-h);
    padding: 72px 0 40px;
    background: var(--cor-fundo);
}
.produtos-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.04;
}
.produtos-hero p { max-width: 60ch; margin-top: 18px; color: var(--cinza-medio); font-size: 1.08rem; }

.produtos { padding: 24px 0 112px; background: var(--cor-fundo); }
.produtos__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
}
.produto { display: flex; flex-direction: column; }
.produto__foto {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--cor-superficie);
    color: var(--cinza-suave);
    font-size: 0.85rem;
}
.produto__foto img { width: 100%; height: 100%; object-fit: cover; }
.produto h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 4px; }
.produto__uso { margin-bottom: 8px; font-size: 0.86rem; font-weight: 500; color: var(--cor-media); }
.produto p:not(.produto__uso) { flex: 1; color: var(--cinza-medio); font-size: 0.93rem; }
.produto__pedir {
    align-self: flex-start;
    margin-top: 14px;
    font-weight: 600;
    color: var(--titulo);
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}

/* ---------- Páginas internas (harmonização, mentoria) ----------
   Mesmo arco da capa ("a porta da clínica"); a molécula e as bolhas ficam só na home. */
.pagina-hero {
    margin-top: var(--header-h);
    padding: 56px 0 72px;
    background: var(--cor-fundo);
}
.pagina-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 64px;
    align-items: center;
}
.trilha { margin-bottom: 22px; font-size: 0.9rem; color: var(--cinza-medio); }
.trilha a { color: var(--cor-media); text-decoration: underline; text-underline-offset: 3px; }
.trilha span[aria-hidden] { margin: 0 6px; }
.pagina-hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -1px;
}
.pagina-hero__intro {
    max-width: 52ch;
    margin: 22px 0 32px;
    font-size: 1.12rem;
    color: var(--cinza-medio);
}
.pagina-hero__foto {
    justify-self: center;
    width: min(100%, 400px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px var(--radius-sm) var(--radius-sm);
    background: var(--cor-superficie);
    box-shadow: 0 30px 60px -30px rgba(59, 42, 34, 0.45);
}
.pagina-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* Atalhos dentro da página (Facial / Corporal) */
.atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.atalhos a {
    padding: 10px 20px;
    border: 1px solid var(--cinza-azulado);
    border-radius: var(--radius-pill);
    font-weight: 500;
    color: var(--titulo);
    background: var(--superficie);
}

.pagina-secao { padding: 96px 0; background: var(--superficie); }
.pagina-secao--fundo { background: var(--cor-fundo); }
.pagina-secao__head { max-width: 640px; margin-bottom: 44px; }
.pagina-secao__head h2 { font-weight: 500; }
.pagina-secao__head--espaco { margin-top: 56px; }
.pagina-secao__head p { margin-top: 14px; font-size: 1.06rem; color: var(--cinza-medio); }

/* Procedimentos: nome à esquerda, explicação à direita, separados por linha fina */
.procedimentos { border-top: 1px solid var(--cinza-azulado); }
.procedimentos > div {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 32px;
    padding: 26px 0;
    border-bottom: 1px solid var(--cinza-azulado);
}
.procedimentos dt {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--titulo);
}
.procedimentos dd { max-width: 58ch; color: var(--cinza-medio); }
.procedimentos__cta { margin-top: 32px; }

/* Bloco escuro de chamada (corporal, investimento da mentoria) */
.painel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 32px 56px;
    align-items: center;
    padding: 48px;
    border-radius: var(--radius-lg);
    background: var(--sobre-fundo);
    color: var(--sobre-texto);
}
.painel h2, .painel h3 { color: var(--branco); font-weight: 500; }
.painel p { max-width: 56ch; margin-top: 12px; }
[data-theme="dark"] .painel { background: #2E2019; border: 1px solid rgba(226, 138, 60, 0.35); }

/* Passos: aqui a numeração é uma sequência de verdade */
.passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    counter-reset: passo;
    list-style: none;
}
.passos li { counter-increment: passo; border-top: 1px solid var(--cinza-azulado); padding-top: 18px; }
.passos li::before {
    content: counter(passo);
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-serif);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--acento);
}
.passos strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--titulo);
}
.passos span { color: var(--cinza-medio); font-size: 0.95rem; }

/* Lista simples com marcador do acento */
.lista-acento { display: grid; gap: 12px; max-width: 60ch; }
.lista-acento li { position: relative; padding-left: 22px; color: var(--cinza-escuro); }
.lista-acento li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acento);
}

.mentoring__fatos--claro div { border-top-color: var(--cinza-azulado); }
.mentoring__fatos--claro dt { color: var(--titulo); }
.mentoring__fatos--claro dd { color: var(--cinza-medio); }

.cta-final { padding: 96px 0; text-align: center; background: var(--cor-fundo); }
.cta-final--claro { background: var(--superficie); }
.cta-final h2 { font-weight: 500; margin-bottom: 14px; }
.cta-final p { max-width: 52ch; margin: 0 auto 30px; color: var(--cinza-medio); }

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 14px 16px;
    border-radius: var(--radius-pill);
    background: #25D366;
    color: var(--branco);
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(37,211,102,0.4);
    transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float svg { width: 24px; height: 24px; }
.whatsapp-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(37,211,102,0.5);
}

/* ---------- Modo escuro ---------- */
:root[data-theme="dark"] {
    --cor-fundo:         #17100C;
    --cor-superficie:    #2A1D17;
    --superficie:        #221813;
    --titulo:            #F6EDE6;
    --cinza-escuro:      #EDE3DC;
    --cinza-medio:       #B9ADA5;
    --cinza-suave:       #8F837C;
    --cinza-azulado:     #3F2F27;
    --cinza-claro:       #1E1511;
    --cor-media:         #D9B9A3;
    --acento-suave:      rgba(226, 138, 60, 0.18);
    --hero-mancha:       rgba(58, 40, 31, 0.8);
    --sobre-fundo:       #221813;
    color-scheme: dark;
}
[data-theme="dark"] .btn-primary { background: var(--acento); border-color: var(--acento); color: #2A1D17; }
[data-theme="dark"] .btn-primary:hover { background: var(--acento-claro); border-color: var(--acento-claro); }
[data-theme="dark"] .btn-outline-dark:hover { background: var(--titulo); color: #2A1D17; }
[data-theme="dark"] .cartao-link:hover { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8); }
[data-theme="dark"] .cartao-link:focus-within { box-shadow: 0 0 0 3px var(--acento-suave), 0 30px 60px -28px rgba(0, 0, 0, 0.8); }
[data-theme="dark"] .hero__photo { box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }

/* Botões redondos do cabeçalho: Instagram e tema */
.insta-link,
.tema-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--titulo);
    border: 1px solid var(--cinza-azulado);
    flex-shrink: 0;
    transition: background var(--transition);
}
.tema-toggle:hover,
.insta-link:hover { background: var(--acento-suave); }
.tema-toggle svg,
.insta-link svg { width: 20px; height: 20px; }

/* Instagram: o ícone dá uma tremida curta a cada 5 segundos para chamar atenção */
.insta-link svg { animation: tremer 5s ease-in-out infinite; }
.insta-link:hover svg,
.insta-link:focus-visible svg { animation-play-state: paused; }
@keyframes tremer {
    0%, 84%, 100% { transform: rotate(0); }
    86% { transform: rotate(-14deg); }
    88% { transform: rotate(12deg); }
    90% { transform: rotate(-10deg); }
    92% { transform: rotate(8deg); }
    94% { transform: rotate(-4deg); }
    96% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .insta-link svg { animation: none; }
}
.tema-toggle__sol { display: none; }
[data-theme="dark"] .tema-toggle__lua { display: none; }
[data-theme="dark"] .tema-toggle__sol { display: block; }

/* ---------- Responsivo ---------- */
/* Menu completo (com Instagram e tema) precisa de ~1100px; abaixo disso vira menu sanfona */
@media (max-width: 1100px) {
    .nav-links, .navbar__cta { display: none; }
    .hamburger { display: flex; }
    .insta-link { margin-left: auto; }
    .insta-link + .tema-toggle { margin-left: 0; }
    .navbar__inner { gap: 12px; }
}

@media (max-width: 1200px) {
    .hero__inner { gap: 40px; }
    .produtos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 992px) {

    .hero { padding: 32px 0 0; min-height: 0; }
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "visual" "body";
        grid-template-rows: auto;
        row-gap: 28px;
    }
    .hero__head { padding-top: 0; }
    .hero__title { margin-bottom: 0; }
    .hero__visual { width: min(100%, 460px); }
    .hero__body { padding-bottom: 56px; }

    .about__inner { grid-template-columns: minmax(0, 1fr); gap: 64px; }
    .about__image { width: min(calc(100% - 22px), 380px); justify-self: start; }
    .homecare__inner, .contact__inner { grid-template-columns: 1fr; gap: 48px; }
    .tratamentos__destaques { grid-template-columns: minmax(0, 1fr); }
    .tratamentos__outros ul { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .mentoring__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .mentoring__visual { justify-self: start; width: min(100%, 300px); }
    .produtos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__inner { grid-template-columns: minmax(0, 1fr); }
    .pagina-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .pagina-hero__foto { justify-self: start; width: min(100%, 320px); }
    .procedimentos > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .painel { grid-template-columns: minmax(0, 1fr); }
    .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    h2 { letter-spacing: -0.8px; }

    .hero__title { letter-spacing: -1px; }
    .hero__actions .btn { width: 100%; }
    .o3__esfera--mente { font-size: 1.05rem; }
    .o3__esfera--corpo { font-size: 0.95rem; }
    .o3__esfera--autoestima { font-size: 0.78rem; }
    .tratamentos, .mentoring { padding: 80px 0; }
    .destaque { padding: 32px 24px; }
    .destaque__lista { grid-template-columns: minmax(0, 1fr); }
    .mentoring__fatos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .homecare__photos { height: 380px; }
    .homecare__photo { width: 200px; }
    .homecare__photo--main { left: 0; }
    .homecare__photo--flyer { right: 0; }

    .about { padding: 80px 0; }
    .about__badge { right: -12px; }
    .about__quote { font-size: 1.45rem; }

    .contact__mapa iframe { aspect-ratio: 1 / 1; }
    .produtos__grid { gap: 32px 16px; }
    .pagina-hero { padding: 40px 0 56px; }
    .pagina-secao, .cta-final { padding: 72px 0; }
    .painel { padding: 32px 24px; }
    .passos { grid-template-columns: minmax(0, 1fr); }
    .whatsapp-float span { display: none; }
    .whatsapp-float { padding: 14px; }
}

@media (max-width: 480px) {
    .navbar__inner { gap: 8px; }
    .logo { gap: 10px; }
    .logo__mark { width: 38px; height: 38px; }
    .logo__text strong { font-size: 1.12rem; }
    .logo__text small { font-size: 0.6rem; letter-spacing: 1.5px; }
    .insta-link, .tema-toggle { width: 38px; height: 38px; }
    .homecare__photos { height: 300px; }
    .homecare__photo { width: 160px; }
    .btn { white-space: normal; text-align: center; }
}

@media (max-width: 380px) {
    .navbar__inner { gap: 6px; }
    .logo { gap: 8px; }
    .logo__text strong { font-size: 1.02rem; }
    .logo__text small { font-size: 0.56rem; letter-spacing: 1.2px; }
}

@media (max-width: 340px) {
    /* celulares muito estreitos: só o símbolo (o nome já está grande na capa; o link tem aria-label) */
    .navbar .logo__text { display: none; }
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}