/* ══════════════════════════════════════════════════════════
Dr. Lucas Andrade · PÁGINAS DE PROTOCOLO — sistema compartilhado
Usado pelas 4 páginas de /protocolos/.
DEPENDÊNCIA (obrigatória, nesta ordem, no de cada página):
1. css/style.css → tokens (:root), reset, .glass-nav, .fab, .btn, .ig-pill
2. css/footer.css → rodapé idêntico ao da home
3. protocolos/protocolo.css → este arquivo
Optamos por em vez de @import: @import é serial e bloqueia render
(o briefing exige "nenhum bloqueio de render"). Nada de cor ou fonte é
redeclarado aqui — tudo herda os tokens de style.css.
TESE QUE GOVERNA O ARQUIVO:
"A harmonização mais bem-feita é a que ninguém nota."
Por isso não existe caixa colorida, badge, selo ou contador neste sistema.
A hierarquia é construída por espaço e contraste tonal — nunca por ornamento.
══════════════════════════════════════════════════════════ */
:root {
/* ---- Ritmo vertical ----
O briefing define mínimo de 96px desktop / 56px mobile ENTRE blocos.
Estes são pisos, não tetos: --p-block é o ritmo padrão e --p-block-lg
abre os respiros de virada (entrada, saída, CTA). */
--p-block: clamp(56px, 9vw, 96px);
--p-block-lg: clamp(80px, 14vw, 168px);
/* ---- Medida de leitura ---- */
--p-measure: 62ch;
/* ---- Divisor dourado (40 × 1) ---- */
--p-rule-w: 40px;
/* ---- Dourado LEGÍVEL para texto pequeno ----
PROBLEMA: --gold (#A78D67) sobre o creme dá 2.9:1 — reprova no AA (exige 4.5:1
para texto normal; a isenção de "texto grande" só vale a partir de 24px).
Uma eyebrow de 11px é texto e não tem isenção possível.
REGRA DESTE SISTEMA:
• --p-gold-text → todo dourado que é TEXTO sobre creme (5.1:1 ✓)
• --gold → dourado que é DECORAÇÃO (fios, numerais, bordas, hover),
onde a regra de contraste de texto não se aplica
• --p-gold-dark → dourado que é TEXTO sobre painel escuro (6.2:1 ✓)
mesmo champagne já usado em footer.css (--f-gold) */
--p-gold-text: #7E6440;
--p-gold-dark: #C2A87A;
/* ---- Tom do painel de contraste ----
Espelha o painel da Seção 5 e o rodapé da home (#2C2B29). Ver nota sobre
o verde no fim deste arquivo. */
--p-dark-bg: #2C2B29;
}
/* ══════════════════════ LAYOUT ══════════════════════ */
/* Container único da página. Mesma largura da home (.about__inner / footer__panel)
para que protocolo e home leiam como o mesmo objeto editorial. */
.p-shell {
width: 90%;
max-width: 1320px;
margin: 0 auto;
}
/* NÃO existe container estreito. Uma página editorial tem UMA margem esquerda:
se um bloco centraliza numa largura menor, a borda esquerda salta e a página
deixa de ter espinha. A medida de leitura é responsabilidade do TEXTO
(.p-text = 62ch, .p-h2 = 22ch), nunca do container. */
/* Ritmo entre blocos. É o componente mais importante do arquivo:
a respiração é o material principal destas páginas. */
.p-block { padding: var(--p-block) 0; }
.p-block--open { padding: var(--p-block-lg) 0; }
.p-block--flush-top { padding-top: 0; }
/* ══════════════════════ UTILITÁRIOS DE ESPAÇAMENTO ══════════════════════ */
/* Os respiros pontuais entre blocos (bloco > título > lista, etc.) usados nas
3 páginas de protocolo além da toxina-botulínica. Valores em px, iguais
aos que a página de toxina já usa via `style="margin-top: Npx"` inline —
aqui viram classe para não repetir o valor em cada página. */
.p-mt-6 { margin-top: 6px; }
.p-mt-18 { margin-top: 18px; }
.p-mt-22 { margin-top: 22px; }
.p-mt-40 { margin-top: 40px; }
.p-mt-42 { margin-top: 42px; }
.p-mt-44 { margin-top: 44px; }
.p-mt-48 { margin-top: 48px; }
.p-mt-52 { margin-top: 52px; }
.p-mb-52 { margin-bottom: 52px; }
.p-measure-54 { max-width: 54ch; }
.p-measure-60 { max-width: 60ch; }
/* ══════════════════════ TIPOGRAFIA ══════════════════════ */
.p-eyebrow {
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-gold-text);
margin: 0 0 20px;
}
/* H1 — um por página. */
.p-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(38px, 5.4vw, 72px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
max-width: 18ch; /* título longo vira parede; 18ch mantém a silhueta */
text-wrap: balance;
}
.p-h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1.15;
color: var(--ink);
margin: 0 0 24px;
max-width: 22ch;
text-wrap: balance;
}
.p-h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(21px, 2vw, 27px);
line-height: 1.25;
color: var(--ink);
margin: 0 0 12px;
}
/* Itálico de ênfase — permitido no display, nunca no corpo. */
.p-title em, .p-h2 em, .p-h3 em { font-style: italic; font-weight: 400; }
/* Lead: o degrau entre o display e o corpo. Sem ele a página cai de 72px
direto para 16px e a escala parece landing page, não editorial. */
.p-lead {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.7;
color: var(--body);
max-width: 52ch;
margin: 0;
}
.p-text {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(15.5px, 1.05vw, 16.5px);
line-height: 1.85;
color: var(--body);
max-width: var(--p-measure);
margin: 0 0 1.25em;
}
.p-text:last-child { margin-bottom: 0; }
.p-text strong { font-weight: 500; color: var(--ink); }
/* Nota / letra miúda (aviso legal, contexto clínico).
Usa --muted (4,96:1 sobre creme) em vez de --body + opacity: a mesma cor
dimmed por opacity cai para ~3,3:1 e reprova o AA (4.5:1) — este é
justamente o texto de aviso legal/clínico, que não pode ficar abaixo do
contraste mínimo. */
.p-note {
font-family: var(--font-body);
font-weight: 300;
font-size: 13px;
line-height: 1.7;
color: var(--muted);
max-width: 68ch;
margin: 0;
}
/* ══════════════════════ DIVISOR ══════════════════════ */
/* 40 × 1, dourado. Nunca
: é um , decoração pura —
por isso pode usar --gold (não é texto). */
.p-rule {
display: block;
width: var(--p-rule-w);
height: 1px;
background: var(--gold);
border: 0;
margin: 0 0 28px;
opacity: 0.85;
}
.p-rule--center { margin-left: auto; margin-right: auto; }
/* ══════════════════════ ABERTURA DA PÁGINA ══════════════════════ */
/* Não é "hero de landing": é a primeira página de um capítulo.
Sem foto de fundo, sem botão. Só tipografia e ar. */
.p-hero {
padding: clamp(140px, 18vh, 200px) 0 var(--p-block);
}
.p-hero__lead { margin-top: 28px; }
/* Trilha de retorno para a home. Discreta: o usuário veio de lá.
Cor via --muted (AA) em vez de --body + opacity: 0.65, que reprovava o
contraste (~2,9:1). O destaque ao hover/foco passa a ser de cor, não de
opacidade, mantendo a mesma sensação de "acende ao interagir". */
.p-back {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-body);
font-weight: 400;
font-size: 13px;
letter-spacing: 0.02em;
color: var(--muted);
margin-bottom: 34px;
transition: color 0.3s ease, gap 0.3s ease;
}
.p-back:hover { color: var(--ink); gap: 13px; }
.p-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.p-back__arrow { font-size: 15px; line-height: 1; }
/* ══════════════════════ CRITÉRIO (o coração da tese) ══════════════════════ */
/* Componente-assinatura destas páginas. Não é lista de benefícios: é a lista
do que o Dr. Lucas EXIGE antes de aplicar — e do que ele recusa.
Sem ícone, sem bullet: só numeral dourado e fio. Se virasse card com ícone,
seria o site de qualquer injetor da região. */
.p-criteria {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(30px, 4vw, 48px);
}
.p-criteria--2col { grid-template-columns: 1fr 1fr; }
.p-criteria__item {
padding-top: 20px;
border-top: 1px solid rgba(167, 141, 103, 0.28);
max-width: var(--p-measure);
}
/* Numeral: decoração, não texto de leitura → --gold liberado.
Lining numerals para "01" não virar "OI" (mesma correção da home). */
.p-criteria__index {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.08em;
color: var(--gold);
font-feature-settings: "lnum" 1, "tnum" 1;
margin-bottom: 10px;
}
.p-criteria__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(19px, 1.7vw, 24px);
line-height: 1.3;
color: var(--ink);
margin: 0 0 8px;
}
.p-criteria__text {
font-family: var(--font-body);
font-weight: 300;
font-size: 15.5px;
line-height: 1.8;
color: var(--body);
margin: 0;
}
/* ══════════════════════ CITAÇÃO / MANIFESTO ══════════════════════ */
/* A voz do médico em primeira pessoa. Um por página, no máximo — é o pico
tipográfico do texto corrido. */
.p-quote {
margin: 0;
max-width: 30ch;
}
.p-quote__text {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.34;
color: var(--ink);
margin: 0;
}
.p-quote__by {
font-family: var(--font-body);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--p-gold-text);
margin-top: 22px;
}
/* ══════════════════════ PAINEL ESCURO (contraste tonal) ══════════════════════ */
/* Ecoa o painel da Seção 5 da home. Elevação por contraste tonal, não por sombra. */
.p-dark {
background: var(--p-dark-bg);
border-radius: var(--radius-frame);
padding: clamp(40px, 6vw, 88px);
color: #F8F5EF;
}
.p-dark .p-eyebrow { color: var(--p-gold-dark); }
.p-dark .p-h2, .p-dark .p-h3, .p-dark .p-quote__text { color: #F8F5EF; }
.p-dark .p-text { color: rgba(248, 245, 239, 0.66); }
.p-dark .p-quote__by { color: var(--p-gold-dark); }
.p-dark .p-rule { background: var(--p-gold-dark); }
.p-dark .p-criteria__item { border-top-color: rgba(236, 229, 216, 0.14); }
.p-dark .p-criteria__index { color: var(--p-gold-dark); }
.p-dark .p-criteria__title { color: #F8F5EF; }
.p-dark .p-criteria__text { color: rgba(248, 245, 239, 0.62); }
/* ══════════════════════ PAINEL TAUPE (segurança) ══════════════════════ */
/* Substitui o verde institucional (#1F3A2B) por taupe quente (#5C5349).
Mantém gravidade clínica sem a dramaticidade do verde descontinuado.
Dourado champagne (--p-gold-dark) dá 6,12:1 — AA completo. */
.p-green {
background: #5C5349;
border-radius: var(--radius-frame);
padding: clamp(40px, 6vw, 88px);
color: #F2F0EA;
}
.p-green .p-eyebrow { color: var(--p-gold-dark); }
.p-green .p-h2, .p-green .p-h3 { color: #F5F3ED; }
.p-green .p-text { color: rgba(242, 240, 234, 0.72); }
.p-green .p-rule { background: var(--p-gold-dark); }
.p-green .p-criteria__item { border-top-color: rgba(242, 240, 234, 0.16); }
.p-green .p-criteria__index { color: var(--p-gold-dark); }
.p-green .p-criteria__title { color: #F5F3ED; }
.p-green .p-criteria__text { color: rgba(242, 240, 234, 0.68); }
.p-green .p-note { color: rgba(242, 240, 234, 0.6); opacity: 1; }
/* ══════════════════════ SPLIT (duas colunas de argumento) ══════════════════════ */
/* Usado em "para quem / quando não indico" e em "o que muda / o que não muda".
A segunda coluna nunca é secundária: é onde mora a prova de critério.
Por isso não há hierarquia visual entre elas — só o fio dourado separando. */
.p-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(34px, 5vw, 76px);
align-items: start;
}
.p-split__col { min-width: 0; }
/* A coluna da direita ganha o fio: é a que carrega a recusa. */
.p-split__col--edge {
padding-left: clamp(34px, 5vw, 76px);
border-left: 1px solid rgba(167, 141, 103, 0.28);
}
.p-green .p-split__col--edge,
.p-dark .p-split__col--edge { border-left-color: rgba(242, 240, 234, 0.16); }
/* Lista de argumentos. Sem bullet de lista: o marcador é um fio dourado curto,
porque bullet redondo é gramática de landing page. */
.p-list { list-style: none; margin: 0; padding: 0; }
.p-list__item {
position: relative;
padding-left: 26px;
margin-bottom: 20px;
font-family: var(--font-body);
font-weight: 300;
font-size: 15.5px;
line-height: 1.8;
color: var(--body);
max-width: var(--p-measure);
}
.p-list__item:last-child { margin-bottom: 0; }
.p-list__item::before {
content: "";
position: absolute;
left: 0;
top: 0.85em;
width: 14px;
height: 1px;
background: var(--gold);
}
.p-list__item b, .p-list__item strong {
display: block;
font-family: var(--font-body);
font-weight: 500;
color: var(--ink);
margin-bottom: 2px;
}
.p-green .p-list__item { color: rgba(242, 240, 234, 0.72); }
.p-green .p-list__item b, .p-green .p-list__item strong { color: #F5F3ED; }
.p-green .p-list__item::before { background: var(--p-gold-dark); }
.p-dark .p-list__item { color: rgba(248, 245, 239, 0.66); }
.p-dark .p-list__item b, .p-dark .p-list__item strong { color: #F8F5EF; }
.p-dark .p-list__item::before { background: var(--p-gold-dark); }
/* ══════════════════════ PROCESSO (4 etapas) ══════════════════════ */
/* Numeral Cormorant grande em dourado de baixa opacidade — decoração, não texto,
por isso --gold é permitido aqui. */
.p-process {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(26px, 3vw, 44px);
}
.p-process__step {
padding-top: 22px;
border-top: 1px solid rgba(167, 141, 103, 0.3);
}
.p-process__num {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(46px, 5vw, 72px);
line-height: 1;
color: var(--gold);
opacity: 0.28;
font-feature-settings: "lnum" 1, "tnum" 1;
margin-bottom: 14px;
user-select: none;
}
.p-process__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(19px, 1.6vw, 23px);
line-height: 1.25;
color: var(--ink);
margin: 0 0 9px;
}
.p-process__text {
font-family: var(--font-body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.8;
color: var(--body);
margin: 0;
}
/* ══════════════════════ FAQ (details/summary nativo) ══════════════════════ */
/* Sem JS de biblioteca: resolve sozinho, é acessível por padrão
e funciona sem JavaScript. O marcador nativo é removido e substituído
por um sinal de + / − desenhado em CSS. */
.p-faq { border-top: 1px solid rgba(167, 141, 103, 0.24); }
.p-faq__item {
border-bottom: 1px solid rgba(167, 141, 103, 0.24);
}
.p-faq__q {
position: relative;
display: block;
list-style: none;
cursor: pointer;
padding: 26px 52px 26px 0;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(18px, 1.6vw, 23px);
line-height: 1.35;
color: var(--ink);
transition: color 0.3s ease;
}
.p-faq__q::-webkit-details-marker { display: none; } /* Safari */
.p-faq__q:hover { color: var(--p-gold-text); }
.p-faq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* sinal +/− em traço fino (nunca ícone de biblioteca) */
.p-faq__q::before,
.p-faq__q::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
background: var(--gold);
transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.3s ease;
}
.p-faq__q::before { width: 15px; height: 1px; transform: translateY(-50%); }
.p-faq__q::after { width: 1px; height: 15px; right: 13px; transform: translateY(-50%); }
.p-faq__item[open] .p-faq__q::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.p-faq__a {
padding: 0 52px 30px 0;
max-width: var(--p-measure);
}
.p-faq__a .p-text { font-size: 15.5px; }
/* ══════════════════════ OUTROS PROTOCOLOS (cross-link) ══════════════════════ */
.p-cross {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.6vw, 40px);
list-style: none;
margin: 0;
padding: 0;
}
.p-cross__link {
display: block;
padding: 30px 0 0;
border-top: 1px solid rgba(167, 141, 103, 0.3);
transition: border-color 0.4s ease;
}
.p-cross__link:hover { border-top-color: var(--gold); }
.p-cross__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.p-cross__label {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.25;
color: var(--ink);
margin-bottom: 8px;
transition: color 0.3s ease;
}
.p-cross__link:hover .p-cross__label { color: var(--p-gold-text); }
.p-cross__text {
font-family: var(--font-body);
font-weight: 300;
font-size: 14px;
line-height: 1.75;
color: var(--body);
margin: 0;
}
/* ══════════════════════ SLOT DE IMAGEM ══════════════════════ */
/* Placeholder idêntico em gramática ao da home: bloco creme + numeral Cormorant
grande em baixa opacidade. Mesmos data-tone da Seção 3 para não divergir.
Cada slot no HTML leva comentário com proporção e conteúdo esperado, ex:
*/
.p-slot {
position: relative;
width: 100%;
border-radius: var(--radius-img);
overflow: hidden;
border: 1px solid rgba(167, 141, 103, 0.28);
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(120% 100% at 30% 18%, #efe6d6 0%, #e4d6bf 100%);
}
/* proporções declaradas — use a que o comentário do slot indicar */
.p-slot[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.p-slot[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.p-slot[data-ratio="1:1"] { aspect-ratio: 1 / 1; }
.p-slot[data-ratio="3:2"] { aspect-ratio: 3 / 2; }
.p-slot[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
/* mesmos tons da Seção 3 da home */
.p-slot[data-tone="1"] { background: radial-gradient(120% 100% at 30% 18%, #efe6d6 0%, #e4d6bf 100%); }
.p-slot[data-tone="2"] { background: radial-gradient(120% 100% at 30% 18%, #ece1cf 0%, #ddccb0 100%); }
.p-slot[data-tone="3"] { background: radial-gradient(120% 100% at 30% 18%, #ecdfc7 0%, #d7c29d 100%); }
.p-slot[data-tone="4"] { background: radial-gradient(120% 100% at 30% 18%, #e6dccb 0%, #ccb891 100%); }
/* grão orgânico — mesmo do .experience-panel__media da home */
.p-slot::after {
content: "";
position: absolute; inset: 0;
opacity: 0.5; mix-blend-mode: multiply; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.p-slot__index {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(80px, 12vw, 170px);
line-height: 1;
color: rgba(35, 35, 35, 0.11);
letter-spacing: 0.02em;
font-feature-settings: "lnum" 1, "tnum" 1;
user-select: none;
}
/* quando a foto real chegar, basta inserir ![]()
dentro do slot */
.p-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-slot:has(img) { border-color: transparent; }
.p-slot:has(img)::after { display: none; }
/* ══════════════════════ CTA ══════════════════════ */
/* Destino único da página: WhatsApp, convidando para AVALIAÇÃO.
O botão em si reutiliza .btn.btn--primary de style.css — não duplicamos.
Regra da home mantida: um único botão sólido por página. */
.p-cta {
padding: var(--p-block-lg) 0;
text-align: center;
}
.p-cta__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.2;
color: var(--ink);
margin: 0 auto 34px;
max-width: 20ch;
text-wrap: balance;
}
.p-cta__note {
font-family: var(--font-body);
font-weight: 300;
font-size: 13px;
color: var(--muted);
margin-top: 22px;
}
/* CTA secundário / de meio de página: texto-link com seta.
Regra da home: fora do pico de desejo, nunca botão sólido. */
.p-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-weight: 500;
font-size: 14.5px;
letter-spacing: 0.02em;
color: var(--ink);
padding-bottom: 4px;
border-bottom: 1px solid rgba(167, 141, 103, 0.5);
transition: gap 0.35s cubic-bezier(0.22, 0.7, 0.2, 1), border-color 0.35s ease;
}
.p-link:hover { gap: 15px; border-bottom-color: var(--gold); }
.p-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.p-link__arrow { font-size: 15px; line-height: 1; }
/* ══════════════════════ NAV SOBRE FUNDO CLARO ══════════════════════ */
/* A .glass-nav da home flutua sobre a FOTO da hero. Sobre creme puro, o vidro
a 12% de branco some. Este modificador aumenta a opacidade e assenta a borda,
mantendo o mesmo componente (não é uma nav nova). */
.glass-nav--light {
background: rgba(255, 255, 255, 0.55);
border-color: rgba(44, 43, 41, 0.08);
box-shadow:
0 14px 44px -22px rgba(35, 30, 24, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.glass-nav--light .glass-nav__link { opacity: 0.9; }
/* A home esconde a nav por padrão sob html.js e a revela via main.js — que estas
páginas não carregam. Aqui a nav é permanente: não existe hero para ela
recolher, nem esfera flutuante para receber o bastão. Mesma especificidade da
regra da home (0,2,0), mas protocolo.css carrega depois: esta vence. */
.js .glass-nav--light {
opacity: 1;
transform: translate(-50%, 0) scale(1);
filter: none;
}
/* ══════════════════════ RODAPÉ SEM REVEAL ══════════════════════ */
/* Mesma armadilha da nav: footer.css esconde o painel sob html.js e espera a
classe .is-in, aplicada pelo main.js da home.
Aqui o reveal é removido de propósito, não por preguiça: o rodapé carrega CRM
e endereços — conteúdo exigido pela publicidade médica. Conteúdo obrigatório
não pode depender de um IntersectionObserver disparar. Um fade de 0,65s não
paga esse risco numa página que não tem nenhuma outra animação de scroll. */
.js .footer__panel { opacity: 1; transform: none; }
/* ══════════════════════ RESPONSIVO ══════════════════════ */
/* Desktop-first na escrita (max-width), mobile-first no comportamento.
Breakpoints canônicos do projeto — não inventar novos. */
@media (max-width: 1024px) {
.p-title { max-width: 20ch; }
.p-criteria--2col { gap: 34px; }
/* 4 etapas em uma linha ficam estreitas demais para o título respirar */
.p-process { grid-template-columns: 1fr 1fr; gap: 40px 34px; }
}
@media (max-width: 860px) {
.p-shell { width: 88%; }
.p-criteria--2col { grid-template-columns: 1fr; }
.p-hero { padding-top: clamp(112px, 15vh, 150px); }
.p-quote { max-width: none; }
.p-dark, .p-green { border-radius: var(--radius-img); }
/* o split empilha: o fio vertical vira fio horizontal, para a coluna da
recusa continuar visualmente separada da coluna da indicação */
.p-split { grid-template-columns: 1fr; gap: 44px; }
.p-split__col--edge {
padding-left: 0;
padding-top: 44px;
border-left: 0;
border-top: 1px solid rgba(167, 141, 103, 0.28);
}
.p-green .p-split__col--edge,
.p-dark .p-split__col--edge { border-top-color: rgba(242, 240, 234, 0.16); }
.p-cross { grid-template-columns: 1fr; gap: 0; }
.p-cross__link { padding: 24px 0; }
}
@media (max-width: 560px) {
.p-shell { width: 90%; }
.p-title { max-width: none; }
.p-h2 { max-width: none; }
.p-lead { max-width: none; }
.p-cta__title { max-width: none; }
/* âncora de leitura no mobile: medida cheia, sem truncar em 62ch */
.p-text { max-width: none; }
.p-process { grid-template-columns: 1fr; gap: 34px; }
.p-faq__q { font-size: 18px; padding-right: 44px; }
.p-faq__a { padding-right: 0; }
}
/* ══════════════════════ ACESSIBILIDADE ══════════════════════ */
/* Âncoras respiram sob a nav flutuante (mesma regra da home). */
[id] { scroll-margin-top: 96px; }
/* Foco visível dourado em tudo que é interativo (regra global do projeto). */
.p-block a:focus-visible,
.p-dark a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
/* o hover destes dois anima o gap; com movimento reduzido ele fica estático */
.p-back, .p-link { transition: none; }
.p-back:hover { gap: 9px; }
.p-link:hover { gap: 10px; }
/* o +/− do FAQ troca sem girar — o estado continua legível */
.p-faq__q::before, .p-faq__q::after, .p-cross__link, .p-cross__label { transition: none; }
.p-faq__item[open] .p-faq__q::after { transform: translateY(-50%); opacity: 0; }
}
/* ══════════════════════════════════════════════════════════
NOTA — o "footer verde"
O briefing pede footer verde #1F3A2B E "idêntico ao da home". As duas coisas
se excluem: o rodapé da home é #2C2B29 (footer.css: --f-bg). O token --green
(#1F3A2B) existe em style.css, mas está SEM USO desde a substituição — o
comentário ao lado dele em style.css:18 ainda diz "footer", e é o que induz
ao erro (comentário obsoleto).
Este arquivo assume "idêntico ao da home" (escuro) e não estiliza o rodapé:
as páginas de protocolo devem carregar footer.css e reusar a mesma marcação.
Se a decisão for reverter para o verde, isso muda a home também — é mudança
de design system, não de página, e precisa ser decidida antes do Bloco 1.
══════════════════════════════════════════════════════════ */