/* Landing do GLCP Forms. A estrela é a folha do formulário na primeira tela, com pauta,
   letra de caneta e a resposta caindo no painel; o resto da página fica quieto. */

.topo, main > .secao, .hero, .fecho, .rodape {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
}

/* ── Topo ── */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px 0; }
.topo-acoes { display: flex; gap: .4rem; }
.topo-acoes .botao { min-height: 40px; padding-block: .4em; }

/* ── Primeira tela ── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 6rem);
}
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); font-weight: 700; max-width: 14ch; }
.hero-sub { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--suave); max-width: 52ch; margin: 1.4rem 0 2rem; }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.botao-grande { min-height: 54px; padding-inline: 1.5em; font-size: 1.08rem; }
.link-seco { font-weight: 700; }
.hero-nota { color: var(--suave); font-size: .95rem; margin: 1.6rem 0 0; max-width: 46ch; }

/* ── A demonstração ── */
.demo { position: relative; display: grid; gap: 14px; }

.folha {
  position: relative;
  background:
    linear-gradient(90deg, transparent 46px, #f3b9b4 46px, #f3b9b4 47.5px, transparent 47.5px),
    var(--folha);
  border-radius: var(--raio-folha);
  box-shadow: var(--sombra-folha);
  padding: 26px 26px 24px 66px;
  transform: rotate(-.8deg);
}
.folha-topo { border-bottom: 2px solid var(--grafite); padding-bottom: 12px; margin-bottom: 6px; }
.folha-titulo { font: 700 1.2rem/1.2 var(--titulo); margin: 0; }
.folha-sub { margin: .25rem 0 0; color: var(--suave); font-size: .92rem; }

.folha-campos { list-style: none; margin: 0; padding: 0; }
.folha-campo {
  display: grid; grid-template-columns: 9.5rem 1fr; align-items: end; gap: .8rem;
  min-height: 52px; border-bottom: 1.5px solid var(--pauta); padding-bottom: 4px;
}
.folha-rotulo { font-size: .86rem; font-weight: 700; color: var(--suave); padding-bottom: 6px; }
.folha-valor { font: 500 1.6rem/1.15 var(--mao); color: var(--tinta); min-height: 1.2em; }
.folha-marcado { box-shadow: inset 0 -.55em 0 var(--marca-texto); }

.folha-campo.entrando { animation: entra .45s ease-out both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.folha-enviar { margin: 18px 0 0; }
.folha-enviar span {
  display: inline-block; padding: .5em 1.1em; border-radius: 8px;
  background: var(--tinta); color: #fff; font-weight: 700; font-size: .95rem;
}
.folha-enviar.apertado span { animation: aperta .35s ease-out; }
@keyframes aperta { 50% { transform: scale(.94); background: var(--tinta-escura); } }

.paleta { padding: 0 4px; }
.paleta-titulo { margin: 0 0 .45rem; font-size: .9rem; font-weight: 700; color: var(--suave); }
.paleta-botoes { display: flex; flex-wrap: wrap; gap: .45rem; }
.paleta-botoes button {
  min-height: 38px; padding: .3em .85em; border-radius: 999px;
  border: 1.5px dashed var(--pauta-forte); background: transparent; color: var(--tinta);
  font: 700 .9rem/1 var(--letra); cursor: pointer;
}
.paleta-botoes button::before { content: "+ "; }
.paleta-botoes button:hover { border-style: solid; border-color: var(--tinta); background: var(--tinta-clara); }
.paleta-botoes button[disabled] { opacity: .4; cursor: default; border-style: dashed; background: transparent; }

.chegada { background: var(--grafite); color: #fff; border-radius: var(--raio); padding: 14px 16px; }
.chegada-titulo { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; color: #aeb9d6; }
.chegada-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chegada-lista li {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .8rem; align-items: center;
  padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-size: .92rem;
}
.chegada-hora { color: #aeb9d6; font-variant-numeric: tabular-nums; }
.chegada-form { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chegada-quem { font-weight: 700; }
.chegada-lista li.nova { animation: chega .6s ease-out both; }
@keyframes chega { from { opacity: 0; transform: translateY(-10px); background: var(--marca-texto); } }

/* ── Seções ── */
.secao { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1.5px solid var(--pauta); }
.secao h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; max-width: 22ch; }
.secao-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: 2.2rem; }
.secao-cabeca p { margin: 0; color: var(--suave); max-width: 56ch; }

.passos { list-style: none; counter-reset: passo; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.passos li { counter-increment: passo; border-top: 3px solid var(--grafite); padding-top: 1rem; }
.passos li::before {
  content: counter(passo); display: block; margin-bottom: .6rem;
  font: 700 3.2rem/1 var(--titulo); color: var(--tinta);
}
.passos h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.passos p { margin: 0; color: var(--suave); }

.tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--pauta); }
.tipos li { display: grid; gap: .2rem; padding: 1rem 1rem 1rem 0; border-bottom: 1.5px solid var(--pauta); }
.tipo-nome { font-weight: 700; }
.tipo-amostra { font: 500 1.35rem/1.2 var(--mao); color: var(--tinta); }

.planilha-rolagem { overflow-x: auto; background: var(--folha); border-radius: var(--raio); box-shadow: var(--sombra-folha); }
.planilha { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.planilha th, .planilha td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--pauta); white-space: nowrap; }
.planilha th { font-weight: 700; background: var(--tinta-clara); color: var(--tinta-escura); }
.planilha th:nth-child(4), .planilha td:nth-child(4) { background: rgba(255, 225, 77, .28); }
.planilha tbody tr:last-child td { border-bottom: 0; }
.planilha-nota { color: var(--suave); font-size: .92rem; margin: .9rem 0 0; }

.secao-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 5rem; }
.secao-duas h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 1.3rem; }
.lista-check, .lista-usos { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.lista-check li { position: relative; padding-left: 2rem; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .25em; width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--tinta); border-radius: 4px;
  background: linear-gradient(135deg, transparent 45%, var(--tinta) 45% 60%, transparent 60%);
}
.lista-usos li { padding-bottom: .8rem; border-bottom: 1.5px solid var(--pauta); }

.secao-perguntas h2 { margin-bottom: 1.6rem; }
.secao-perguntas details { border-bottom: 1.5px solid var(--pauta); max-width: 760px; }
.secao-perguntas summary { cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; font-weight: 700; font-size: 1.1rem; list-style: none; position: relative; }
.secao-perguntas summary::-webkit-details-marker { display: none; }
.secao-perguntas summary::after { content: "+"; position: absolute; right: .3rem; top: .75rem; font: 500 1.6rem/1 var(--titulo); color: var(--tinta); }
.secao-perguntas details[open] summary::after { content: "−"; }
.secao-perguntas details p { margin: 0 0 1.2rem; color: var(--suave); max-width: 62ch; }

.fecho { text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1.5px solid var(--pauta); }
.fecho h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 20ch; margin: 0 auto 1.8rem; }

.rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 2rem 0 3rem; border-top: 1.5px solid var(--pauta); color: var(--suave); font-size: .9rem; }
.rodape p { margin: 0; }

/* ── Celular ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { max-width: 16ch; }
  .secao-cabeca { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; gap: 1.6rem; }
  .tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao-duas { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topo-acoes .botao-discreto { display: none; }
  .folha { padding: 20px 16px 18px 40px; transform: none; background: linear-gradient(90deg, transparent 26px, #f3b9b4 26px, #f3b9b4 27.5px, transparent 27.5px), var(--folha); }
  .folha-campo { grid-template-columns: 1fr; gap: 0; padding-top: 8px; }
  .folha-rotulo { padding-bottom: 0; }
  .tipos { grid-template-columns: 1fr; }
  .chegada-lista li { grid-template-columns: 2.8rem 1fr; }
  .chegada-quem { grid-column: 2; }
  .botao-grande { width: 100%; }
}

/* ── Página de privacidade ── */
.texto-legal { width: min(860px, 100% - 32px); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) 0 4rem; }
.texto-legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.texto-legal h2 { font-size: 1.4rem; margin: 2.4rem 0 .8rem; }
.texto-legal p { max-width: 70ch; }
.texto-legal-data { color: var(--suave); margin-top: .4rem; }
.aviso-modelo { background: rgba(255, 225, 77, .35); border: 1.5px dashed var(--grafite); color: var(--grafite); }
.tabela-legal { min-width: 640px; font-size: .92rem; }
.tabela-legal th, .tabela-legal td { white-space: normal; vertical-align: top; }
.tabela-legal th:nth-child(4), .tabela-legal td:nth-child(4) { background: none; }