/* Landing do Cresce Comigo.
 *
 * Nenhuma cor, familia de fonte, raio ou espaco escrito direto: tudo sai de
 * tokens.css por var(). Se algo aqui precisar de um valor que nao existe la, o
 * caminho e adicionar o token — nunca escrever o valor nesta folha.
 */

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

body, h1, h2, h3, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

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

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo-tam);
  font-weight: var(--t-corpo-peso);
  line-height: var(--t-corpo-altura);
  overflow-x: hidden;
}

/* --- tipografia ----------------------------------------------------------- */

h1, h2, h3 { font-family: var(--fonte-display); }

h1 {
  font-size: var(--t-hero-tam);
  font-weight: var(--t-hero-peso);
  letter-spacing: var(--t-hero-espaco);
  line-height: var(--t-hero-altura);
  text-wrap: balance;
}

h2 {
  font-size: var(--t-secao-tam);
  font-weight: var(--t-secao-peso);
  letter-spacing: var(--t-secao-espaco);
  line-height: 1.15;
  text-wrap: balance;
}

h3 {
  font-size: var(--t-atividade-tam);
  font-weight: var(--t-atividade-peso);
  line-height: 1.3;
}

.rotulo {
  display: inline-block;
  font-size: var(--t-rotulo-tam);
  font-weight: var(--t-rotulo-peso);
  letter-spacing: var(--t-rotulo-espaco);
  text-transform: var(--t-rotulo-caixa);
  color: var(--tinta-suave);
}

.legenda {
  font-size: var(--t-legenda-tam);
  font-weight: var(--t-legenda-peso);
  color: var(--tinta-suave);
}

.mono { font-family: var(--fonte-mono); }

strong { font-weight: 700; }
em { font-style: italic; }

/* --- estrutura ------------------------------------------------------------ */

.envolve {
  width: 100%;
  max-width: var(--largura-pagina);
  margin-inline: auto;
  padding-inline: var(--espaco-4);
}

/* Medida de leitura: 65 caracteres. Vale para texto corrido, nunca para grade. */
.prosa { max-width: var(--largura-texto); }
.prosa > * + * { margin-top: var(--espaco-4); }

/* Espacamento vertical padrao entre secoes.
 *
 * Duas secoes vizinhas somam os dois paddings, entao o padding de cada uma e
 * METADE do respiro que se quer ver entre elas. Com 128px de cada lado, o vao
 * entre o bloco 4 e o bloco 5 dava 256px de nada — area vazia maior que o
 * proprio espacamento padrao.
 *
 * Secao de cor cheia e excecao: ali o padding nao e area vazia, e a faixa de
 * cor respirando, e ela precisa ser generosa. Ver .secao--uva. */
.secao { padding-block: var(--espaco-7); }

/* --- ritmo de secao -------------------------------------------------------- *
 * Quatro texturas, nunca a mesma duas vezes seguidas: papel, papel-fundo, uva
 * cheia e a cor da faixa (so na regua, que e dinamica). O que a pagina tinha
 * antes — card branco sobre cinza, sempre — nao e ritmo, e repeticao.          */

.secao--fundo { background: var(--papel-fundo); }

.secao--uva {
  background: var(--institucional);
  color: var(--institucional-texto);
  padding-block: var(--espaco-8);
}

.secao--uva .legenda,
.secao--uva .rotulo,
.secao--uva .item-texto { color: inherit; opacity: 0.82; }

/* Na secao de cor cheia o botao inverte: papel solido com texto uva. Botao uva
   sobre fundo uva sumiria. */
.secao--uva .botao {
  background: var(--papel);
  color: var(--institucional);
}

/* --- foco ----------------------------------------------------------------- *
 * Visivel sempre, e nunca removido. A mae que navega por teclado precisa saber
 * onde esta — e o marcador da regua so e operavel por teclado se isto existir. */

:focus-visible {
  outline: 3px solid var(--institucional);
  outline-offset: 2px;
  border-radius: var(--espaco-1);
}

/* Sobre uva, o anel uva sumiria. */
.secao--uva :focus-visible,
.regua :focus-visible { outline-color: var(--papel); }

/* --- botao ---------------------------------------------------------------- */

.botao {
  display: block;
  width: 100%;
  padding: var(--espaco-4) var(--espaco-5);
  border: 0;
  border-radius: var(--raio-botao);
  background: var(--institucional);
  color: var(--institucional-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo-tam);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicao), filter var(--transicao);
}

.botao:hover { filter: brightness(1.08); }
.botao:active { transform: translateY(1px); }

.sob-botao {
  margin-top: var(--espaco-3);
  font-size: var(--t-legenda-tam);
  color: var(--tinta-suave);
}

.secao--uva .sob-botao { color: inherit; opacity: 0.82; }

/* --- pill ----------------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-pill);
  background: var(--pill-cor, var(--papel-fundo));
  color: var(--pill-texto, var(--tinta));
  font-size: var(--t-rotulo-tam);
  font-weight: var(--t-rotulo-peso);
  letter-spacing: var(--t-rotulo-espaco);
  text-transform: var(--t-rotulo-caixa);
}

/* --- topo ----------------------------------------------------------------- */

.topo { padding-block: var(--espaco-7) var(--espaco-6); }

.chapeu {
  font-size: var(--t-rotulo-tam);
  font-weight: var(--t-rotulo-peso);
  letter-spacing: var(--t-rotulo-espaco);
  text-transform: var(--t-rotulo-caixa);
  color: var(--institucional);
  margin-bottom: var(--espaco-5);
}

.topo h1 { margin-bottom: var(--espaco-5); }

.sub {
  max-width: var(--largura-texto);
  font-size: var(--t-atividade-tam);
  font-weight: 400;
  color: var(--tinta-suave);
  margin-bottom: var(--espaco-6);
}

.topo-acao { max-width: 26rem; }

/* A arte do hero so existe onde sobra coluna. Abaixo de 1024 o hero e texto, e
   a cor vem da regua logo em seguida. */
.topo-arte { display: none; }

/* ============================================================================
   A REGUA DE CRESCIMENTO — o heroi da pagina
   ============================================================================
   Full-bleed, sem card, e o fundo da secao inteira e a cor da faixa em que o
   marcador esta. E o unico lugar onde a interface pode ser ousada; todo o resto
   fica quieto.                                                                */

.regua {
  --faixa-atual: var(--papel-fundo);
  --faixa-atual-texto: var(--tinta);

  background: var(--faixa-atual);
  color: var(--faixa-atual-texto);
  padding-block: var(--espaco-7);
  transition: background-color var(--transicao-fundo), color var(--transicao-fundo);
}

.regua-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-4);
  margin-bottom: var(--espaco-6);
}

.regua-topo .rotulo { flex: none; color: inherit; opacity: 0.75; }

.regua-idade {
  font-family: var(--fonte-display);
  font-size: var(--t-secao-tam);
  font-weight: 700;
  letter-spacing: var(--t-secao-espaco);
  white-space: nowrap;
}

/* Respiro nas duas pontas: as marcas de ano 1 e 5 nunca encostam na borda da
   viewport. Somado ao meio marcador de recuo interno, a folga minima e de 50px
   no celular e 80px no desktop. */
.regua-corpo { padding-inline: var(--regua-respiro); }

.regua-pista {
  position: relative;
  height: var(--regua-pista);
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

/* O trilho vive sobre uma prateleira de papel. Sem ela, a faixa ativa some
   dentro do fundo da secao, que e exatamente a mesma cor. */
.regua-trilho {
  position: relative;
  width: 100%;
  height: var(--regua-trilho);
  border-radius: var(--raio-pill);
  background: var(--papel);
  outline: var(--espaco-1) solid var(--papel);
}

/* As faixas de cor ficam recuadas meio marcador de cada lado. E esse recuo que
   deixa o marcador parar exatamente na borda interna do trilho, alinhado com o
   inicio da zona hachurada, em vez de sair metade para fora. */
.regua-faixas {
  position: absolute;
  inset: 0 calc(var(--regua-marcador) / 2);
}

/* Cada faixa e uma PASTILHA sobre a prateleira de papel, nunca um trecho
 * pintado do trilho. A folga em cima e embaixo, mais os 3px de papel nas
 * laterais, garantem que a banda esteja cercada de papel pelos quatro lados.
 *
 * Esse cerco e o que resolve o caso mais duro: quando a faixa e a ativa, o
 * fundo da secao inteira e exatamente a cor dela, e uma banda encostada na
 * borda do trilho vira um furo — a cor da banda e a cor do fundo se juntam por
 * cima e por baixo, e o olho le buraco, nao banda. */
.regua-zona {
  position: absolute;
  top: var(--regua-faixa-folga);
  bottom: var(--regua-faixa-folga);
  border-inline: 3px solid var(--papel);
  border-radius: var(--raio-pill);
  transition: top var(--transicao), bottom var(--transicao);
}

/* A ativa e mais alta que as outras — e continua com papel em volta. */
.regua-zona--ativa {
  top: var(--regua-faixa-folga-ativa);
  bottom: var(--regua-faixa-folga-ativa);
}

/* A zona antes da idade minima nao ganha textura nenhuma: fica no papel do
 * trilho mesmo. Ja teve uma hachura em carmim aqui, removida por reprovar duas
 * das tres condicoes da excecao de textura funcional do brief — a opacidade
 * pintava um rosa em vez de carmim, e no estado padrao nada na tela explicava
 * o que a listra queria dizer. Aviso de seguranca sem legenda e enfeite com
 * cara de alerta.
 *
 * O bloqueio continua inconfundivel quando acontece: a secao inteira vai para
 * carmim, o marcador troca de cor e a mensagem de engasgo aparece por extenso. */

/* --frac (0 a 1) vem do JS; --frac-min e a posicao da primeira idade valida.
 *
 * A posicao livre poe o CENTRO do marcador sobre a fronteira do mes, que e o
 * que mantem o marcador em sincronia com as pastilhas no meio da regua. Mas o
 * marcador e muito mais largo que um mes: na primeira idade valida esse centro
 * deixa metade dele em cima do papel anterior a menta, e le como "fora do
 * programa" justamente aos 12 meses. Na outra ponta, aos 59, ele vaza para
 * depois da tangerina.
 *
 * Os limites resolvem as duas pontas sem mexer no meio: aos 12 a borda esquerda
 * encosta na menta, aos 59 a direita encosta no fim da tangerina. Sao os unicos
 * meses em que a posicao e presa — no interior o centro segue exato. */
.regua-marcador {
  position: absolute;
  top: 50%;
  --pos: calc((100% - var(--regua-marcador)) * var(--frac, 0));
  --pos-menta: calc(var(--regua-marcador) / 2 + (100% - var(--regua-marcador)) * var(--frac-min, 0));
  --pos-fim: calc(100% - var(--regua-marcador) * 1.5);
  left: clamp(var(--pos-menta), var(--pos), var(--pos-fim));
  width: var(--regua-marcador);
  height: var(--regua-marcador);
  margin-top: calc(var(--regua-marcador) / -2);
  border: 5px solid var(--tinta);
  border-radius: var(--raio-pill);
  background: var(--papel);
  cursor: grab;
  transition: left var(--transicao-marcador), border-color var(--transicao);
}

/* As marcas de ano acompanham as faixas, nao o trilho: margem, nao padding —
   porcentagem de filho absoluto resolve contra a caixa de padding, entao
   padding aqui nao recuaria nada. */
.regua-marcas { margin-inline: calc(var(--regua-marcador) / 2); }

/* A marca de lapis no batente da porta: um risco vertical atravessando a regua. */
.regua-marcador::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--regua-pista) / -2 + var(--regua-marcador) / 2);
  height: var(--regua-pista);
  width: 3px;
  margin-left: -1.5px;
  background: var(--tinta);
  opacity: 0.28;
}

.regua-marcador.sem-animacao { transition: border-color var(--transicao); }
.arrastando .regua-marcador { cursor: grabbing; }

/* Bloqueado, o marcador fica INTEIRO antes da menta: abaixo da idade minima ele
   nunca encosta na primeira faixa valida, nem de raspao. */
.esta-bloqueada .regua-marcador {
  border-color: var(--alerta);
  left: min(var(--pos), calc(var(--pos-menta) - var(--regua-marcador)));
}
.esta-bloqueada .regua-marcador::before { background: var(--alerta); opacity: 0.5; }

/* O unico momento de celebracao visual do produto: cruzar a divisoria. */
@keyframes cruzou {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.regua-marcador.cruzou { animation: cruzou var(--transicao-marcador); }

@media (prefers-reduced-motion: reduce) {
  .regua-marcador.cruzou { animation: none; }
}

.regua-marcas { position: relative; height: var(--espaco-6); }

.regua-marca {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
}

.regua-marca i {
  display: block;
  width: 2px;
  height: var(--espaco-2);
  margin-inline: auto;
  background: currentColor;
  opacity: 0.4;
}

.regua-marca em {
  display: block;
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo-tam);
  font-style: normal;
  opacity: 0.75;
}

.regua-cartao { margin-top: var(--espaco-5); min-height: var(--espaco-10); }
.regua-cartao > * + * { margin-top: var(--espaco-3); }

.regua-faixa-rotulo {
  font-family: var(--fonte-display);
  font-size: var(--t-atividade-tam);
  font-weight: 700;
  text-transform: var(--t-rotulo-caixa);
  letter-spacing: var(--t-rotulo-espaco);
  opacity: 0.75;
}

.regua-atividade {
  font-family: var(--fonte-display);
  font-size: var(--t-secao-tam);
  font-weight: 700;
  letter-spacing: var(--t-secao-espaco);
}

.regua-material { font-size: var(--t-legenda-tam); opacity: 0.85; }
.regua-material .rotulo { color: inherit; opacity: 0.7; }
.regua-texto { max-width: var(--largura-texto); }

.regua-nota { font-size: var(--t-legenda-tam); opacity: 0.8; }

/* Aviso de seguranca SEMPRE sobre papel, nunca direto sobre a faixa: carmim
   sobre tangerina seria exatamente a confusao que o brief proibe. */
.regua-atencao,
.regua-aviso {
  max-width: var(--largura-texto);
  padding: var(--espaco-4);
  border-left: var(--espaco-1) solid var(--alerta);
  border-radius: 0 var(--raio-botao) var(--raio-botao) 0;
  background: var(--papel);
  color: var(--tinta);
  font-size: var(--t-legenda-tam);
}

.regua-dica {
  margin-top: var(--espaco-5);
  font-size: var(--t-legenda-tam);
  opacity: 0.75;
}

/* --- blocos de texto ------------------------------------------------------- */

.pensamento {
  font-size: var(--t-atividade-tam);
  color: var(--tinta-suave);
  font-style: italic;
  padding-left: var(--espaco-4);
  border-left: 2px solid var(--traco);
}

.destaque {
  font-family: var(--fonte-display);
  font-size: var(--t-secao-tam);
  font-weight: var(--t-secao-peso);
  letter-spacing: var(--t-secao-espaco);
  line-height: 1.2;
  text-wrap: balance;
}

/* --- passos e itens -------------------------------------------------------- */

.passos > li + li { margin-top: var(--espaco-6); }

.item-titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-atividade-tam);
  font-weight: var(--t-atividade-peso);
  margin-bottom: var(--espaco-2);
}

.item-texto { color: var(--tinta-suave); max-width: var(--largura-texto); }

.lista-marcada > li { position: relative; padding-left: var(--espaco-5); }
.lista-marcada > li + li { margin-top: var(--espaco-3); }

.lista-marcada > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--t-corpo-tam) * var(--t-corpo-altura) / 2);
  width: var(--espaco-3);
  height: 2px;
  background: var(--institucional);
}

/* --- cartoes e grades ------------------------------------------------------ */

.cartao {
  padding: var(--espaco-5);
  border: var(--borda) solid var(--traco);
  border-radius: var(--raio-card);
  background: var(--papel);
}

.cartao--mes { border-top: var(--espaco-1) solid var(--institucional); }

.grade { display: grid; gap: var(--espaco-4); }

/* Grade ja no celular, com uma coluna so: sem isso as duas metades empilham
   coladas — "Nao e para voce se:" encostava na ultima linha da lista de cima. */
.duas-colunas { display: grid; gap: var(--espaco-7); }

/* --- composicao de cor (no lugar da foto) ---------------------------------- *
 * Formas solidas nas cores das faixas, sobrepostas: mesma familia, idades
 * diferentes. Nao e ornamento — os quatro circulos SAO as quatro faixas, na
 * ordem, e por isso podem usar a cor de faixa sem quebrar a regra do brief.    */

.composicao {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
  overflow: hidden;
}

/* --- citacao (bloco 7) ----------------------------------------------------- *
 * O pico emocional: secao de cor cheia, sem card, texto claro.                 */

.citacao {
  font-family: var(--fonte-display);
  font-size: var(--t-secao-tam);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--t-secao-espaco);
  max-width: var(--largura-texto);
  text-wrap: pretty;
}

.citacao-fonte {
  margin-top: var(--espaco-5);
  font-family: var(--fonte-corpo);
  font-size: var(--t-legenda-tam);
  font-weight: 400;
  font-style: italic;
  opacity: 0.8;
}

/* --- planos ---------------------------------------------------------------- *
 * O Anual domina: maior, em uva, com o mensal equivalente como numero grande.
 * Tres cards iguais nao vendem.                                               */

.planos { display: grid; gap: var(--espaco-4); }

.plano {
  position: relative;
  padding: var(--espaco-5);
  border: var(--borda) solid var(--traco);
  border-radius: var(--raio-card);
  background: var(--papel);
}

.plano-nome {
  font-family: var(--fonte-display);
  font-size: var(--t-atividade-tam);
  font-weight: var(--t-atividade-peso);
  color: var(--tinta-suave);
}

.plano-preco {
  font-family: var(--fonte-display);
  font-size: var(--t-secao-tam);
  font-weight: 700;
  letter-spacing: var(--t-secao-espaco);
  line-height: 1.1;
  margin-block: var(--espaco-1) var(--espaco-2);
}

.plano-nota { font-size: var(--t-legenda-tam); color: var(--tinta-suave); }

/* o dominante */
.plano--destaque {
  background: var(--institucional);
  color: var(--institucional-texto);
  border-color: var(--institucional);
  padding: var(--espaco-6) var(--espaco-5);
}

.plano--destaque .plano-nome,
.plano--destaque .plano-nota { color: inherit; opacity: 0.85; }

.plano-kicker {
  margin-top: var(--espaco-4);
  font-size: var(--t-rotulo-tam);
  font-weight: var(--t-rotulo-peso);
  letter-spacing: var(--t-rotulo-espaco);
  text-transform: var(--t-rotulo-caixa);
  opacity: 0.8;
}

.plano-numero {
  font-family: var(--fonte-display);
  font-size: var(--t-numero-tam);
  font-weight: 700;
  letter-spacing: var(--t-hero-espaco);
  line-height: 1;
  margin-top: var(--espaco-2);
}

.plano-unidade {
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo-tam);
  font-weight: 600;
  opacity: 0.85;
  /* O tracking negativo do numero e calibrado para 64px. Herdado por este
     rotulo de 17px, ele comia o espaco de "por mês", que saia "pormês". */
  letter-spacing: normal;
  white-space: nowrap;
}

/* Nao e mono. O brief reserva JetBrains Mono para id, data e idade em meses —
   preco nao entra. Era o mono, com sua largura fixa de espaco, que abria o vao
   duplo em "R$  297". */
.plano-total {
  margin-top: var(--espaco-3);
  font-size: var(--t-corpo-tam);
  font-weight: 600;
  opacity: 0.85;
}

.plano-selo {
  position: absolute;
  top: 0;
  right: var(--espaco-5);
  transform: translateY(-50%);
  background: var(--papel);
  color: var(--institucional);
}

/* Cada card leva ao checkout dele. No card em uva cheia o botao inverte, pela
   mesma razao da secao--uva: botao uva sobre fundo uva sumiria, e este e o
   botao do plano que a pagina quer vender. */
.plano-botao { margin-top: var(--espaco-5); }

.plano--destaque .botao {
  background: var(--papel);
  color: var(--institucional);
}

.plano--destaque :focus-visible { outline-color: var(--papel); }

/* --- perguntas ------------------------------------------------------------- */

.perguntas { max-width: var(--largura-texto); }

.pergunta { border-bottom: var(--borda) solid var(--traco); }

.pergunta summary {
  padding-block: var(--espaco-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-4);
  align-items: center;
}

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

.pergunta summary::after {
  content: "+";
  flex: none;
  font-family: var(--fonte-mono);
  color: var(--institucional);
  font-size: var(--t-atividade-tam);
}

.pergunta[open] summary::after { content: "\2013"; }

.pergunta-corpo { padding-bottom: var(--espaco-4); color: var(--tinta-suave); }

/* --- fechamento ------------------------------------------------------------ */

.rodape { padding-block: var(--espaco-9); }
.rodape .botao { max-width: 26rem; }

/* --- revelacao no scroll ---------------------------------------------------- *
 * Escondido SO quando ha JavaScript. A classe .js e posta por um script inline
 * no <head>; sem ela, nada aqui se aplica e a pagina inteira aparece de cara.
 *
 * Isso nao e detalhe: opacity 0 por padrao significa que qualquer falha de JS —
 * 404, erro de sintaxe, extensao bloqueando modulo — entrega uma pagina de
 * vendas em branco.                                                            */

.js [data-revela] {
  opacity: 0;
  transform: translateY(var(--espaco-3));
  transition: opacity var(--transicao-marcador), transform var(--transicao-marcador);
}

.js [data-revela].visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-revela] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   TELAS DE ASSINANTE — cadastro do filho e area
   ============================================================================
   Mesmos tokens, mesmo ritmo de secao, mesma regua. A diferenca de tom e que
   aqui ninguem esta sendo convencido de nada: a mae ja pagou e quer o plano de
   amanha de manha. Nada de argumento de venda dentro da area.                 */

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-4);
  padding-block: var(--espaco-5);
  border-bottom: var(--borda) solid var(--traco);
}

.marca {
  font-family: var(--fonte-display);
  font-size: var(--t-atividade-tam);
  font-weight: 700;
  letter-spacing: var(--t-secao-espaco);
  color: var(--institucional);
  text-decoration: none;
}

/* --- formulario ------------------------------------------------------------ */

.forma { max-width: 26rem; }
.forma > * + * { margin-top: var(--espaco-5); }

.campo { display: block; }

/* So o PRIMEIRO span e o rotulo do campo. A dica que vem depois do input
   tambem e span, e com o seletor solto ela saia em caixa alta — uma frase
   inteira de instrucao gritando na tela. */
.campo > span:first-child {
  display: block;
  margin-bottom: var(--espaco-2);
  font-size: var(--t-rotulo-tam);
  font-weight: var(--t-rotulo-peso);
  letter-spacing: var(--t-rotulo-espaco);
  text-transform: var(--t-rotulo-caixa);
  color: var(--tinta-suave);
}

.campo input {
  width: 100%;
  padding: var(--espaco-3) var(--espaco-4);
  border: var(--borda) solid var(--traco);
  border-radius: var(--raio-botao);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo-tam);
  line-height: 1.4;
}

/* Data e id sao mono, como o brief manda para numero de utilidade. */
.campo input[type="date"] { font-family: var(--fonte-mono); }

.campo input:focus-visible { border-color: var(--institucional); }

.campo-dica {
  display: block;
  margin-top: var(--espaco-2);
  font-size: var(--t-legenda-tam);
  font-weight: var(--t-corpo-peso);
  letter-spacing: normal;
  text-transform: none;
  color: var(--tinta-suave);
}

/* --- avisos ---------------------------------------------------------------- *
 * Carmim SEMPRE sobre papel, nunca sobre cor de faixa. Mesmo tratamento do
 * aviso da regua: barra a esquerda, fundo de papel, texto em tinta.            */

.aviso {
  max-width: var(--largura-texto);
  padding: var(--espaco-4);
  border-left: var(--espaco-1) solid var(--traco);
  border-radius: 0 var(--raio-botao) var(--raio-botao) 0;
  background: var(--papel-fundo);
  font-size: var(--t-legenda-tam);
}

.aviso--alerta {
  border-left-color: var(--alerta);
  background: var(--papel);
  color: var(--tinta);
}

.aviso + .aviso { margin-top: var(--espaco-3); }
.aviso p + p { margin-top: var(--espaco-3); }

/* --- acoes: uma primaria e uma segunda ------------------------------------- *
 * A hierarquia e botao contra link, nunca dois botoes: dois botoes lado a lado
 * empatam, e esta tela existe justamente para desempatar. O botao principal
 * segue em uva — carmim continua reservado para o aviso de seguranca, que esta
 * logo acima.                                                                  */

.acoes {
  margin-top: var(--espaco-7);
  max-width: 26rem;
}

.link-secundario {
  display: inline-block;
  margin-top: var(--espaco-5);
  color: var(--tinta-suave);
  font-size: var(--t-legenda-tam);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-secundario:hover { color: var(--tinta); }

/* --- a regua da area ------------------------------------------------------- *
 * Retrato, nao controle: o marcador esta na idade real do filho e ninguem
 * arrasta. So o cursor muda — a forma continua exatamente a mesma, porque e a
 * mesma regua do brief.                                                        */

.regua--fixa .regua-pista,
.regua--fixa .regua-marcador { cursor: default; }

.regua-nome {
  font-family: var(--fonte-display);
  font-size: var(--t-atividade-tam);
  font-weight: 700;
  letter-spacing: var(--t-secao-espaco);
}

/* --- troca de crianca ------------------------------------------------------ */

.criancas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-5);
}

.criancas button {
  padding: var(--espaco-2) var(--espaco-4);
  border: var(--borda) solid var(--traco);
  border-radius: var(--raio-pill);
  background: var(--papel);
  color: var(--tinta-suave);
  font-family: var(--fonte-corpo);
  font-size: var(--t-legenda-tam);
  font-weight: 600;
  cursor: pointer;
}

.criancas button[aria-pressed="true"] {
  background: var(--institucional);
  border-color: var(--institucional);
  color: var(--institucional-texto);
}

/* --- o plano do mes -------------------------------------------------------- */

.mes-chapeu {
  font-size: var(--t-rotulo-tam);
  font-weight: var(--t-rotulo-peso);
  letter-spacing: var(--t-rotulo-espaco);
  text-transform: var(--t-rotulo-caixa);
  color: var(--institucional);
  margin-bottom: var(--espaco-3);
}

.mes-titulo { margin-bottom: var(--espaco-4); }

.semana + .semana { margin-top: var(--espaco-7); }

.semana-titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-atividade-tam);
  font-weight: 700;
  text-transform: var(--t-rotulo-caixa);
  letter-spacing: var(--t-rotulo-espaco);
  color: var(--tinta-suave);
  margin-bottom: var(--espaco-4);
}

.atividades { display: grid; gap: var(--espaco-4); }

.atividade { padding: var(--espaco-5); }

.atividade-numero {
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo-tam);
  color: var(--tinta-suave);
}

.atividade-titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-atividade-tam);
  font-weight: var(--t-atividade-peso);
  margin-block: var(--espaco-1) var(--espaco-3);
}

.atividade-material {
  font-size: var(--t-legenda-tam);
  color: var(--tinta-suave);
  margin-bottom: var(--espaco-3);
}

.atividade-texto { max-width: var(--largura-texto); }
.atividade-texto + .atividade-texto { margin-top: var(--espaco-3); }

.atividade-porque {
  margin-top: var(--espaco-3);
  color: var(--tinta-suave);
  max-width: var(--largura-texto);
}

.atividade .aviso { margin-top: var(--espaco-4); }

/* --- listas de marco e de sinal -------------------------------------------- */

.lista-ponto > li { position: relative; padding-left: var(--espaco-5); }
.lista-ponto > li + li { margin-top: var(--espaco-3); }

.lista-ponto > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--t-corpo-tam) * var(--t-corpo-altura) / 2);
  width: var(--espaco-2);
  height: var(--espaco-2);
  border-radius: var(--raio-pill);
  background: var(--institucional);
}

/* --- acervo ---------------------------------------------------------------- */

.acervo { display: grid; gap: var(--espaco-4); }

.acervo a {
  display: block;
  padding: var(--espaco-5);
  border: var(--borda) solid var(--traco);
  border-left: var(--espaco-1) solid var(--institucional);
  border-radius: var(--raio-card);
  background: var(--papel);
  color: inherit;
  text-decoration: none;
}

.acervo a:hover { border-color: var(--institucional); }

/* --- estado vazio ---------------------------------------------------------- *
 * "O plano de abril chega dia 1o", nunca "Nenhum conteudo disponivel".         */

.vazio {
  padding: var(--espaco-6);
  border: var(--borda) dashed var(--traco);
  border-radius: var(--raio-card);
  color: var(--tinta-suave);
  max-width: var(--largura-texto);
}

/* ============================================================================
   DEGRAUS DE TELA
   ============================================================================ */

@media (min-width: 640px) {
  .envolve { padding-inline: var(--espaco-6); }
  .secao { padding-block: var(--espaco-8); }
  .secao--uva { padding-block: var(--espaco-9); }
  .regua { padding-block: var(--espaco-8); }

  .grade--dois { grid-template-columns: 1fr 1fr; }
  .grade--tres { grid-template-columns: repeat(3, 1fr); }

  .botao { display: inline-block; width: 100%; }

  .planos { grid-template-columns: 1fr 1fr; }
  .plano--destaque { grid-column: 1 / -1; order: -1; }

  .atividades { grid-template-columns: 1fr 1fr; }
  .acervo { grid-template-columns: repeat(3, 1fr); }
}

/* Acima de 900 a pagina deixa de ser uma coluna estreita no meio do monitor. */
@media (min-width: 900px) {
  .secao { padding-block: var(--espaco-8); }
  .secao--uva { padding-block: var(--espaco-10); }

  /* bloco 4 e bloco 8: duas colunas de verdade */
  .duas-colunas {
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-8);
    align-items: start;
  }

  /* A arte do bloco 4 e mais baixa que a coluna de passos. Centrada, a sobra
     se divide nas duas pontas e le como composicao; no topo, virava um buraco
     em L de mais de 300px no lado direito da tela. */
  .duas-colunas > figure { align-self: center; }

  .passos > li + li { margin-top: var(--espaco-7); }

  /* precos: o Anual ocupa a coluna larga, os outros dois empilham ao lado */
  .planos {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--espaco-5);
    align-items: start;
  }

  .plano--destaque {
    grid-column: 1;
    grid-row: 1 / span 2;
    order: 0;
    padding: var(--espaco-8) var(--espaco-7);
  }

  .regua-topo { margin-bottom: var(--espaco-7); }
  .regua-cartao { margin-top: var(--espaco-6); }

  /* o cartao da regua em duas colunas: rotulo+titulo de um lado, resto do outro */
  .regua-cartao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-4) var(--espaco-8);
    align-items: start;
  }

  .regua-cartao > * + * { margin-top: 0; }
  .regua-faixa-rotulo, .regua-atividade { grid-column: 1; }
  .regua-material, .regua-texto, .regua-atencao, .regua-nota { grid-column: 2; }
}

/* Acima de 1024 o hero ganha a coluna da direita. Sem isso o texto fica na
   esquerda e sobra meia tela vazia. Alinhado pela base com o bloco do CTA. */
@media (min-width: 1024px) {
  /* A coluna de texto leva a maior parte: um hero de 72px numa coluna estreita
     quebra em seis linhas e vira parede de texto. A arte pede pouco espaco. */
  .topo-grade {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: var(--espaco-7);
    align-items: end;
  }

  .topo-arte { display: block; }
  .topo-arte .composicao { max-width: 22rem; margin-left: auto; }
}

@media (min-width: 1280px) {
  .envolve { padding-inline: var(--espaco-8); }
}