/*
 * componentes.css: cabeçalho, rodapé, botão e CTA, formulário, blocos 8.9 a
 * 8.12, cromos 8.13. Fonte: _spec/05-DESIGN.md seções 8.1 a 8.13.
 */

/* ============================================================ */
/* 1. Cabeçalho (05-DESIGN 8.1)                                   */
/* ============================================================ */
:root{ --cabecalho-h: 56px; }
@media (min-width: 720px){ :root{ --cabecalho-h: 64px; } }

.cabecalho{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 70;
  height: var(--cabecalho-h);
  border-bottom: 1px solid var(--linha, #DEE3E0);
  transition: background-color var(--d-ui, 200ms) var(--ease), color var(--d-ui, 200ms) var(--ease), border-color var(--d-ui, 200ms) var(--ease);
}
.cabecalho--claro{ background: #F7F9F8; color: #151A17; --linha: #DEE3E0; }
/* achado DES-03 (C3 P0): no escuro o cabeçalho claro trocava só o fundo e mantinha
   o lockup de fundo claro (esmeralda quase invisível sobre #0D110F) e o CTA caía
   no fallback esmeralda, abaixo de 3:1 contra o fundo. Troca também o lockup e as
   variáveis do botão para o par off-white / esmeralda do resto do site no escuro. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .cabecalho--claro{ background: #0D110F; color: #F0EBE4; --linha: #232B27; --acao: #F0EBE4; --acao-hover: #FFFFFF; --acao-tinta: #0B3D2E; --ring: var(--anel-esm); }
  html:not([data-theme="light"]) .cabecalho--claro .cabecalho__lockup--claro{ display: none; }
  html:not([data-theme="light"]) .cabecalho--claro .cabecalho__lockup--esm{ display: block; }
}
html[data-theme="dark"] .cabecalho--claro{ background: #0D110F; color: #F0EBE4; --linha: #232B27; --acao: #F0EBE4; --acao-hover: #FFFFFF; --acao-tinta: #0B3D2E; --ring: var(--anel-esm); }
html[data-theme="dark"] .cabecalho--claro .cabecalho__lockup--claro{ display: none; }
html[data-theme="dark"] .cabecalho--claro .cabecalho__lockup--esm{ display: block; }
.cabecalho--esmeralda{ background: #0B3D2E; color: #F0EBE4; --linha: rgba(240,235,228,.14); }

.cabecalho__linha{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
}
.cabecalho__marca{ display: inline-flex; align-items: center; text-decoration: none; }
.cabecalho__lockup{ height: 36px; width: auto; }
@media (max-width: 719px){ .cabecalho__lockup{ height: 32px; } }
.cabecalho__lockup--esm{ display: none; }
.cabecalho--esmeralda .cabecalho__lockup--claro{ display: none; }
.cabecalho--esmeralda .cabecalho__lockup--esm{ display: block; }

.menu-linha{ display: none; }
@media (min-width: 1120px){
  .menu-linha{ display: block; }
  .menu-linha ul{ display: flex; gap: var(--sc-6); align-items: center; }
  .menu-linha a{
    display: inline-flex; align-items: center; min-height: 44px;
    text-decoration: none; font-size: var(--t-pequeno); font-weight: 400;
    border-bottom: 2px solid transparent;
  }
  .menu-linha a[aria-current="page"]{ font-weight: 500; border-bottom-color: currentColor; }
  @media (hover: hover) and (pointer: fine){
    .menu-linha a:hover{ border-bottom: 1px solid currentColor; }
  }
}

/* Especificidade de duas classes: precisa vencer ".botao{display:inline-flex}",
 * que vem depois no arquivo (a mesma classe única ".cabecalho__cta" perderia). */
.cabecalho__cta.botao{ display: none; white-space: nowrap; }
@media (min-width: 720px){ .cabecalho__cta.botao{ display: inline-flex; } }

@media (min-width: 1120px){ .menu{ display: none; } }
.menu > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sc-2);
  min-height: 44px;
  padding-inline: var(--sc-3);
  font-size: var(--t-pequeno);
}
.menu > summary::-webkit-details-marker{ display: none; }
.menu__aberto{ display: none; }
.menu[open] .menu__fechado{ display: none; }
.menu[open] .menu__aberto{ display: inline; }
.menu .menu__x{ display: none; }
.menu[open] .icone .menu__tracos{ display: none; }
.menu[open] .icone .menu__x{ display: block; }

.menu__painel{
  position: fixed;
  inset-inline: 0;
  top: var(--cabecalho-h);
  z-index: 71;
  max-height: calc(100svh - var(--cabecalho-h));
  overflow-y: auto;
  background: inherit;
  color: inherit;
  border-bottom: 1px solid var(--linha);
  box-shadow: var(--e2);
  overscroll-behavior: contain;
  padding: var(--sc-4);
}
.menu:not([open]) .menu__painel{ display: none; }
.menu__painel ul{ display: flex; flex-direction: column; }
.menu__painel a{
  display: flex; align-items: center; min-height: 48px;
  text-decoration: none; font-size: var(--t-corpo);
}
.menu__cta{ width: 100%; justify-content: center; margin-top: var(--sc-2); }

/* ============================================================ */
/* 2. Rodapé (05-DESIGN 8.2)                                      */
/* ============================================================ */
.rodape{ padding-block-start: var(--sc-8); padding-block-end: calc(var(--sc-7) + env(safe-area-inset-bottom, 0px)); }
.rodape__topo{ margin-block-end: var(--sc-8); }
.rodape__lockup{ height: 32px; width: auto; margin-block-end: var(--sc-4); }
.rodape__categoria{ max-inline-size: 36ch; color: #F0EBE4; }
.rodape__nav{ display: grid; gap: var(--sc-6); grid-template-columns: 1fr; margin-block-end: var(--sc-8); }
@media (min-width: 720px){ .rodape__nav{ grid-template-columns: repeat(3, 1fr); } }
.rodape__titulo{ font-size: var(--t-pequeno); font-weight: 500; color: #BFCEC6; margin-block-end: var(--sc-3); }
.rodape__coluna ul{ display: flex; flex-direction: column; gap: var(--sc-1); }
.rodape__coluna a{
  display: inline-flex; align-items: center; min-height: 44px;
  color: #F0EBE4; text-decoration: none; font-size: var(--t-corpo);
}
@media (hover: hover) and (pointer: fine){
  .rodape__coluna a:hover{ text-decoration: underline; text-underline-offset: 0.25em; }
}
.rodape__nota, .rodape__marca, .rodape__direitos{ color: #BFCEC6; margin-block-end: var(--sc-1); }

/* ============================================================ */
/* 3. Botão e CTA (05-DESIGN 8.3)                                 */
/* ============================================================ */
.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 24px;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: var(--acao, #0B3D2E);
  color: var(--acao-tinta, #FFFFFF);
  transition: background-color var(--d-hover, 150ms) var(--ease), transform var(--d-toque, 100ms) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .botao:hover{ background: var(--acao-hover, #08281E); }
}
.botao:active{ transform: translateY(1px); }
@media (min-width: 360px){ .botao{ white-space: nowrap; } }
@media (max-width: 359px){ .botao{ text-wrap: balance; } }

.botao--secundario{
  background: transparent;
  color: var(--tinta, #151A17);
  border: 1px solid var(--border-strong, #6C746D);
}
@media (hover: hover) and (pointer: fine){
  .botao--secundario:hover{ background: var(--surface-2, #F1F4F2); }
}

a[data-cta="secundario"]{
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-corpo); font-weight: 500; color: var(--tinta, inherit);
  text-decoration: underline; text-underline-offset: 0.25em;
}
@media (hover: hover) and (pointer: fine){
  a[data-cta="secundario"]:hover{ text-decoration-thickness: 2px; }
}

[data-cta="microcopy"]{
  display: block;
  font-size: var(--t-pequeno);
  color: var(--tinta-suave, #556059);
  max-inline-size: 46ch;
  margin-block-start: var(--sc-2);
}

/* ============================================================ */
/* 4. Formulário (05-DESIGN 8.4)                                  */
/* ============================================================ */
.formulario-secao{ padding-block: var(--sc-section); }
.formulario-secao .folha{
  max-inline-size: 44rem;
  margin-inline: auto;
  background: #FFFFFF;
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  color: #151A17;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .formulario-secao .folha{ background: #151A17; color: #F0EBE4; }
}
html[data-theme="dark"] .formulario-secao .folha{ background: #151A17; color: #F0EBE4; }

.formulario-secao h2{ font-size: var(--t-h2); margin-block-end: var(--sc-2); }
.formulario__micro{ margin-block-end: var(--sc-2); }
.formulario__nota{ font-size: var(--t-pequeno); color: var(--tinta-suave, #556059); margin-block-end: var(--sc-6); }

.formulario{ display: flex; flex-direction: column; gap: var(--sc-5); }
.formulario__linha2{ display: grid; gap: var(--sc-4); grid-template-columns: 1fr; }
@media (min-width: 720px){ .formulario__linha2{ grid-template-columns: 1fr 1fr; } }

.campo-form{ display: flex; flex-direction: column; gap: var(--sc-1); }
.campo-form label{ font-size: 15px; font-weight: 500; }
.campo-form .opcional{ font-size: 15px; font-weight: 400; color: var(--tinta-suave, #556059); }
.campo-form input[type="text"],
.campo-form input[type="tel"],
.campo-form textarea{
  min-height: 48px;
  font-size: 16px;
  color: #151A17;
  background: #FFFFFF;
  border: 1px solid #6C746D;
  border-radius: var(--r-md);
  padding-inline: var(--sc-3);
}
html[data-theme="dark"] .campo-form input, html[data-theme="dark"] .campo-form textarea { background: #151A17; color: #F0EBE4; }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .campo-form input, html:not([data-theme="light"]) .campo-form textarea { background: #151A17; color: #F0EBE4; } }
.campo-form textarea{ min-height: 96px; padding-block: var(--sc-2); resize: vertical; }
.campo-form input:focus-visible, .campo-form textarea:focus-visible{
  border-color: #0B3D2E;
  box-shadow: 0 0 0 3px var(--anel-claro);
}
.campo-form input[aria-invalid="true"], .campo-form textarea[aria-invalid="true"]{ border-color: #A3302B; }
.campo-form .ajuda{ font-size: var(--t-pequeno); color: var(--tinta-suave, #556059); }
.campo-form .erro{ font-size: var(--t-pequeno); color: #A3302B; }
.contador{ font-size: var(--t-mini); color: var(--tinta-suave, #556059); text-align: right; }

fieldset.escolha{ border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sc-1); }
fieldset.escolha legend{ font-size: 15px; font-weight: 500; padding: 0; }
.opcao-radio{
  display: flex; align-items: center; gap: var(--sc-2);
  min-height: 48px; padding-inline: var(--sc-2); border-radius: var(--r-sm);
  cursor: pointer;
}
.opcao-radio input{
  appearance: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid #6C746D; position: relative; flex: none;
}
.opcao-radio input::after{
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: #0B3D2E; transform: scale(.6); opacity: 0;
  transition: transform var(--d-ui, 200ms) var(--ease), opacity var(--d-ui, 200ms) var(--ease);
}
.opcao-radio input:checked{ border-color: #0B3D2E; }
.opcao-radio input:checked::after{ transform: scale(1); opacity: 1; }
.opcao-radio:has(input:checked){ background: #F1F4F2; }
.opcao-radio input:focus-visible{ box-shadow: 0 0 0 3px var(--anel-claro); }
fieldset.escolha[aria-invalid="true"] .opcao-radio input{ border-color: #A3302B; }

.consentimento{ font-size: var(--t-pequeno); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.consentimento label{ display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 44px; cursor: pointer; }
.consentimento input[type="checkbox"]{
  appearance: none; width: 20px; height: 20px; border-radius: var(--r-sm);
  border: 1px solid #6C746D; position: relative; flex: none;
}
.consentimento input[type="checkbox"]:checked{ background: #0B3D2E; border-color: #0B3D2E; }
.consentimento input[type="checkbox"]::after{
  content: ""; position: absolute; inset: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 L5.5 11 L12 3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
  opacity: 0; transition: opacity var(--d-ui-lento, 320ms) var(--ease);
}
.consentimento input[type="checkbox"]:checked::after{ opacity: 1; }
.consentimento input[type="checkbox"]:focus-visible{ box-shadow: 0 0 0 3px var(--anel-claro); }
.consentimento a{ text-decoration: underline; text-underline-offset: 0.25em; }
.nova-aba{ color: var(--tinta-suave, #556059); }
.consentimento .erro{ flex-basis: 100%; }

.armadilha{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.formulario__estado{ font-size: var(--t-pequeno); min-height: 1.2em; }
.formulario__acoes-falha{ display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; }
.formulario__acoes-falha a{ font-size: var(--t-pequeno); text-decoration: underline; text-underline-offset: 0.25em; }
.formulario noscript p{ font-size: var(--t-pequeno); color: var(--tinta-suave, #556059); }
.formulario button[type="submit"]{ align-self: flex-start; }
@media (max-width: 719px){ .formulario button[type="submit"]{ width: 100%; align-self: stretch; } }

.formulario__mensagem{
  white-space: pre-wrap; font-family: "Jost", sans-serif; font-size: var(--t-pequeno);
  background: #F1F4F2; border-radius: var(--r-md); padding: var(--sc-4);
  max-height: 16em; overflow-y: auto; margin-block: var(--sc-3);
}
.formulario__acoes{ display: flex; gap: var(--sc-3); flex-wrap: wrap; margin-block-end: var(--sc-2); }
.formulario__acoes-texto{ display: flex; gap: var(--sc-4); font-size: var(--t-pequeno); }
.formulario__acoes-texto a{ text-decoration: underline; text-underline-offset: 0.25em; }
.formulario__rotulo-mensagem{ font-size: var(--t-pequeno); font-weight: 500; margin-block-end: var(--sc-1); }

/* Formulário direto no chão (diagnostico.html, A10 DES-16): a própria página zera fundo/raio/sombra */
.formulario-secao--plana .folha{ background: transparent; border-radius: 0; box-shadow: none; padding-inline: 0; border-top: 1px solid var(--linha); padding-block-start: var(--sc-6); }

/* ============================================================ */
/* 5. Bloco de dados de paciente (05-DESIGN 8.9)                  */
/* ============================================================ */
.lgpd-simples{ max-inline-size: 62ch; }
.lgpd-simples ul{ display: flex; flex-direction: column; }
.lgpd-simples li{ padding-block: var(--sc-4); border-block-end: 1px solid var(--linha); }
.lgpd-simples li:first-child{ border-block-start: 1px solid var(--linha); }
.lgpd-simples h3{ font-size: var(--t-corpo); font-weight: 500; margin-block-end: var(--sc-1); }
.lgpd-simples p{ color: var(--tinta-suave); font-size: var(--t-corpo); }

/* ============================================================ */
/* 6. "Feito dentro da rotina de uma clínica" (05-DESIGN 8.10)    */
/* ============================================================ */
.rotina-clinica{ max-inline-size: 62ch; }
.rotina-clinica h2{ font-size: var(--t-h2); font-weight: 400; margin-block-end: var(--sc-4); }
.rotina-clinica p{ margin-block-end: var(--sc-2); }
.rotina-clinica .quem{ font-size: var(--t-pequeno); color: var(--tinta-suave); }

/* ============================================================ */
/* 7. Os dois caminhos (05-DESIGN 8.11)                           */
/* ============================================================ */
.caminhos{ display: grid; gap: var(--sc-6); grid-template-columns: 1fr; }
@media (min-width: 720px){ .caminhos{ grid-template-columns: 1fr 1fr; } }
.caminho{ display: block; text-decoration: none; color: inherit; }
.caminho__nome{
  font-size: var(--t-h3); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em;
  display: inline-flex; align-items: center; gap: var(--sc-2);
}
.caminho__seta.icone{ width: 16px; height: 16px; transition: transform var(--d-hover, 150ms) var(--ease); }
@media (hover: hover) and (pointer: fine){
  .caminho:hover .caminho__nome{ text-decoration-thickness: 2px; }
  .caminho:hover .caminho__seta{ transform: translateX(3px); }
}
.caminho__cena{ color: var(--tinta-suave); font-size: var(--t-corpo); margin-block-start: var(--sc-1); }
.autoexclusao{ font-size: var(--t-pequeno); color: var(--tinta-suave); margin-block-start: var(--sc-6); max-inline-size: 62ch; }

/* ============================================================ */
/* 8. Perguntas e dúvidas (05-DESIGN 8.12)                        */
/* ============================================================ */
.perguntas{ display: flex; flex-direction: column; }
.perguntas details{ border-block-end: 1px solid var(--linha); }
.perguntas details:first-child{ border-block-start: 1px solid var(--linha); }
.perguntas summary{
  list-style: none; cursor: pointer; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-3);
  font-size: var(--t-h3); font-weight: 500; padding-block: var(--sc-3);
}
.perguntas summary::-webkit-details-marker{ display: none; }
.perguntas summary .icone{ flex: none; }
.perguntas .sinal-mais, .perguntas .sinal-menos{ position: absolute; }
.perguntas details[open] .icone .tracos-mais .vertical{ opacity: 0; }
.perguntas .resposta{ max-inline-size: 62ch; padding-block-end: var(--sc-4); opacity: 0; animation: perguntas-entra var(--d-ui, 200ms) var(--ease) forwards; }
@keyframes perguntas-entra{ from{ opacity: 0; } to{ opacity: 1; } }

/* ============================================================ */
/* 9. Aprofundamento e próxima etapa (regiões mapa:)              */
/* ============================================================ */
.aprofundar, .proxima{ font-size: var(--t-pequeno); color: var(--tinta-suave); margin-block-start: var(--sc-4); }
.aprofundar a, .proxima a{ color: var(--tinta); text-decoration: underline; text-underline-offset: 0.25em; }

/* ============================================================ */
/* 10. Cromos por gramática (05-DESIGN 8.13), esqueleto            */
/* ============================================================ */
.traco-vital{ position: fixed; z-index: 40; pointer-events: none; inset-inline: 0; bottom: 0; height: 40px; }
@media (max-width: 859px){ .traco-vital{ display: none; } }
.traco-vital__repouso{ display: none; }

/* achado DES-08 (C3 P0): a trilha colava na borda da janela, sem respiro nenhum,
   numa placa cinza solta que não alinhava com o cabeçalho. Fundo transparente,
   padding com o mesmo gutter do envelope e uma linha divisória no lugar da placa. */
.trilha-jornada{ position: sticky; top: var(--cabecalho-h); inline-size: 13rem; flex: none; background: transparent; padding: var(--sc-6) var(--sc-4) var(--sc-6) var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem)); box-sizing: content-box; border-inline-end: 1px solid var(--linha, #DEE3E0); }
.trilha-jornada a{ display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--t-pequeno); }
.trilha-jornada a[aria-current="true"]{ font-weight: 500; }
.trilha-jornada a[aria-current="true"]::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0B3D2E; margin-inline-end: var(--sc-2); }

.divisor{ position: absolute; inset-block: 0; width: 1px; background: rgba(240,235,228,.4); }
.divisor__rotulo{ font-size: var(--t-pequeno); font-weight: 500; }

.folio{ writing-mode: vertical-rl; transform: rotate(180deg); color: var(--tinta-suave); font-size: var(--t-mini); }

/* ============================================================ */
/* 11. site/_lab/fundacao.html: utilitários só da folha interna   */
/* ============================================================ */
.lab-secao{ padding-block: var(--secao-compacta); }
.lab-amostra{ padding: var(--sc-4); border-radius: var(--r-md); margin-block: var(--sc-3); }
.lab-h1-amostra{ font-size: var(--t-h1); line-height: 1.07; letter-spacing: -0.02em; }
.lab-h2-amostra{ font-size: var(--t-h2); line-height: 1.14; letter-spacing: -0.015em; }
.lab-link-esm{ color: inherit; }
.lab-link-secundario{ display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-corpo); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; }
.lab-microcopy-amostra{ display: block; font-size: var(--t-pequeno); color: var(--tinta-suave, #556059); max-inline-size: 46ch; margin-block-start: var(--sc-2); }
.lab-cabecalho-esmeralda{ position: relative; }

/* listas de navegação do cabeçalho e do rodapé sem marcador (os <ul> dos blocos não têm classe, e o reset de base.css só cobre ul[class]) */
.menu-linha ul, .menu__painel ul, .rodape__nav ul{ list-style: none; margin: 0; padding: 0; }