/**
 * Palma Hair Solutions - Estilos do tema (v2)
 * Direção visual: off-white, tipografia editorial (Newsreader + Jost), linhas finas.
 */

/* =========================================
   Fontes (arquivos em /fonts, licença SIL OFL)
   ========================================= */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost-latin-400-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jost-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/jost-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations'),
         url('../fonts/newsreader-latin-opsz-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/newsreader-latin-opsz-italic.woff2') format('woff2-variations'),
         url('../fonts/newsreader-latin-opsz-italic.woff2') format('woff2');
}

/* =========================================
   Base
   ========================================= */
:root {
    --papel: #FCFCFA;
    --off: #F7F6F3;
    --nevoa: #ECEAE5;
    --pedra: #6B6760;
    --tabaco: #7A5C3E;
    --carvao: #262422;
    --tinta: #1D1B18;
    --texto: #47443F;
    --linha: #E0DDD6;
    --campo: #CFCBC3;
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    --gutter: 96px;
    --sec: 160px;
    --hdr: 88px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--off);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

figure {
    margin: 0;
}

a {
    color: var(--tinta);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--tabaco);
}

:focus-visible {
    outline: 2px solid var(--tabaco);
    outline-offset: 3px;
}

main {
    display: block;
}

section[id],
[id='conteudo'] {
    scroll-margin-top: var(--hdr);
}

[hidden] {
    display: none !important;
}

/* Texto só para leitores de tela (também usado pelo WordPress) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed !important;
    top: 12px;
    left: 12px;
    z-index: 1000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 18px;
    clip: auto;
    background: var(--tinta);
    color: var(--papel);
    font-size: 15px;
    white-space: normal;
}

/* =========================================
   Estrutura
   ========================================= */
.wrap {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
}

.section {
    padding-top: var(--sec);
    padding-bottom: var(--sec);
    background: var(--off);
}

.section--line {
    border-top: 1px solid var(--linha);
}

/* =========================================
   Tipografia
   ========================================= */
.eyebrow {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--tabaco);
}

.h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
}

.lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--texto);
}

.body {
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: var(--texto);
}

.note {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pedra);
}

.caption {
    font-size: 12px;
    line-height: 1.5;
    color: var(--pedra);
}

/* =========================================
   Botão (um só estilo no site inteiro)
   ========================================= */
.btn {
    display: inline-block;
    border: 0;
    border-radius: 0;
    background: var(--tinta);
    color: var(--papel);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    padding: 19px 38px;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
    background: var(--tabaco);
    color: var(--papel);
}

/* =========================================
   Cabeçalho
   ========================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
}

.admin-bar .site-header {
    top: 32px;
}

.site-header-inner {
    max-width: none;
    height: var(--hdr);
    margin: 0 auto;
    padding: 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-logo {
    display: block;
    flex: none;
}

.site-logo img {
    width: 190px;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.site-nav a {
    padding: 12px 0;
    font-size: 15px;
    line-height: 1.2;
    color: var(--tinta);
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
    color: var(--tabaco);
}

.site-nav .nav-cta {
    padding: 11px 20px;
    border: 1px solid var(--tinta);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav .nav-cta:hover {
    background: var(--tinta);
    color: var(--papel);
}

.header-actions {
    display: none;
    align-items: center;
    gap: 4px;
}

.header-cta {
    padding: 12px 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--tinta);
    text-decoration: none;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 1.2px;
    background: var(--tinta);
    transition: transform 0.3s ease;
}

.menu-toggle[aria-expanded='true'] span:first-child {
    transform: translateY(5.6px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] span:last-child {
    transform: translateY(-5.6px) rotate(-45deg);
}

.menu-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--hdr));
    overflow-y: auto;
    padding: 8px 24px 32px;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    display: flex;
    flex-direction: column;
}

.menu-mobile a:not(.btn) {
    display: block;
    padding: 16px 0;
    border-top: 1px solid var(--linha);
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--tinta);
    text-decoration: none;
}

.menu-mobile a:not(.btn):first-child {
    border-top: 0;
}

.menu-mobile a[aria-current='page'] {
    color: var(--tabaco);
}

.menu-mobile .btn {
    margin-top: 24px;
    padding: 18px 0;
}

/* =========================================
   Topo com vídeo
   ========================================= */
.hero {
    position: relative;
    height: calc(100vh - var(--hdr));
    height: calc(100svh - var(--hdr));
    min-height: 560px;
    overflow: hidden;
    background: #CFCBC3;
    color: var(--tinta);
}

.hero-media,
.hero-clip,
.hero-veil {
    position: absolute;
    inset: 0;
}

.hero-clip {
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}

.hero-clip.is-active {
    opacity: 1;
}

.hero-clip picture,
.hero-clip img,
.hero-clip video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.hero-veil {
    background: rgba(247, 246, 243, 0.45);
}

/*
 * Proporção áurea: a parte de cima ocupa 61,8% da altura e o título fica
 * centrado nessa linha (margem negativa de meia altura). Os rostos dos vídeos
 * ficam acima dela. Em telas baixas, a parte de cima encolhe para caber o botão.
 */
.hero {
    --hl-fs: clamp(44px, 7.2vw, 88px);
    --hl-lh: 1;
    --hl-linhas: 1;
    --hl-gap-cta: 42px;
}

.hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    text-align: center;
    text-shadow: none;
}

.hero-upper {
    flex: 0 1 61.8%;
    min-height: 0;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.hero-lower {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--hl-fs) * var(--hl-lh) * var(--hl-linhas) / 2 + var(--hl-gap-cta));
    padding-bottom: 104px;
}

.hero-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
}

.hero-name {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.hero-rule {
    display: block;
    width: 200px;
    height: 1px;
    margin: 14px 0;
    background: var(--tinta);
    opacity: 0.6;
}

.hero-sub {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 19px;
    line-height: 1.3;
}

.hero-headline {
    margin-top: 40px;
    margin-bottom: calc(var(--hl-fs) * var(--hl-lh) * var(--hl-linhas) / -2);
    font-family: var(--serif);
    font-weight: 300;
    font-size: var(--hl-fs);
    line-height: var(--hl-lh);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.hero-br {
    display: none;
}

.hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 32px;
    margin-top: 28px;
}

.hero-links a {
    font-size: 15px;
    line-height: 1.4;
    color: var(--tinta);
    text-underline-offset: 5px;
}

.hero-links a:hover {
    color: var(--tabaco);
}

.hero-bar {
    position: absolute;
    left: 64px;
    right: 64px;
    bottom: 40px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    visibility: hidden;
}

.js .hero-bar {
    visibility: visible;
}

.hero-marks {
    display: flex;
    gap: 10px;
}

.hero-marks span {
    width: 36px;
    height: 2px;
    background: rgba(29, 27, 24, 0.25);
    transition: background-color 0.6s ease;
}

.hero-marks span.is-active {
    background: var(--tinta);
}

.hero-pause {
    min-height: 44px;
    padding: 12px 0 12px 12px;
    border: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--tinta);
    text-shadow: none;
    text-decoration: underline;
    text-underline-offset: 5px;
    cursor: pointer;
}

/* =========================================
   A médica
   ========================================= */
.medica .grid {
    align-items: center;
}

.medica-foto {
    grid-column: 1 / span 5;
}

.medica-foto img {
    width: 100%;
    height: 660px;
    object-fit: cover;
    object-position: 50% 0;
}

.medica-texto {
    grid-column: 7 / span 6;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.medica-texto .lead {
    max-width: 540px;
}

.medica-assinatura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--pedra);
}

/* =========================================
   Cabeçalho de seção (rótulo + título, texto à direita)
   ========================================= */
.sec-head {
    align-items: end;
}

.sec-head-title {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* =========================================
   A jornada
   ========================================= */
.jornada-wrap {
    display: flex;
    flex-direction: column;
    gap: 140px;
}

.etapa {
    align-items: start;
}

.etapa-texto {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.etapa-label {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: var(--tinta);
}

.etapa-num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    color: var(--tabaco);
}

.etapa-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.etapa-foto img {
    width: 100%;
    height: 533px;
    object-fit: cover;
    border-radius: 22px;
}

.etapa-foto--alta img {
    height: 711px;
}

.etapa-video {
    height: 711px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--nevoa);
}

.etapa-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--nevoa);
}

.etapa-1 .etapa-media { grid-column: 1 / span 4; }
.etapa-1 .etapa-texto { grid-column: 7 / span 5; }
.etapa-2 .etapa-texto { grid-column: 2 / span 5; grid-row: 1; }
.etapa-2 .etapa-media { grid-column: 8 / span 4; grid-row: 1; }
.etapa-3 .etapa-media { grid-column: 1 / span 4; }
.etapa-3 .etapa-texto { grid-column: 7 / span 5; }

.etapa-4 .etapa-texto {
    grid-column: 2 / span 7;
    padding-top: 48px;
    border-top: 1px solid var(--linha);
}

.etapa-link {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 17px;
    text-underline-offset: 6px;
}

/* =========================================
   O que está incluído
   ========================================= */
.section.incluido {
    background: var(--carvao);
    color: var(--off);
}

.incluido-intro {
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.incluido .lead {
    color: #B5B0A8;
}

.incluido-frase {
    margin: 24px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #E8DFD0;
}

.incluido-lista {
    grid-column: 7 / span 6;
    align-self: start;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.incluido-lista li {
    padding: 22px 0;
    border-top: 1px solid #3F3B37;
    font-size: 17px;
    line-height: 1.5;
}

.incluido-lista li:last-child {
    border-bottom: 1px solid #3F3B37;
}

/* =========================================
   Resultados
   ========================================= */
.resultados-wrap {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.resultados-intro {
    grid-column: 8 / span 5;
}

.pacientes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.paciente {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.paciente-fotos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.paciente-foto {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paciente-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--nevoa);
}

.paciente-foto figcaption {
    font-size: 13px;
    line-height: 1.3;
    color: var(--pedra);
}

.paciente-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Um paciente só: fotos à esquerda, dados e texto educativo à direita */
.pacientes--um {
    display: block;
}

.pacientes--um .paciente {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
}

.pacientes--um .paciente-fotos {
    grid-column: 1 / span 7;
    gap: 16px;
}

.pacientes--um .paciente-info {
    grid-column: 9 / span 4;
    padding-bottom: 23px;
}

.resultados-educativo p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--texto);
}

.resultados-educativo p + p {
    margin-top: 12px;
}

.resultados-educativo .resultados-reservado {
    padding: 16px 18px;
    border: 1px dashed var(--campo);
    font-size: 14px;
    line-height: 1.6;
    color: var(--pedra);
}

.paciente-nome {
    margin: 0;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
}

.paciente-dados {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--texto);
}

/* =========================================
   Tratamentos
   ========================================= */
.tratamentos-intro {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tratamentos-col {
    grid-column: 6 / span 7;
}

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

.tratamento {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
    padding: 28px 0;
    border-top: 1px solid var(--linha);
}

.tratamento:last-child {
    border-bottom: 1px solid var(--linha);
}

.tratamento-cat {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--tabaco);
}

.tratamento-nome {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
}

.tratamento-desc {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--texto);
}

.tratamentos-ref {
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pedra);
}

.tratamentos-ref a {
    color: var(--pedra);
}

/* =========================================
   A clínica
   ========================================= */
.clinica .grid {
    align-items: center;
}

.clinica-fotos {
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.clinica-fotos img {
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.clinica-fotos img:nth-child(2) {
    margin-top: 80px;
}

.clinica-texto {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.clinica-frase {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.35;
}

.clinica-tabela {
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
}

.clinica-tabela div {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid var(--linha);
    font-size: 17px;
    line-height: 1.5;
}

.clinica-tabela div:last-child {
    border-bottom: 1px solid var(--linha);
}

.clinica-tabela dt {
    font-weight: 400;
}

.clinica-tabela dd {
    margin: 0;
    color: var(--texto);
}

/* =========================================
   Dúvidas
   ========================================= */
.duvidas-intro {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.faq-more {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.5;
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    cursor: pointer;
}

.faq-more:hover {
    color: var(--tabaco);
}

.faq-col {
    grid-column: 6 / span 7;
}

.faq-list {
    border-bottom: 1px solid var(--linha);
}

.js .faq-list:not(.is-expanded) .faq-item.is-extra {
    display: none;
}

.no-js .faq-more,
html:not(.js) .faq-more {
    display: none;
}

.faq-item {
    padding: 28px 0;
    border-top: 1px solid var(--linha);
}

.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-q {
    margin: 0;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
}

.faq-item > summary:hover .faq-q {
    color: var(--tabaco);
}

.faq-icon {
    flex: none;
    color: var(--tinta);
}

.faq-item[open] .faq-icon-v {
    display: none;
}

.faq-a {
    max-width: 620px;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--texto);
}

.faq-a a {
    color: var(--texto);
}

.faq-a p {
    margin: 0;
}

.faq-a p + p,
.faq-mais[open] {
    margin-top: 12px;
}

.faq-mais {
    margin-top: 10px;
}

.faq-mais > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

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

.faq-mais > summary:hover {
    color: var(--tabaco);
}

.faq-mais[open] > summary {
    display: none;
}

.faq-refs {
    margin-top: 32px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pedra);
}

.faq-refs summary {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.faq-refs summary::-webkit-details-marker {
    display: none;
}

.faq-refs ul {
    margin: 16px 0 0;
    padding-left: 20px;
}

.faq-refs li + li {
    margin-top: 8px;
}

.faq-refs a {
    color: var(--pedra);
    word-break: break-word;
}

.faq-responsavel {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pedra);
}

/* =========================================
   Contato
   ========================================= */
.section.contato {
    background: var(--nevoa);
}

.contato-intro {
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contato-col {
    grid-column: 7 / span 6;
}

.contato-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo label {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tinta);
}

.campo input,
.campo textarea {
    width: 100%;
    margin: 0;
    border: 1px solid var(--campo);
    border-radius: 0;
    background: var(--papel);
    font-family: var(--sans);
    font-size: 17px;
    color: var(--tinta);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

.campo input {
    height: 54px;
    padding: 0 16px;
}

.campo textarea {
    min-height: 140px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

.campo-nota {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pedra);
}

.campo-nota a {
    color: var(--pedra);
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--tabaco);
}

.contato-form .btn {
    align-self: flex-start;
    margin-top: 12px;
    padding: 19px 36px;
}

.form-success {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 28px;
    border-top: 1px solid var(--campo);
}

.form-success-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2;
}

/* =========================================
   Rodapé
   ========================================= */
.site-footer {
    background: var(--nevoa);
    border-top: 1px solid #D6D2CA;
}

.site-footer-inner {
    max-width: 1440px;
    min-height: 100px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 32px;
    align-items: center;
    font-size: 18px;
    line-height: 1.4;
    color: var(--pedra);
}

.footer-id {
    margin: 0;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.footer-social a,
.footer-map {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    color: var(--texto);
    text-decoration: none;
}

.footer-social a:hover,
.footer-map:hover {
    color: var(--tabaco);
}

.footer-address {
    justify-self: end;
    font-style: normal;
}

.footer-legal {
    max-width: 1440px;
    margin: -16px auto 0;
    padding: 0 var(--gutter) 24px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: var(--pedra);
}

.footer-legal a {
    color: var(--pedra);
}

/* =========================================
   Topo das páginas internas (texto + vídeo vertical)
   ========================================= */
.topo {
    padding-top: 120px;
    padding-bottom: 120px;
    background: var(--off);
}

.topo .grid {
    align-items: center;
}

.topo-texto {
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.topo-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 64px;
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.topo-texto .lead {
    max-width: 520px;
}

.topo-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 12px;
}

.topo-id {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pedra);
}

.topo-media {
    grid-column: 7 / span 6;
    height: 680px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--nevoa);
}

.topo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Enquadramento de cada vídeo: olhos na linha do terço superior */
.topo-video--homem { object-position: 50% 44%; }
.topo-video--casal { object-position: 50% 26%; }
.topo-video--cachos { object-position: 50% 34%; }

/* A médica (página própria) */
.apresentacao {
    padding-top: 120px;
    padding-bottom: 140px;
}

.apresentacao .grid {
    align-items: center;
}

.apresentacao-foto {
    grid-column: 1 / span 5;
}

.apresentacao-foto img {
    width: 100%;
    height: 720px;
    object-fit: cover;
    object-position: 50% 0;
}

.apresentacao-texto {
    grid-column: 7 / span 6;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.apresentacao-texto .lead {
    max-width: 560px;
}

.apresentacao-sub {
    margin: -8px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.3;
}

/* A médica, versão curta (página Saúde capilar) */
.medica--curta .medica-foto {
    grid-column: 1 / span 4;
}

.medica--curta .medica-foto img {
    height: 520px;
}

.medica--curta .medica-texto {
    grid-column: 6 / span 6;
    gap: 24px;
}

.medica-link {
    font-size: 17px;
    color: var(--tinta);
    text-underline-offset: 6px;
}

/* =========================================
   Dois caminhos (página inicial)
   ========================================= */
.caminhos .grid {
    row-gap: 72px;
}

.caminho {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.caminho-foto {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: 50% 33.333%;
}

.caminho-rotulo {
    margin: 8px 0 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tabaco);
}

.caminho .lead {
    max-width: 560px;
}

.caminho-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 4px;
}

.caminho-links a,
.tecnicas-link,
.artigos-todos,
.faixa-link,
.post-destaque-link {
    font-size: 17px;
    text-underline-offset: 6px;
}

/* =========================================
   As duas técnicas
   ========================================= */
.tecnicas-intro {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tecnicas-col {
    grid-column: 6 / span 7;
    display: flex;
    flex-direction: column;
}

.tecnicas-linha {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
    padding: 24px 0;
    border-top: 1px solid var(--linha);
    font-size: 17px;
    line-height: 1.55;
}

.tecnicas-cabeca {
    padding: 0 0 16px;
    border-top: 0;
    font-size: 14px;
    color: var(--pedra);
}

.tecnicas-rotulo {
    font-weight: 500;
    color: var(--tabaco);
}

.tecnicas-valor {
    color: var(--texto);
}

.tecnicas-linha .tecnicas-valor.is-atual {
    color: var(--tinta);
}

.tecnicas-cabeca .tecnicas-valor {
    color: var(--pedra);
}

.tecnicas-cabeca .tecnicas-valor.is-atual {
    font-weight: 500;
    color: var(--tinta);
}

.tecnicas-linha--indicacao {
    grid-template-columns: 170px minmax(0, 1fr);
    border-bottom: 1px solid var(--linha);
}

.tecnicas-link {
    align-self: flex-start;
    margin-top: 28px;
}

/* =========================================
   Lado a lado (FUE No-Shave)
   ========================================= */
.comparativo-wrap {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.comparativo-intro {
    grid-column: 8 / span 5;
}

.comparativo-item {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.comparativo-item:first-child {
    grid-column: 1 / span 5;
}

.comparativo-item:last-child {
    grid-column: 7 / span 5;
}

.comparativo-cabeca {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linha);
}

.comparativo-item--destaque .comparativo-cabeca {
    border-bottom-color: var(--tinta);
}

.comparativo-nome {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.2;
}

.comparativo-dia {
    font-size: 14px;
    color: var(--pedra);
}

.comparativo-item img {
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.comparativo-item figcaption {
    font-size: 17px;
    line-height: 1.7;
    color: var(--texto);
}

/* Jornada clínica: etapas III e IV lado a lado */
.etapas-duplas {
    align-items: start;
}

.etapa-dupla {
    padding-top: 48px;
    border-top: 1px solid var(--linha);
}

.etapa-dupla:first-child {
    grid-column: 2 / span 5;
}

.etapa-dupla:last-child {
    grid-column: 7 / span 5;
}

/* =========================================
   Conteúdos: cartões, listagem e destaque
   ========================================= */
.artigos-wrap {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.artigos-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.faixa-tema + .artigos {
    border-top: 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 72px 32px;
}

.post-card-link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.post-card-image {
    height: 240px;
    overflow: hidden;
    background: var(--nevoa);
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-category {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--tabaco);
}

.post-card-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.post-card-link:hover .post-card-title {
    color: var(--tabaco);
}

.post-card-meta {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pedra);
}

.conteudos-head {
    padding-top: 120px;
    padding-bottom: 80px;
}

.conteudos-intro {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.conteudos-intro .lead {
    max-width: 560px;
}

.conteudos-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    padding: 22px 0;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    font-size: 16px;
    line-height: 1.4;
}

.conteudos-filtro a {
    color: var(--texto);
    text-decoration: none;
}

.conteudos-filtro a:hover {
    color: var(--tabaco);
}

.conteudos-filtro a[aria-current='page'] {
    font-weight: 500;
    color: var(--tinta);
    text-decoration: underline;
    text-underline-offset: 8px;
}

.conteudos-lista {
    padding-top: 72px;
    padding-bottom: 140px;
}

.post-destaque {
    align-items: center;
}

.post-destaque + .posts-grid {
    margin-top: 112px;
}

.post-destaque-image {
    grid-column: 1 / span 6;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--nevoa);
}

.post-destaque-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-destaque-texto {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.post-destaque-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    text-wrap: balance;
}

.post-destaque-title a {
    color: inherit;
    text-decoration: none;
}

.post-destaque-title a:hover {
    color: var(--tabaco);
}

.post-destaque-link {
    align-self: flex-start;
    margin-top: 8px;
}

.conteudos-paginas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 32px;
    margin-top: 72px;
    padding-top: 28px;
    border-top: 1px solid var(--linha);
    font-size: 16px;
    color: var(--pedra);
}

.conteudos-paginas-links {
    display: flex;
    gap: 32px;
}

.conteudos-paginas a {
    font-size: 17px;
    color: var(--tinta);
    text-underline-offset: 6px;
}

.archive-empty {
    margin: 0;
    color: var(--texto);
}

/* =========================================
   Artigo e páginas de texto
   ========================================= */
.artigo-head {
    padding-top: 112px;
    padding-bottom: 72px;
}

.artigo-head-texto {
    grid-column: 3 / span 8;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.artigo-trilha {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--tabaco);
}

.artigo-trilha a {
    color: var(--tabaco);
    text-decoration: none;
}

.artigo-trilha a:hover {
    text-decoration: underline;
}

.artigo-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.artigo-subtitle {
    display: block;
    margin-top: 10px;
    font-style: italic;
    font-size: 36px;
    line-height: 1.2;
    color: var(--tabaco);
}

.artigo-resumo {
    margin: 0;
    max-width: 640px;
    font-size: 20px;
    line-height: 1.65;
    color: var(--texto);
}

.artigo-meta {
    margin: 4px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--linha);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pedra);
}

.artigo-autora {
    font-size: 15px;
    font-weight: 500;
    color: var(--tinta);
}

.artigo-capa img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    object-position: 50% 55%;
}

.artigo-capa figcaption {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pedra);
}

.artigo-corpo {
    padding-top: 96px;
    padding-bottom: 120px;
}

.artigo-texto {
    grid-column: 3 / span 6;
}

.pagina .artigo-corpo {
    padding-top: 0;
}

.pagina .artigo-texto {
    grid-column: 3 / span 7;
}

.artigo-responsavel {
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pedra);
}

.entry-content {
    font-size: 18px;
    line-height: 1.8;
    color: var(--texto);
}

.entry-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

.entry-content > * + * {
    margin-top: 24px;
}

.entry-content [id] {
    scroll-margin-top: calc(var(--hdr) + 24px);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--tinta);
}

.entry-content > h2 {
    margin-top: 48px;
    font-size: 34px;
    line-height: 1.15;
}

.entry-content > h3 {
    margin-top: 40px;
    font-size: 26px;
    line-height: 1.2;
}

.entry-content > h4 {
    margin-top: 32px;
    font-size: 21px;
    line-height: 1.3;
}

.entry-content > :first-child {
    margin-top: 0;
}

.entry-content a {
    color: var(--tinta);
}

.entry-content strong {
    font-weight: 600;
    color: var(--tinta);
}

.entry-content sup,
.artigo-resumo sup {
    font-size: 12px;
    line-height: 0;
}

.entry-content sup a,
.artigo-resumo sup a {
    padding: 0 1px;
    color: var(--tabaco);
    text-decoration: none;
}

.entry-content ul,
.entry-content ol {
    padding-left: 22px;
}

.entry-content li + li {
    margin-top: 12px;
}

.entry-content li::marker {
    color: var(--tabaco);
}

.entry-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 24px;
    border-left: 1px solid var(--tabaco);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.45;
    color: var(--tinta);
}

.entry-content img {
    height: auto;
}

.entry-content figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pedra);
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.entry-content .wp-block-table {
    overflow-x: auto;
}

.entry-content th,
.entry-content td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--linha);
    text-align: left;
    vertical-align: top;
}

.entry-content th {
    font-weight: 500;
    color: var(--tinta);
}

.entry-content .wp-block-table thead {
    border-bottom: 1px solid var(--tinta);
}

.entry-content hr {
    border: 0;
    border-top: 1px solid var(--linha);
}

/* Referências do artigo (bloco HTML com a classe "referencias") */
.entry-content .referencias {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--linha);
}

.entry-content .referencias-titulo {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--tinta);
}

.entry-content .referencias ol {
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.6;
}

.entry-content .referencias li + li {
    margin-top: 10px;
}

.entry-content .referencias li::marker {
    color: var(--texto);
}

.entry-content .referencias a {
    color: var(--texto);
    word-break: break-word;
}

.entry-content .referencias li:target {
    background: rgba(122, 92, 62, 0.08);
}

/* Sobre a autora */
.autora {
    padding-bottom: 140px;
}

.autora-box {
    grid-column: 3 / span 8;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    column-gap: 40px;
    align-items: center;
    padding: 40px 0;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}

.autora-box img {
    width: 168px;
    height: 210px;
    object-fit: cover;
}

.autora-texto {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.autora-rotulo {
    font-size: 14px;
    font-weight: 500;
    color: var(--tabaco);
}

.autora-nome {
    margin: 0;
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1.15;
}

.autora-sub {
    margin: -4px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 19px;
    line-height: 1.3;
}

.autora-bio {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--texto);
}

.autora-assinatura {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    font-size: 14px;
    color: var(--pedra);
}

.autora-assinatura a {
    font-size: 16px;
    color: var(--tinta);
    text-underline-offset: 5px;
}

/* Faixa que leva à página do tema */
.section.faixa-tema {
    padding-top: 120px;
    padding-bottom: 120px;
    background: var(--nevoa);
}

.faixa-tema .grid {
    align-items: center;
}

.faixa-foto {
    grid-column: 1 / span 5;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: 50% 33.333%;
}

.faixa-texto {
    grid-column: 7 / span 5;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faixa-texto .caminho-rotulo {
    margin: 0;
}

.faixa-link {
    align-self: flex-start;
    margin-top: 4px;
}

/* Telas deitadas e baixas (notebooks): título um pouco menor para manter a linha áurea */
@media (min-width: 768px) and (max-height: 820px) {
    .hero {
        --hl-fs: clamp(44px, min(7.2vw, 8.4vh), 88px);
        --hl-gap-cta: 30px;
    }

    .hero-headline {
        margin-top: 32px;
    }

    .hero-links {
        margin-top: 20px;
    }

    .hero-lower {
        padding-bottom: 96px;
    }
}

/* =========================================
   Telas médias (tablet e notebook pequeno)
   ========================================= */
@media (max-width: 1279px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 4px;
        padding-top: 32px;
        padding-bottom: 32px;
        text-align: center;
    }

    .footer-address {
        justify-self: center;
    }
}

@media (max-width: 1199px) {
    :root {
        --hdr: 64px;
    }

    .site-header-inner {
        padding: 0 12px 0 24px;
    }

    .site-logo img {
        width: 150px;
    }

    .site-nav {
        display: none;
    }

    .header-actions,
    .menu-toggle {
        display: flex;
    }
}

@media (max-width: 1099px) {
    :root {
        --gutter: 48px;
        --sec: 112px;
    }

    /* Colunas viram uma pilha */
    .grid {
        display: flex;
        flex-direction: column;
        row-gap: 48px;
    }

    .h2 {
        font-size: 46px;
    }

    .h3 {
        font-size: 34px;
    }

    .medica-foto img {
        height: auto;
        max-height: 720px;
        aspect-ratio: 4 / 5;
    }

    .medica-foto {
        max-width: 560px;
    }

    .jornada-wrap {
        gap: 96px;
    }

    .sec-head {
        row-gap: 24px;
        align-items: stretch;
    }

    .etapa {
        row-gap: 32px;
    }

    .etapa-texto {
        order: 1;
        max-width: 640px;
    }

    .etapa-media {
        order: 2;
        width: 100%;
        max-width: 420px;
    }

    .etapa-foto img {
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .etapa-foto--alta img {
        aspect-ratio: 9 / 16;
    }

    .etapa-video {
        height: auto;
        aspect-ratio: 9 / 16;
    }

    .incluido-frase {
        margin-top: 8px;
    }

    .incluido-lista {
        margin-top: 0;
    }

    .resultados-wrap {
        gap: 48px;
    }

    .pacientes {
        gap: 24px;
    }

    .pacientes--um .paciente {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    .pacientes--um .paciente-info {
        padding-bottom: 0;
    }

    .clinica-fotos img {
        height: auto;
        aspect-ratio: 3 / 5;
    }

    .clinica-fotos img:nth-child(2) {
        margin-top: 48px;
    }

    .clinica-texto {
        max-width: 640px;
    }

    .duvidas .grid {
        row-gap: 0;
    }

    .duvidas-intro {
        display: contents;
    }

    .duvidas .h2 {
        margin-top: 24px;
    }

    .faq-col {
        display: contents;
    }

    .faq-list {
        order: 3;
        margin-top: 40px;
    }

    .faq-more {
        order: 4;
        align-self: flex-start;
        margin-top: 32px;
    }

    .faq-refs {
        order: 5;
        align-self: flex-start;
    }

    .faq-responsavel {
        order: 6;
    }

    .contato-col {
        max-width: 640px;
    }

    .posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topo {
        padding-top: 72px;
        padding-bottom: 96px;
    }

    .topo-title {
        font-size: 46px;
    }

    .topo-media,
    .apresentacao-foto,
    .medica--curta .medica-foto {
        width: 100%;
        max-width: 560px;
    }

    .topo-media {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .apresentacao {
        padding-top: 72px;
        padding-bottom: 112px;
    }

    .apresentacao-foto img,
    .medica--curta .medica-foto img {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .caminho-foto {
        height: auto;
        aspect-ratio: 4 / 5;
        max-height: 640px;
    }

    .comparativo-wrap {
        gap: 48px;
    }

    .comparativo-fotos {
        row-gap: 64px;
    }

    .comparativo-item img {
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .etapas-duplas {
        row-gap: 48px;
    }

    .conteudos-head {
        padding-top: 88px;
        padding-bottom: 56px;
    }

    .post-destaque {
        row-gap: 32px;
    }

    .post-destaque-image {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .post-destaque-title {
        font-size: 34px;
    }

    .post-destaque + .posts-grid {
        margin-top: 88px;
    }

    .artigo-head {
        padding-top: 88px;
        padding-bottom: 56px;
    }

    .artigo-title {
        font-size: 44px;
    }

    .artigo-subtitle {
        font-size: 28px;
    }

    .artigo-capa img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .artigo-corpo {
        padding-top: 72px;
        padding-bottom: 96px;
    }

    .artigo-texto,
    .artigo-head-texto,
    .autora-box {
        max-width: 720px;
    }

    .autora {
        padding-bottom: 112px;
    }

    .faixa-foto {
        height: auto;
        aspect-ratio: 3 / 2;
        max-width: 640px;
    }

    .section.faixa-tema {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar .site-header {
        top: 0;
    }
}

/* =========================================
   Celular
   ========================================= */
@media (max-width: 767px) {
    :root {
        --gutter: 24px;
        --sec: 88px;
    }

    body {
        font-size: 17px;
    }

    .site-logo img {
        width: 124px;
    }

    .hero {
        --hl-fs: min(46px, 12.5vw);
        --hl-lh: 1.02;
        --hl-linhas: 2;
        --hl-gap-cta: 34px;
    }

    .hero-content {
        padding: 0 28px;
    }

    .hero-lower {
        align-items: stretch;
        padding-bottom: 80px;
    }

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

    .hero-rule {
        width: 140px;
        margin: 10px 0;
    }

    .hero-sub {
        font-size: 16px;
    }

    .hero-headline {
        margin-top: 28px;
        letter-spacing: -0.015em;
    }

    .hero-br {
        display: inline;
    }

    .hero-cta {
        padding: 18px 0;
    }

    .hero-links {
        margin-top: 22px;
        gap: 8px 24px;
    }

    .hero-bar {
        left: 24px;
        right: 16px;
        bottom: 24px;
    }

    .hero-marks {
        gap: 8px;
    }

    .hero-marks span {
        width: 28px;
    }

    .hero-pause {
        padding: 12px 8px;
    }

    .grid {
        row-gap: 40px;
    }

    .sec-head {
        row-gap: 24px;
    }

    .etapa {
        row-gap: 28px;
    }

    .eyebrow {
        font-size: 18px;
    }

    .h2 {
        font-size: 38px;
        line-height: 1.08;
    }

    .h3 {
        font-size: 30px;
    }

    .lead,
    .body {
        font-size: 17px;
    }

    .medica-texto {
        gap: 22px;
    }

    .jornada-wrap {
        gap: 80px;
    }

    .etapa-label {
        font-size: 18px;
    }

    .etapa-num {
        font-size: 26px;
    }

    .etapa-video,
    .etapa-foto img,
    .topo-media {
        border-radius: 18px;
    }

    .incluido-frase {
        font-size: 22px;
    }

    .incluido-lista li {
        padding: 18px 0;
    }

    .pacientes {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .tratamento {
        grid-template-columns: 1fr;
        row-gap: 10px;
        padding: 24px 0;
    }

    .tratamento-cat {
        font-size: 18px;
    }

    .tratamento-nome {
        font-size: 24px;
    }

    .tratamento-desc {
        font-size: 16px;
    }

    .clinica-fotos {
        gap: 12px;
    }

    .clinica-fotos img:nth-child(2) {
        margin-top: 40px;
    }

    .clinica-frase {
        font-size: 22px;
    }

    .clinica-tabela div {
        grid-template-columns: 1fr;
        row-gap: 4px;
        font-size: 16px;
    }

    .faq-item {
        padding: 22px 0;
    }

    .faq-q {
        font-size: 22px;
    }

    .faq-a {
        font-size: 16px;
    }

    .contato-form .btn {
        align-self: stretch;
    }

    .site-footer-inner {
        font-size: 17px;
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .footer-social {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .footer-social a,
    .footer-map {
        padding: 8px 0;
    }

    .posts-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .topo {
        padding-top: 48px;
        padding-bottom: 72px;
    }

    .topo-title {
        font-size: 38px;
        line-height: 1.08;
    }

    .topo-acoes {
        flex-direction: column;
        align-items: stretch;
    }

    .topo-acoes .btn {
        padding: 18px 0;
    }

    .apresentacao {
        padding-top: 48px;
        padding-bottom: 88px;
    }

    .apresentacao-sub {
        font-size: 22px;
    }

    .caminhos .grid {
        row-gap: 64px;
    }

    .caminho-rotulo {
        font-size: 18px;
    }

    .tecnicas-linha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 8px;
        padding: 20px 0;
        font-size: 16px;
    }

    .tecnicas-rotulo {
        grid-column: 1 / -1;
    }

    .tecnicas-cabeca .tecnicas-rotulo {
        display: none;
    }

    .tecnicas-cabeca {
        padding-bottom: 12px;
    }

    .tecnicas-linha--indicacao {
        grid-template-columns: 1fr;
    }

    .comparativo-nome {
        font-size: 22px;
    }

    .comparativo-item figcaption {
        font-size: 16px;
    }

    .conteudos-head {
        padding-top: 64px;
        padding-bottom: 40px;
    }

    .conteudos-filtro {
        gap: 8px 28px;
    }

    .conteudos-lista {
        padding-top: 48px;
        padding-bottom: 88px;
    }

    .post-destaque-title {
        font-size: 30px;
    }

    .post-destaque + .posts-grid {
        margin-top: 64px;
    }

    .conteudos-paginas {
        flex-direction: column;
        align-items: flex-start;
    }

    .artigo-head {
        padding-top: 56px;
        padding-bottom: 40px;
    }

    .artigo-head-texto {
        gap: 22px;
    }

    .artigo-title {
        font-size: 36px;
        line-height: 1.1;
    }

    .artigo-subtitle {
        margin-top: 8px;
        font-size: 24px;
    }

    .artigo-resumo {
        font-size: 18px;
    }

    .artigo-corpo {
        padding-top: 48px;
        padding-bottom: 72px;
    }

    .entry-content {
        font-size: 17px;
    }

    .entry-content > h2 {
        margin-top: 40px;
        font-size: 28px;
    }

    .entry-content > h3 {
        font-size: 23px;
    }

    .entry-content blockquote {
        font-size: 21px;
    }

    .autora {
        padding-bottom: 88px;
    }

    .autora-box {
        grid-template-columns: 1fr;
        row-gap: 20px;
        padding: 32px 0;
    }

    .autora-box img {
        width: 120px;
        height: 150px;
    }

    .autora-nome {
        font-size: 26px;
    }

    .section.faixa-tema {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

/* Movimento reduzido: sem transições longas */
/* =========================================
   Artigo: coluna única, com a imagem na mesma largura do texto
   (diagramação inspirada no PDF dos artigos)
   ========================================= */
.artigo .artigo-head-texto,
.artigo .artigo-texto,
.artigo .autora-box {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.artigo .artigo-capa {
    max-width: 760px;
    margin: 0 auto;
}

.artigo .artigo-capa img {
    height: auto;
    aspect-ratio: 16 / 9;
}

.artigo .artigo-head {
    padding-bottom: 56px;
}

.artigo .artigo-corpo {
    padding-top: 64px;
}

.artigo .artigo-trilha {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tinta);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.artigo .artigo-resumo {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.55;
    color: var(--tinta);
}

.artigo .entry-content {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.7;
    color: var(--carvao);
}

.artigo .entry-content > * + * {
    margin-top: 20px;
}

.artigo .entry-content > h2 {
    margin-top: 44px;
    font-size: 30px;
    font-weight: 500;
    color: var(--tabaco);
}

.artigo .entry-content li + li {
    margin-top: 10px;
}

.artigo .entry-content .referencias {
    margin-top: 48px;
    padding: 28px 32px;
    background: var(--nevoa);
    border-top: 1px solid var(--tabaco);
    font-family: var(--sans);
}

.artigo .entry-content .referencias-titulo {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tabaco);
}

.artigo .entry-content .has-drop-cap:not(:focus)::first-letter {
    float: left;
    margin: 0.06em 0.1em 0 0;
    font-size: 3.55em;
    font-weight: 500;
    line-height: 0.82;
    color: var(--tabaco);
    text-transform: uppercase;
}

.artigo .entry-content .quadro,
.artigo .entry-content .figura-artigo {
    margin-top: 40px;
    margin-bottom: 8px;
    padding: 28px 32px;
    background: var(--nevoa);
}

.artigo .entry-content .quadro > * {
    margin: 0;
}

.artigo .entry-content .quadro > * + * {
    margin-top: 12px;
}

.artigo .entry-content .quadro-rotulo,
.artigo .entry-content .figura-rotulo {
    margin: 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tabaco);
}

.artigo .entry-content .quadro h3 {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
}

.artigo .entry-content .quadro p:not(.quadro-rotulo) {
    font-size: 18px;
    line-height: 1.65;
}

.artigo .entry-content .figura-rotulo {
    margin-bottom: 20px;
}

.artigo .entry-content .figura-artigo svg {
    display: block;
    width: 100%;
    height: auto;
}

.artigo .entry-content .figura-legendas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: var(--tinta);
}

.artigo .entry-content .figura-artigo figcaption {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pedra);
}

.artigo .entry-content .referencias ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.6;
}

.artigo .entry-content .referencias ul li + li {
    margin-top: 10px;
}

/* Segundo grupo dentro das referências (ex.: fonte jornalística complementar) */
.artigo .entry-content .referencias ol + .referencias-titulo,
.artigo .entry-content .referencias ul + .referencias-titulo {
    margin-top: 32px;
}

@media (max-width: 767px) {
    .artigo .artigo-resumo {
        font-size: 19px;
    }

    .artigo .entry-content {
        font-size: 18px;
    }

    .artigo .entry-content > h2 {
        margin-top: 36px;
        font-size: 26px;
    }

    .artigo .entry-content .referencias {
        padding: 22px 20px;
    }

    .artigo .entry-content .quadro,
    .artigo .entry-content .figura-artigo {
        padding: 22px 20px;
    }

    .artigo .entry-content .quadro h3 {
        font-size: 22px;
    }

    .artigo .entry-content .quadro p:not(.quadro-rotulo) {
        font-size: 17px;
    }

    .artigo .entry-content .figura-legendas {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-clip,
    .hero-marks span,
    .menu-toggle span {
        transition: none;
    }
}