/* Procuro um mentor — "do solo à manhã".
   A página começa na cor da terra e termina na luz do dia: o mesmo caminho da história. */
:root {
  --solo: #2A211B;      /* terra escura: o começo */
  --raiz: #33281F;
  --tronco: #3E3027;
  --argila: #8A6A52;    /* barro: o meio do caminho */
  --aurora: #F0B467;    /* luz da manhã: o acento */
  --nevoa: #ECE9E2;     /* manhã clara */
  --dia: #F6F5F1;
  --folha: #56643F;     /* o que cresceu */
  --luz: #EFE5D5;       /* texto sobre a terra */
  --luz-2: #C4B39C;     /* texto secundário sobre a terra */
  --tinta: #2A211B;     /* texto sobre a manhã */
  --tinta-2: #66503F;   /* secundário sobre a manhã */
  --linha-clara: #D6CEC1;
  --erro: #9B2F22;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --caixa: 70rem;
  --respiro: clamp(4rem, 10vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--solo);
  color: var(--luz);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--aurora); outline-offset: 3px; border-radius: 4px; }
.secao.construi :focus-visible, .troca :focus-visible, .duvidas :focus-visible,
.apresentacao :focus-visible, .fecho :focus-visible { outline-color: var(--argila); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--aurora); color: var(--solo); padding: 10px 16px; border-radius: 8px; }
.pular:focus { top: 12px; }

.caixa { width: 100%; max-width: var(--caixa); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .caixa { padding-inline: 32px; } }

.secao { padding-block: var(--respiro); }
.secao h2 { font-size: clamp(1.75rem, 3.2vw + 1rem, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; font-weight: 380; }
.texto { max-width: 36rem; margin-top: 1.1rem; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem; border-radius: 999px; border: 0;
  font: 600 1.02rem/1.2 var(--serif); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.botao:active { transform: translateY(1px); }
.botao-luz { background: var(--aurora); color: var(--solo); }
.botao-luz:hover { background: #F5C483; }
.botao-escuro { background: var(--solo); color: #F4DDB8; }
.botao-escuro:hover { background: #45362B; }
.link-claro { color: var(--luz-2); text-underline-offset: .25em; padding: .6rem 0; }
.link-claro:hover { color: var(--luz); }

/* ---------- Abertura: o horizonte ---------- */
.abertura { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 12vw, 7rem); }
.abertura-texto { position: relative; z-index: 2; }
.assinatura { color: var(--aurora); font-style: italic; font-size: 1.15rem; margin-bottom: 1.25rem; }
.abertura h1 {
  font-size: clamp(2.05rem, 5.2vw + 1rem, 4.4rem);
  line-height: 1.1; letter-spacing: -0.018em; font-weight: 330;
  max-width: 17em; color: #F6EDE0;
}
.lide { max-width: 34rem; margin-top: 1.6rem; color: var(--luz); font-size: 1.12rem; }
.abertura-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2.1rem; }

.horizonte { position: relative; height: clamp(170px, 26vw, 260px); margin-top: clamp(2rem, 6vw, 3.5rem); }
.horizonte::before { /* clarão do céu, sobe junto com o sol */
  content: ""; position: absolute; inset: auto 0 38% 0; height: 140%;
  background: radial-gradient(60% 70% at 50% 100%, rgba(240,180,103,.30), rgba(240,180,103,.08) 45%, transparent 70%);
  opacity: 1; transition: opacity 2.6s ease;
}
.sol {
  position: absolute; left: 50%; bottom: 38%;
  width: clamp(110px, 18vw, 190px); aspect-ratio: 1; margin-left: calc(clamp(110px, 18vw, 190px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, #FBD9A0 0%, var(--aurora) 45%, #D88E48 100%);
  box-shadow: 0 0 60px 18px rgba(240,180,103,.28);
}
.horizonte .linha { /* o chão: tudo abaixo dele é terra */
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: var(--raiz);
  border-top: 1px solid rgba(240,180,103,.65);
  z-index: 1;
}
.marcos { position: absolute; left: 0; right: 0; bottom: calc(38% - 3.1rem); z-index: 2; display: flex; justify-content: space-between; color: var(--luz-2); font-size: .95rem; }
.marcos strong { display: block; color: var(--luz); font-weight: 500; font-size: 1.5rem; line-height: 1.1; }
.marcos span:last-child { text-align: right; }

/* O único movimento da página: o sol nasce entre o 29 e o 30. */
.js .horizonte .sol { transform: translateY(70%); }
.js .horizonte::before { opacity: 0; }
.js.pronto .horizonte .sol { transform: translateY(0); transition: transform 2.6s cubic-bezier(.22,.7,.2,1) .25s; }
.js.pronto .horizonte::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .horizonte .sol, .js.pronto .horizonte .sol { transform: none; transition: none; }
  .js .horizonte::before { opacity: 1; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Bilhete: a voz dele, logo depois do nascer do sol ---------- */
.bilhete { background: var(--raiz); padding: clamp(4.5rem, 9vw, 6.5rem) 0 0; }
.bilhete .caixa { max-width: 52rem; margin-left: max(0px, calc((100% - var(--caixa)) / 2)); }
.bilhete p { font-size: clamp(1.45rem, 2.4vw + 1rem, 2.25rem); line-height: 1.25; font-weight: 340; letter-spacing: -0.008em; }
.bilhete .bilhete-1 { color: #F6EDE0; }
.bilhete .bilhete-2 { color: var(--luz-2); font-style: italic; margin-top: .5rem; }
.bilhete .bilhete-3 { color: var(--aurora); margin-top: 1.4rem; font-weight: 420; }

/* ---------- História ---------- */
.historia { background: var(--raiz); padding-top: calc(var(--respiro) * .8); }
.linha-tempo { list-style: none; margin: 2.6rem 0 0; padding: 0; position: relative; max-width: 46rem; }
.linha-tempo::before { /* a raiz que cresce para a luz */
  content: ""; position: absolute; left: 7px; top: .5rem; bottom: 2.5rem; width: 2px;
  background: linear-gradient(to bottom, var(--argila), var(--aurora));
}
.linha-tempo li { position: relative; padding: 0 0 2.2rem 2.4rem; }
.linha-tempo li::before {
  content: ""; position: absolute; left: 0; top: .45rem; width: 16px; height: 16px; border-radius: 50%;
  background: var(--raiz); border: 2px solid var(--argila);
}
.linha-tempo li:nth-last-child(2)::before { border-color: var(--aurora); }
.linha-tempo .ano { display: block; color: var(--aurora); font-size: .95rem; font-variant-numeric: tabular-nums lining-nums; }
.linha-tempo h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 500; margin: .2rem 0 .35rem; color: #F6EDE0; }
.linha-tempo p { color: var(--luz-2); max-width: 38rem; }
.linha-tempo .futuro { padding-bottom: 0; }
.linha-tempo .futuro::before { background: var(--raiz); border: 2px dashed var(--aurora); }
.linha-tempo .futuro h3 { font-style: italic; }

@media (min-width: 900px) {
  .historia .caixa { display: grid; grid-template-columns: 20rem 1fr; gap: 0 4rem; align-items: start; }
  .historia-intro { position: sticky; top: 2.5rem; }
  .historia .linha-tempo { margin-top: 0; }
}

/* ---------- Números ---------- */
.numeros { background: var(--tronco); }
.grade-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.25rem; margin: 2.6rem 0 0; }
.grade-numeros div { border-top: 1px solid rgba(196,179,156,.35); padding-top: 1rem; }
.grade-numeros dt { font-size: clamp(1.7rem, 4.6vw + .5rem, 3rem); line-height: 1.05; font-weight: 340; color: #F6EDE0; letter-spacing: -0.01em; white-space: nowrap; }
.grade-numeros dd { margin: .55rem 0 0; color: var(--luz-2); font-size: .98rem; line-height: 1.5; }
@media (min-width: 900px) { .grade-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.prova { margin-top: 3rem; max-width: 34rem; font-style: italic; color: var(--luz); font-size: 1.12rem; }

/* ---------- Amanhecer: da terra para a manhã ---------- */
.amanhecer {
  background: linear-gradient(to bottom, var(--tronco) 0%, var(--tronco) 60%, #6A4C38 71%, #B9845A 82%, #E2BC8E 91%, var(--nevoa) 100%);
  padding-bottom: calc(var(--respiro) * 3);
}
.citacao { margin: 0; }
.citacao p { font-size: clamp(2rem, 5vw + 1rem, 4rem); line-height: 1.12; font-style: italic; font-weight: 340; color: #F6EDE0; max-width: 14em; letter-spacing: -0.015em; }
.amanhecer .texto { color: var(--luz); font-size: 1.12rem; margin-top: 1.6rem; }

/* ---------- Manhã: o que eu construí ---------- */
.construi, .troca, .duvidas { background: var(--nevoa); color: var(--tinta); }
.construi { padding-top: calc(var(--respiro) * .4); }
.construi .texto, .duvidas .texto { color: var(--tinta-2); }
.ferramentas { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 12px; }
.ferramentas li { background: var(--dia); border: 1px solid var(--linha-clara); border-radius: 16px; padding: 1.25rem 1.3rem 1.35rem; }
.ferramentas h3 { font-size: 1.14rem; font-weight: 600; line-height: 1.3; }
.ferramentas p { color: var(--tinta-2); margin-top: .35rem; font-size: 1rem; line-height: 1.55; }
.ferramentas .largo { background: var(--solo); border-color: var(--solo); color: var(--luz); }
.ferramentas .largo h3 { color: #F6EDE0; font-size: 1.3rem; font-weight: 500; }
.ferramentas .largo p { color: var(--luz-2); }
@media (min-width: 720px) {
  .ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ferramentas .largo { grid-column: 1 / -1; padding: 1.6rem 1.8rem; }
}

/* ---------- Pedido e troca ---------- */
.troca { padding-top: calc(var(--respiro) * .5); }
.troca-grade { display: grid; gap: 14px; }
.peco { background: var(--solo); color: var(--luz); border-radius: 20px; padding: 1.8rem 1.4rem 2rem; }
.peco h3, .ofereco h3 { font-size: 1.05rem; font-weight: 500; font-style: italic; }
.peco h3 { color: var(--aurora); }
.pedido-grande { font-size: clamp(1.7rem, 3vw + 1rem, 2.5rem); line-height: 1.15; font-weight: 360; color: #F6EDE0; margin: .5rem 0 1.4rem; letter-spacing: -0.01em; }
.peco strong { color: #F6EDE0; font-weight: 600; }
.peco-nota { margin-top: 1.4rem; color: var(--luz-2); font-size: .98rem; }
.peco ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.peco li { padding-left: 1.4rem; position: relative; color: var(--luz); }
.peco li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 2px; background: var(--aurora); }
.ofereco { border: 2px dashed var(--argila); border-radius: 20px; padding: 1.6rem 1.4rem 1.8rem; display: grid; gap: .9rem; align-content: start; }
.ofereco h3 { color: var(--folha); font-size: 1.4rem; font-style: normal; }
.marcador { justify-self: start; background: #F7E2B9; color: #6B3F12; font-size: .9rem; font-weight: 600; padding: .2rem .7rem; border-radius: 6px; }
@media (min-width: 900px) {
  .troca-grade { grid-template-columns: 1.15fr 1fr; gap: 18px; }
  .peco { padding: 2.4rem 2.4rem 2.6rem; }
  .ofereco { padding: 2.2rem; }
}

/* ---------- Dúvidas ---------- */
.duvidas { padding-top: calc(var(--respiro) * .4); }
.lista-duvidas { margin-top: 2rem; max-width: 46rem; border-top: 1px solid var(--linha-clara); }
.lista-duvidas details { border-bottom: 1px solid var(--linha-clara); }
.lista-duvidas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 56px; padding: .9rem 0; font-size: 1.12rem; font-weight: 500;
}
.lista-duvidas summary::-webkit-details-marker { display: none; }
.lista-duvidas summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--argila), var(--argila)) center / 100% 2px no-repeat,
              linear-gradient(var(--argila), var(--argila)) center / 2px 100% no-repeat;
  transition: transform .25s ease;
}
.lista-duvidas details[open] summary::after { transform: rotate(45deg); }
.lista-duvidas details p { padding: 0 2rem 1.2rem 0; color: var(--tinta-2); max-width: 38rem; }

/* ---------- Formulário ---------- */
.apresentacao { background: var(--dia); color: var(--tinta); }
.form-grade { display: grid; gap: 2rem; }
.form-intro .texto { color: var(--tinta-2); }
.aviso { margin-top: 1rem; max-width: 30rem; color: var(--tinta); font-size: .98rem; padding-left: .9rem; border-left: 3px solid var(--aurora); }
@media (min-width: 960px) {
  .form-grade { grid-template-columns: 22rem minmax(0, 36rem); gap: 5rem; justify-content: start; }
  .form-intro { position: sticky; top: 2rem; align-self: start; }
}
.formulario { display: grid; gap: 1.35rem; min-width: 0; }
.campo { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo > label, legend { display: block; font-weight: 600; font-size: 1.02rem; margin-bottom: .45rem; padding: 0; line-height: 1.4; }
.opcional { font-weight: 400; color: var(--tinta-2); }
input[type=text], input[type=tel], input[type=email], textarea {
  width: 100%; min-height: 50px; padding: .7rem .9rem;
  font: 400 1.0625rem/1.45 var(--serif); color: var(--tinta);
  background: #fff; border: 1.5px solid #BFB3A3; border-radius: 12px;
  transition: border-color .15s ease;
}
textarea { resize: vertical; min-height: 120px; }
input::placeholder { color: #9A8B7B; }
input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(138,106,82,.35); outline-offset: 0; border-color: var(--argila); }
.ajuda { font-size: .93rem; color: var(--tinta-2); margin-top: .35rem; line-height: 1.45; }
.erro { font-size: .95rem; color: var(--erro); font-weight: 600; margin-top: .35rem; line-height: 1.4; }
.erro:empty { display: none; }
[aria-invalid="true"] { border-color: var(--erro) !important; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .5rem 1rem;
  border: 1.5px solid #BFB3A3; border-radius: 999px; background: #fff; cursor: pointer; font-size: 1rem; line-height: 1.3;
}
.opcao:has(input:checked) { border-color: var(--solo); background: #F3E6D0; }
.opcao input, .aceite input { width: 20px; height: 20px; margin: 0; accent-color: var(--solo); flex: none; }
.campo-outra { margin-top: .9rem; }
.aceite { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: 1rem; line-height: 1.5; }
.aceite input { margin-top: .2rem; }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enviar { width: 100%; min-height: 56px; font-size: 1.08rem; }
.enviar[disabled] { opacity: .7; cursor: progress; }
@media (min-width: 720px) { .enviar { width: auto; justify-self: start; padding-inline: 2.2rem; } }
.privacidade { margin-top: -.6rem; }
.resumo-erros { border: 2px solid var(--erro); border-radius: 12px; padding: 1rem 1.1rem; background: #FBEDEA; }
.resumo-titulo { font-weight: 700; color: var(--erro); }
.resumo-erros ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.resumo-erros a { color: var(--erro); }
.resumo-erros:focus-visible { outline-color: var(--erro); }
.obrigado { border-radius: 20px; background: var(--nevoa); padding: 2rem 1.5rem; border-left: 5px solid var(--folha); }
.obrigado h3 { font-size: 1.6rem; font-weight: 400; }
.obrigado p { margin-top: .6rem; color: var(--tinta-2); max-width: 32rem; }

/* ---------- Fecho ---------- */
.fecho { background: var(--dia); color: var(--tinta); padding: 0 0 var(--respiro); }
.fecho .caixa { border-top: 1px solid var(--linha-clara); padding-top: calc(var(--respiro) * .7); }
.fecho p { font-size: clamp(1.6rem, 3vw + 1rem, 2.6rem); line-height: 1.2; font-style: italic; font-weight: 340; max-width: 20em; letter-spacing: -0.01em; }
.fecho .fecho-antes { font-size: 1.08rem; font-style: normal; font-weight: 400; color: var(--tinta-2); margin-bottom: 1rem; }
.fecho .botao { margin-top: 2rem; }
.rodape { background: var(--dia); color: var(--tinta-2); font-size: .92rem; padding: 0 0 2.5rem; }