/* ==========================================================================
   DONA ALMA · página de venda (donalma.com.br)
   Só o que é desta página. Cor, letra, espaço, forma, sombra, giro e tempo
   saem dos tokens de dona-alma.css (cópia do design system "O jeito da casa").
   Regra da casa: zero valor solto. Medida que só existe aqui vira token --lp-*.
   Fora dos tokens ficam só as quebras de @media (as mesmas do DS: 767 e 1100)
   e as posições em porcentagem das peças coladas.

   Três peças do DS moram no CSS da página de documentação dele, não no
   dona-alma.css, e por isso estão copiadas aqui: a ampulheta, a ficha do
   gargalo e o celular. Se forem para o sistema, estas cópias saem.
   ========================================================================== */

:root {
  /* a ampulheta: larga, estreita até a mesa, abre de novo */
  --lp-faixa-larga: 100%;
  --lp-faixa-media: 88%;
  --lp-faixa-estreita: 76%;
  --lp-faixa-altura: var(--alvo-g);

  /* a Dona Alma que faz a pergunta do mini-diagnóstico, colada na beirada do cartão */
  --lp-dona-diag: var(--e-9);
  --lp-dona-sobe: var(--e-7);
  --lp-rabicho: var(--e-4);                  /* o bico do balão que aponta para ela */

  /* colunas (frações da grade) */
  --lp-col-manchete: 6fr;
  --lp-col-folha: 7fr;
  --lp-col-ampulheta: 7fr;
  --lp-col-resposta: 5fr;
  --lp-col-texto: 7fr;
  --lp-col-lado: 5fr;

  /* o topo é mais justo que uma seção de leitura */
  --lp-topo-cima: var(--e-6);
  --lp-topo-baixo: var(--e-8);
  --lp-barra-altura: var(--e-8);

  /* a manchete em tiras */
  --lp-manchete: var(--fs-h1);
  --lp-manchete-fim: var(--fs-manchete-m);
  --lp-tira-px: .22em;
  --lp-tira-py: .06em;
  --lp-linha-recuo: clamp(var(--e-5), 5vw, var(--e-9));
  --lp-entre-recuo: clamp(var(--e-4), 3vw, var(--e-8));
  --lp-afasta: var(--desloca-duro);          /* quanto as chapas desencontram */

  /* as manchas de luz atrás do lilás */
  --lp-luz-g: 46vw;
  --lp-luz-m: 38vw;
  --lp-luz-p: 26vw;

  /* proporções dos desenhos (largura / altura do arquivo) */
  --lp-logo-proporcao: 1175.47 / 260.13;
  --lp-mascote: calc(var(--e-11) + var(--e-8));
  --lp-carta-proporcao: 5 / 7;               /* carta de baralho */
  --lp-px-janela: .6px;                      /* a janela antiga do DS é medida em pixels de arte (1080 de largura): aqui, 60% */
  --lp-vale-foto: var(--e-10);
  --lp-rodape-logo: calc(var(--e-11) * 2);
  --lp-rodape-mascote: calc(var(--e-11) + var(--e-7));
  --lp-carimbo-g: calc(var(--e-11) + var(--e-6));
  --lp-duas-largura: calc(var(--e-11) * 2 + var(--e-9));   /* a foto das duas avós */
  --lp-reels-largura: calc(var(--largura-celular) * .8);
  --lp-cinema-altura: 80vh;                  /* o vídeo na janela: alto, mas com a barra e uma folga à vista */

  /* a política de privacidade (/privacidade/) */
  --lp-politica-px: .5px;                    /* o bilhete de geladeira do DS é medido em pixels de arte: aqui, a metade */
  --lp-politica-num: var(--e-6);             /* a coluna do número de cada item */
}

main { counter-reset: secao; }

/* fita e papel torto podem passar da beirada da folha: a folha corta, a página não rola de lado */
main > .folha, .lp-rodape { overflow-x: clip; }

/* -------------------------------------------------------------------------
   Barra do topo: fica sempre na tela, porque o convite mora nela
   ------------------------------------------------------------------------- */
.lp-cabecalho { min-height: var(--lp-barra-altura); }
.lp-cabecalho.cabecalho--some { transform: none; }
.lp-marca { flex-wrap: wrap; row-gap: 0; column-gap: var(--e-3); }
.lp-marca__logo { width: var(--logo-p); height: auto; aspect-ratio: var(--lp-logo-proporcao); color: currentColor; }
.lp-marca__antiga { font-size: var(--fs-legenda); line-height: var(--lh-ui); color: var(--texto-2); }
@media screen and (min-width: 768px) {
  .lp-marca__logo { width: var(--logo-m); }
}
@media screen and (max-width: 767px) {
  .lp-marca { flex-direction: column; align-items: flex-start; }
  .lp-cabecalho__convite { --botao-px: var(--e-3); font-size: var(--fs-texto-p); }
}
@media screen and (max-width: 359px) {
  .lp-cabecalho__convite { white-space: normal; text-align: center; }
}

/* -------------------------------------------------------------------------
   Cabeça de seção: o contador no canto, a etiqueta e o título que sobe
   ------------------------------------------------------------------------- */
.lp-cabeca { display: flex; align-items: flex-start; gap: var(--e-5); margin-bottom: var(--e-8); }
.lp-cabeca__texto { display: grid; gap: var(--e-3); justify-items: start; max-width: var(--largura-texto); }
@media screen and (max-width: 767px) {
  .lp-cabeca { flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-7); }
  .lp-cabeca .contador-canto { width: var(--e-8); height: var(--e-8); }
}

/* -------------------------------------------------------------------------
   1 · Topo
   ------------------------------------------------------------------------- */
.lp-topo { isolation: isolate; padding-block: var(--lp-topo-cima) var(--lp-topo-baixo); }
.lp-topo:focus { outline: none; } /* o voltar ao topo põe o foco aqui só para o teclado recomeçar; a folha inteira não ganha anel */
.lp-topo__fundo { position: absolute; inset: 0; z-index: var(--z-fundo); overflow: clip; pointer-events: none; }
.lp-luz--rosa { width: var(--lp-luz-g); height: var(--lp-luz-g); left: 38%; top: 6%; background: var(--luz-rosa); }
.lp-luz--menta { width: var(--lp-luz-m); height: var(--lp-luz-m); left: -8%; bottom: -14%; background: var(--luz-menta); animation-duration: calc(var(--t-luz-anda) * 1.2); animation-direction: reverse; }
.lp-luz--manteiga { width: var(--lp-luz-p); height: var(--lp-luz-p); right: -6%; bottom: 8%; background: var(--luz-manteiga); animation-duration: calc(var(--t-luz-anda) * 1.4); }
.lp-reg { color: var(--tinta-a24); }
.lp-reg--a { top: var(--e-5); right: var(--calha); }
.lp-reg--b { top: 44%; left: calc(var(--calha) / 3); }
@media screen and (max-width: 767px) { .lp-reg--b { display: none; } }

.lp-topo__grade { display: grid; gap: var(--e-7); align-items: start; }
.lp-topo__texto { display: grid; gap: var(--e-5); justify-items: start; }
.lp-topo__apoio { max-width: var(--medida-curta); }
@media screen and (min-width: 1100px) {
  .lp-topo__grade { grid-template-columns: minmax(0, var(--lp-col-manchete)) minmax(0, var(--lp-col-folha)); align-items: center; }
  /* em duas colunas a tira de baixo ocupa a coluna inteira: sem recuo, para não quebrar */
  .lp-topo { --lp-linha-recuo: 0px; }
}

/* a manchete em tiras de papel, com as chapas fora de registro */
.lp-titulo-topo { display: grid; justify-items: start; gap: var(--e-1); font-size: var(--lp-manchete); line-height: var(--lh-manchete); letter-spacing: var(--ls-zero); }
.lp-linha { --tira-px: var(--lp-tira-px); --tira-py: var(--lp-tira-py); transform: rotate(var(--giro, 0deg)); }
.lp-linha--2 { margin-left: var(--lp-linha-recuo); }
.lp-chapa { --afasta: var(--lp-afasta); font-size: 1em; }
.lp-titulo-topo:hover .lp-chapa { --afasta: 0px; }
.lp-entre { margin: var(--e-1) 0 var(--e-1) var(--lp-entre-recuo); font-family: var(--letra-titulo); font-style: italic; font-weight: var(--peso-medio); font-size: var(--fs-h3); line-height: var(--lh-titulo-2); letter-spacing: var(--ls-sutil); color: var(--tinta); }

/* no toque a manchete fica parada: a deriva sozinha (até 5px) borrava a letra no celular.
   O fora de registro continua, só não anda. Mesma condição do dona-alma.js para "sem mouse". */
@media not all and (hover: hover) and (pointer: fine) {
  .lp-chapa { --dx: 0px !important; --dy: 0px !important; }
}

/* a folha do mini-diagnóstico, com o carimbo colado no canto */
.lp-diag-palco { position: relative; }
.lp-diag { --giro: calc(var(--giro-0) * -1); display: grid; gap: var(--e-5); padding: var(--e-6) var(--e-4) var(--e-5); box-shadow: var(--sombra-solta); }
.lp-diag__pergunta { max-width: var(--medida-curta); }
.lp-diag__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--e-4); }
.lp-diag__dona { --giro: var(--giro-2); width: var(--lp-dona-diag); height: auto; margin-top: calc(var(--lp-dona-sobe) * -1); transform: rotate(var(--giro)); }
/* quem não se acha nas faixas: um convite só, no pé do cartão */
.lp-diag__fora { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); padding-top: var(--e-5); border-top: var(--traco) dashed var(--linha-media-cor); }
.lp-diag__fora-pergunta { font-family: var(--letra-titulo); font-weight: var(--peso-h3); font-size: var(--fs-texto-g); line-height: var(--lh-titulo-2); }
.lp-diag__fora-nota { flex-basis: 100%; color: var(--texto-2); }
.lp-desde { position: absolute; right: var(--e-4); bottom: calc(var(--e-5) * -1); z-index: var(--z-alto); font-size: var(--fs-carimbo); background: var(--branco-a50); }
@media screen and (min-width: 768px) {
  .lp-diag { padding: var(--e-6); }
  .lp-desde { right: auto; left: calc(var(--e-6) * -1); bottom: calc(var(--e-5) * -1); }
}

/* A ampulheta (cópia do DS, _fonte/css/p3-marca-metodo.css, com a cor do contexto
   no lugar da cor fixa, para valer em folha clara). */
.ampulheta { display: grid; justify-items: center; gap: var(--e-2); width: 100%; }
.ampulheta__etapa {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  width: var(--largura);
  min-height: var(--ampulheta-altura-etapa);
  padding: var(--e-2) var(--e-4);
  border: 0;
  background: none;
  color: var(--tinta);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transform: rotate(var(--giro, 0deg));
  transition: transform var(--t-base) var(--ease-mola), filter var(--t-base) var(--ease-papel);
}
/* a faixa de papel rasgado: as do mini-diagnóstico e as do método são a mesma peça */
.ampulheta__etapa::before, .lp-etapa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-fundo);
  background: var(--textura-fibras), var(--c);
  background-size: var(--tam-fibras) var(--tam-fibras), auto;
  -webkit-mask:
    var(--mascara-ponta-esq) left / var(--ponta) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - (var(--ponta) * 2) + var(--e-0)) 100% no-repeat,
    var(--mascara-ponta-dir) right / var(--ponta) 100% no-repeat;
  mask:
    var(--mascara-ponta-esq) left / var(--ponta) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - (var(--ponta) * 2) + var(--e-0)) 100% no-repeat,
    var(--mascara-ponta-dir) right / var(--ponta) 100% no-repeat;
}
.ampulheta__etapa--escura { color: var(--etapa-recomendacao-texto); }
.ampulheta__casa { font-family: var(--letra-titulo); font-weight: var(--peso-h3); font-size: var(--fs-texto-g); line-height: var(--lh-titulo-2); text-wrap: balance; }
@media (hover: hover) { .ampulheta__etapa:hover { transform: rotate(0deg) scale(1.03); } }
.ampulheta__etapa[aria-expanded="true"] { transform: rotate(0deg) scale(1.05); filter: drop-shadow(var(--desloca-duro) var(--desloca-duro) 0 var(--linha-forte-cor)); z-index: var(--z-base); }

.lp-ampulheta { --ampulheta-altura-etapa: var(--lp-faixa-altura); }

/* a dica: no celular, uma linha em cima das faixas; do tablet para cima, o balão da Dona Alma, no lugar onde a resposta vai colar */
.lp-dica { display: flex; align-items: center; gap: var(--e-2); justify-self: start; font-weight: var(--peso-semi); font-size: var(--fs-rotulo); line-height: var(--lh-ui); color: var(--texto-2); }
.lp-dica__seta { display: none; }

/* a resposta: um papel da cor da etapa, colado ao lado da faixa */
.lp-resposta {
  --giro: var(--giro-1);
  position: relative;
  display: grid;
  gap: var(--e-3);
  align-content: start;
  justify-self: stretch;
  margin-block: var(--e-2);
  padding: var(--e-5);
  background: var(--textura-fibras), var(--c);
  background-size: var(--tam-fibras) var(--tam-fibras), auto;
  color: var(--tinta);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-solta);
  transform: rotate(var(--giro));
}
.lp-resposta[hidden] { display: none; }
.lp-resposta__nome { --giro: calc(var(--giro-1) * -1); }
.lp-resposta__texto { font-family: var(--letra-titulo); font-weight: var(--peso-h3); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); }
.lp-resposta__depois { font-size: var(--fs-texto-p); line-height: var(--lh-legenda); }
.lp-resposta .botao { --botao-px: var(--e-3); white-space: normal; text-align: center; text-wrap: balance; }
.lp-resposta--escura { color: var(--etapa-recomendacao-texto); --principal-fundo: var(--papel); --principal-texto: var(--tinta); }

@media screen and (min-width: 768px) {
  .lp-ampulheta { grid-template-columns: minmax(0, var(--lp-col-ampulheta)) minmax(0, var(--lp-col-resposta)); column-gap: var(--e-6); align-items: center; }
  /* a cabeça do cartão usa as mesmas colunas das faixas: a Dona Alma fica em cima do balão dela */
  .lp-diag { --lp-dona-diag: var(--e-10); }
  .lp-diag__cabeca { grid-template-columns: minmax(0, var(--lp-col-ampulheta)) minmax(0, var(--lp-col-resposta)); column-gap: var(--e-6); }
  .lp-diag__dona { justify-self: center; }
  .lp-ampulheta > .ampulheta__etapa { grid-column: 1; }
  /* na coluna estreita a resposta fala menor, para caber ao lado das faixas sem esticar o cartão */
  .lp-resposta__texto { font-size: var(--fs-texto-g); }
  .lp-ampulheta > .lp-resposta, .lp-ampulheta > .lp-dica { grid-column: 2; grid-row: 1 / span 6; align-self: start; margin-block: 0; }
  /* o bico do balão, apontando para ela */
  .lp-ampulheta > .lp-resposta::after, .lp-ampulheta > .lp-dica::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--lp-rabicho);
    height: var(--lp-rabicho);
    background: inherit;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .lp-ampulheta > .lp-dica {
    position: relative;
    display: grid;
    gap: var(--e-3);
    justify-items: start;
    align-content: center;
    justify-self: stretch;
    padding: var(--e-5);
    border-radius: var(--raio-papel);
    background: var(--branco);
    box-shadow: var(--sombra-colada);
    color: var(--tinta);
    font-family: var(--letra-titulo);
    font-style: italic;
    font-weight: var(--peso-medio);
    font-size: var(--fs-h4);
    line-height: var(--lh-titulo-2);
    transform: rotate(var(--giro-1));
  }
  .lp-dica__mao { display: none; }
  /* a seta à caneta do DS, virada para as faixas */
  .lp-dica__seta { display: block; position: relative; width: var(--e-9); stroke-width: var(--traco-caneta); transform: scaleX(-1) rotate(var(--giro-4)); }
  .lp-topo[data-escolhida] .lp-dica { display: none; }
}

/* -------------------------------------------------------------------------
   O capacho: o slogan em cima; embaixo, o que fica do lado de fora
   ------------------------------------------------------------------------- */
.lp-capacho { position: relative; display: grid; gap: var(--e-3); padding: var(--e-5) var(--calha) var(--e-4); }
.lp-capacho::after { content: ""; position: absolute; inset: var(--e-2); border: var(--traco) dashed var(--linha-media-cor); border-radius: var(--raio-papel); pointer-events: none; }
.lp-capacho__frase { margin-inline: auto; font-size: var(--fs-h4); text-align: center; text-wrap: balance; }
.lp-capacho__letreiro {
  margin-inline: calc(var(--e-2) - var(--calha));
  padding-block: var(--e-1);
  border: 0;
  background: none;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--preto-puro) var(--e-8), var(--preto-puro) calc(100% - var(--e-9)), transparent);
  mask-image: linear-gradient(to right, transparent, var(--preto-puro) var(--e-8), var(--preto-puro) calc(100% - var(--e-9)), transparent);
}
.lp-capacho__letreiro .item { gap: var(--e-4); padding-inline: var(--e-4); font-size: var(--fs-etiqueta); }
.lp-capacho__pausa { display: none; position: absolute; right: var(--e-4); bottom: var(--e-3); z-index: var(--z-alto); }
html.js .lp-capacho__pausa { display: inline-flex; }

/* -------------------------------------------------------------------------
   2 · O primeiro café: o vale e o resultado
   ------------------------------------------------------------------------- */
.lp-cafe__grade { display: grid; gap: var(--e-9); align-items: start; }
.lp-cafe__texto { display: grid; justify-items: start; }
.lp-passos { display: grid; gap: var(--e-5); margin-bottom: var(--e-8); }
.lp-passos li { display: grid; grid-template-columns: var(--e-8) minmax(0, 1fr); gap: var(--e-4); align-items: center; font-size: var(--fs-texto-g); }
.lp-passos .t-numero { color: var(--lilas-tinta); }

.lp-vale { --giro: calc(var(--giro-1) * -1); display: grid; grid-template-columns: var(--lp-vale-foto) minmax(0, 1fr); align-items: center; gap: var(--e-4); width: 100%; max-width: var(--medida-campo); padding: var(--e-5); transform: rotate(var(--giro)); box-shadow: var(--sombra-solta); }
.lp-vale__foto { border-radius: var(--raio-papel); }
.lp-vale__texto { display: grid; gap: var(--e-2); justify-items: start; }
.lp-vale__texto .t-etiqueta { font-size: var(--fs-h4); line-height: var(--lh-ui); }
.lp-vale .botao { margin-top: var(--e-2); white-space: normal; text-align: center; }
@media screen and (max-width: 767px) {
  .lp-vale { grid-template-columns: var(--e-9) minmax(0, 1fr); padding: var(--e-5) var(--e-4); }
  .lp-vale .botao { --botao-px: var(--e-3); font-size: var(--fs-texto-p); }
}

.lp-cafe__lado { display: grid; }
.lp-resultado { transform: rotate(var(--giro, 0deg)); box-shadow: var(--sombra-solta); }
.lp-regra { --superficie: var(--manteiga); --giro: calc(var(--giro-2) * -1); display: grid; gap: var(--e-3); width: min(100%, var(--largura-recado)); margin: calc(var(--e-5) * -1) 0 0 auto; z-index: var(--z-colagem); }
.lp-regra__texto { font-family: var(--letra-titulo); font-style: italic; font-weight: var(--peso-medio); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); }
@media screen and (min-width: 1100px) {
  .lp-cafe__grade { grid-template-columns: minmax(0, var(--lp-col-manchete)) minmax(0, var(--lp-col-manchete)); gap: var(--e-8); }
  .lp-regra { margin-right: calc(var(--e-5) * -1); }
}

/* A ficha do gargalo (cópia do DS, _fonte/css/p3-marca-metodo.css) */
.gargalo { color: var(--tinta); }
.gargalo__exemplo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--fs-legenda); color: var(--tinta-2); }
.gargalo__etapas { display: grid; justify-items: center; gap: var(--e-1); margin: var(--e-3) 0; padding: 0; list-style: none; }
.gargalo__etapas li { position: relative; width: var(--l); max-width: none; padding: var(--e-1) var(--e-3); border-radius: var(--raio-papel); background: var(--c); color: var(--t, var(--tinta)); font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-texto-p); letter-spacing: var(--ls-etiqueta); text-align: center; }
.gargalo__aqui { z-index: var(--z-base); }
/* o círculo abraça só o nome da etapa, e não a faixa inteira: antes ficava torto e cortava a palavra */
.gargalo__nome { position: relative; display: inline-block; }
.gargalo__circulo { left: -24%; top: -45%; width: 148%; max-width: none; height: 190%; } /* a regra geral do DS limita a largura do desenho à de quem o contém */
/* o carimbo fica na faixa do gargalo, na ponta direita: antes subia para a faixa de cima e parecia marcar a outra etapa */
.gargalo__carimbo { position: absolute; right: -10%; top: 50%; translate: 0 -50%; font-size: var(--fs-texto-p); padding: var(--e-0) var(--e-2); }
/* no celular o carimbo vai em duas linhas, para não cobrir o nome da etapa */
@media screen and (max-width: 767px) {
  .gargalo__carimbo { right: -6%; text-align: center; line-height: var(--lh-manchete); }
  .gargalo__carimbo-linha { display: block; }
}
@media screen and (max-width: 359px) {
  .gargalo__carimbo { font-size: var(--fs-mini); }
}
.gargalo__diagnostico { font-family: var(--letra-titulo); font-weight: var(--peso-h4); font-size: var(--fs-h5); line-height: var(--lh-titulo-2); }
.gargalo__passo { font-size: var(--fs-texto-p); color: var(--tinta-2); }
.gargalo__passo b { color: var(--tinta); }

/* -------------------------------------------------------------------------
   3 · O que a casa faz: cartaz, janela e celular
   ------------------------------------------------------------------------- */
.lp-faz { padding-top: 0; }
.lp-faz__grade { display: grid; gap: var(--e-7); align-items: start; }
.lp-peca { display: grid; gap: var(--e-4); align-content: start; justify-items: start; max-width: var(--largura-recado); }
.lp-peca > * { max-width: 100%; }
/* a peça ocupa a coluna toda; o celular para na largura de celular */
.lp-peca > :last-child { justify-self: stretch; }
/* o título é o mesmo nas três: o material muda, a hierarquia não */
/* o título das três em Spot, como a manchete do DS (o material muda, a letra não) */
.lp-peca__titulo { text-wrap: balance; }   /* a letra é a .t-manchete do DS, que também monta o acento da Spot */
.lp-cartaz { --giro: calc(var(--giro-1) * -1); transform: rotate(var(--giro)); }
.lp-cartaz__papel { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-7) var(--e-6); }
.lp-janela { transform: rotate(var(--giro, 0deg)); }
.lp-janela__corpo { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-5); }
.lp-janela__prova { margin-top: var(--e-2); }   /* o link para um site que a casa fez (página de trabalho) */
/* no tablet, uma coluna só: a peça do meio cola do outro lado, como os recados dos clientes */
@media screen and (min-width: 768px) {
  .lp-faz .lp-peca:nth-child(2) { justify-self: end; }
}
@media screen and (min-width: 1100px) {
  .lp-faz__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); align-items: stretch; }
  .lp-faz .lp-peca:nth-child(2) { justify-self: auto; }
  /* as três com a mesma altura: a etiqueta em cima, a peça enche o resto */
  .lp-peca { grid-template-rows: auto 1fr; align-content: stretch; }
  .lp-cartaz, .lp-cartaz__papel { height: 100%; }
  .lp-janela { display: grid; grid-template-rows: auto 1fr; }
  /* o texto fica no meio do papel e da janela: a sobra se divide em cima e embaixo, não vira buraco */
  .lp-cartaz__papel, .lp-janela__corpo { align-content: center; }
  .lp-faz .lp-celular { display: grid; }
  .lp-faz .celular__tela { grid-template-rows: auto 1fr; }
}

/* O celular (cópia do DS, _fonte/css/p10-sistema.css). Aqui a tela cresce com a conversa. */
.celular { width: 100%; max-width: var(--largura-celular); padding: var(--e-2); border-radius: calc(var(--raio-janela) * 3); background: var(--tinta); box-shadow: var(--sombra-janela); }
.celular__tela { display: grid; overflow: hidden; border-radius: calc(var(--raio-janela) * 2.4); background: var(--fundo); }
.celular__topo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); background: var(--superficie); border-bottom: var(--traco-fino) solid var(--linha-cor); }
.celular__quem { display: grid; flex: 1; min-width: 0; line-height: var(--lh-ui); }
.celular__conversa { align-content: end; padding: var(--e-5) var(--e-3) var(--e-6); background-image: var(--grade); background-size: var(--tam-grade) var(--tam-grade); }
.celular__conversa .balao { font-size: var(--fs-texto-p); }
.celular__conversa .balao.escondido { display: none; }
.celular__conversa .balao.chegou { --colar-y: var(--e-3); --colar-giro: var(--giro-2); animation: colar var(--t-colar) steps(1, end) both; }
.celular__digitando { display: inline-flex; align-items: center; min-height: var(--alvo); }
.celular__digitando[hidden] { display: none; }
.lp-celular { transform: rotate(var(--giro, 0deg)); }

/* -------------------------------------------------------------------------
   4 · O jeito de fazer
   ------------------------------------------------------------------------- */
.lp-jeito__grade { display: grid; gap: var(--e-8); align-items: center; }

/* a ampulheta do método: imagem da casa grande, explicação clara embaixo, nome técnico pequeno */
.lp-metodo { display: grid; justify-items: center; gap: var(--e-2); width: 100%; }
.lp-etapa {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0 var(--e-3);
  width: var(--largura);
  max-width: none;
  padding: var(--e-3) var(--e-5);
  color: var(--tinta);
  transform: rotate(var(--giro, 0deg));
}
.lp-etapa--escura { color: var(--etapa-recomendacao-texto); }
.lp-etapa__casa { font-family: var(--letra-titulo); font-weight: var(--peso-h3); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); }
.lp-etapa__claro { font-size: var(--fs-texto-p); line-height: var(--lh-legenda); }
.lp-etapa__tecnico { font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-rotulo); letter-spacing: var(--ls-etiqueta); line-height: var(--lh-ui); }
.lp-etapa__aqui { --giro: var(--giro-2); margin-left: var(--e-2); vertical-align: middle; }

.lp-jeito__lado { display: grid; justify-items: start; gap: var(--e-4); }
.lp-3a3r { --giro: calc(var(--giro-2) * -1); max-width: none; font-family: var(--letra-manchete); font-size: var(--fs-titulo-g); line-height: var(--lh-manchete); color: var(--papel); text-shadow: var(--desloca-duro-alto) var(--desloca-duro-alto) 0 var(--lilas-3); transform: rotate(var(--giro)); }
.lp-jeito__nome { font-family: var(--letra-titulo); font-weight: var(--peso-h4); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); }
.lp-jeito__fecho { font-size: var(--fs-texto-g); line-height: var(--lh-legenda); color: var(--texto-2); }
.lp-jeito__fecho strong { color: var(--texto); }

@media screen and (min-width: 768px) {
  /* o nome técnico vai para a ponta da faixa, ao lado das duas linhas */
  .lp-etapa { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-inline: var(--e-6); }
  .lp-etapa__tecnico { grid-column: 2; grid-row: 1 / span 2; }
}
@media screen and (min-width: 1100px) {
  .lp-jeito__grade { grid-template-columns: minmax(0, var(--lp-col-texto)) minmax(0, var(--lp-col-lado)); }
}

/* -------------------------------------------------------------------------
   5 · Quem já sentou à mesa
   ------------------------------------------------------------------------- */
.lp-prova .folha__miolo { position: relative; }
.lp-prova__grade { display: grid; gap: var(--e-7) var(--e-6); align-items: start; }
.lp-recado { display: grid; gap: var(--e-4); align-content: start; max-width: var(--largura-recado); padding: var(--e-6) var(--e-5) var(--e-5); }
.lp-recado blockquote p { font-family: var(--letra-titulo); font-style: italic; font-weight: var(--peso-medio); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); letter-spacing: var(--ls-sutil); }
.lp-recado figcaption { display: grid; justify-items: start; gap: var(--e-2); font-size: var(--fs-texto-p); line-height: var(--lh-legenda); }
/* o que a sigla quer dizer, embaixo do recado, com o pesponto do capacho em cima */
.lp-recado__nota { padding-top: var(--e-3); border-top: var(--traco) dashed var(--linha-media-cor); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--texto-2); }

/* 20 anos: a estrela tomate do DS, colada no canto da seção, com o número por cima */
.lp-anos { --explosao-tam: calc(var(--e-9) + var(--e-4)); --giro: var(--giro-3); position: absolute; top: 0; right: 0; display: grid; place-items: center; max-width: none; transform: rotate(var(--giro)); }
.lp-anos > * { grid-area: 1 / 1; }
.lp-anos__texto { display: grid; justify-items: center; color: var(--tinta); text-align: center; transform: rotate(calc(var(--giro-5) * -1)); }
.lp-anos__numero { font-size: var(--fs-h4); line-height: var(--lh-manchete); }
.lp-anos__de { font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-rotulo); line-height: var(--lh-ui); }
@media screen and (min-width: 768px) {
  .lp-anos { --explosao-tam: calc(var(--e-10) + var(--e-3)); }
  /* no tablet, uma coluna só: o recado do meio cola do outro lado, para não sobrar meia tela vazia */
  .lp-recado:nth-child(2) { justify-self: end; }
  .lp-anos__numero { font-size: var(--fs-h3); }
}
@media screen and (min-width: 1100px) {
  .lp-prova__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* recados presos em alturas diferentes, como num mural */
  .lp-recado:nth-child(2) { justify-self: auto; margin-top: var(--e-7); }
  .lp-recado:nth-child(3) { margin-top: var(--e-4); }
}

/* -------------------------------------------------------------------------
   6 · Os meninos: a carta da casa
   ------------------------------------------------------------------------- */
.lp-carta { display: grid; gap: calc(var(--fs-texto) * var(--lh-texto)); padding: var(--e-7) var(--e-5) var(--e-6); box-shadow: var(--sombra-solta); }
.lp-carta > p { max-width: none; }
.lp-carta__mao { font-family: var(--letra-mao); font-size: var(--fs-h3); line-height: var(--lh-mao); }
@media screen and (min-width: 768px) {
  .lp-carta { padding-inline: var(--e-7); }
}

/* A casa: o vídeo, a foto das duas e o manifesto, colados juntos na mesma mesa */
.lp-casa { display: grid; grid-template-areas: "texto" "duas" "reels" "carta"; gap: var(--e-8); align-items: start; }
.lp-casa__texto { grid-area: texto; display: grid; gap: var(--e-5); }
.lp-casa__texto .lp-cabeca { margin-bottom: var(--e-2); }
.lp-casa__texto p { margin: 0; }

.lp-duas { grid-area: duas; position: relative; z-index: var(--z-alto); justify-self: center; width: min(100%, var(--lp-duas-largura)); margin: 0; transform: rotate(var(--giro, 0deg)); }
.lp-duas .fita { z-index: var(--z-alto); }
.lp-duas__fotos { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.lp-duas__uma, .lp-duas__outra { position: relative; }
.lp-duas__uma { z-index: var(--z-colagem); margin-right: calc(var(--e-6) * -1); transform: rotate(calc(var(--giro-2) * -1)); }
.lp-duas__outra { transform: rotate(var(--giro-2)); }
.lp-duas img { display: block; width: 100%; height: auto; }
.lp-duas__nome { position: absolute; bottom: var(--e-4); left: 50%; translate: -50% 0; white-space: nowrap; }
.lp-duas__legenda { margin-top: var(--e-3); text-align: center; font-family: var(--letra-mao); font-size: var(--fs-h3); line-height: var(--lh-mao); transform: rotate(calc(var(--giro-1) * -1)); }

.lp-reels { grid-area: reels; display: grid; justify-items: center; gap: var(--e-3); margin: 0; }
.lp-reels__celular { position: relative; width: 100%; max-width: var(--lp-reels-largura); }
.lp-reels__play { position: absolute; left: 50%; bottom: var(--e-8); translate: -50% 0; white-space: nowrap; }
.lp-reels__play[hidden] { display: none; }
.lp-reels__video { display: block; width: 100%; height: auto; aspect-ratio: 540 / 960; border-radius: calc(var(--raio-janela) * 2.4); background: var(--tinta); }
.lp-reels__mao { font-family: var(--letra-mao); font-size: var(--fs-h4); line-height: var(--lh-mao); }
.lp-reels__video:not([controls]) { cursor: pointer; }

/* a janela do vídeo: do tamanho do vídeo em pé, sem sobrar papel em volta */
/* a altura manda; a largura sai dela (vídeo em pé, 9 por 16) */
.lp-cinema { --lp-cinema-h: min(var(--lp-cinema-altura), (100vw - var(--calha) * 2) * 16 / 9); width: fit-content; max-width: calc(100vw - var(--calha) * 2); max-height: none; background: var(--tinta); }
.lp-cinema__video { display: block; align-self: center; width: calc(var(--lp-cinema-h) * 9 / 16); height: var(--lp-cinema-h); max-width: 100%; background: var(--tinta); }

.lp-carta { grid-area: carta; }
.lp-carta__abre { font-family: var(--letra-titulo); font-weight: var(--peso-forte); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); }
.lp-carta .riscado { color: var(--texto-2); }
.lp-carta mark { background-color: transparent; color: inherit; }   /* o marca-texto é o do DS, não o amarelo do navegador */

@media screen and (min-width: 768px) {
  .lp-casa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texto texto" "duas reels" "carta carta"; column-gap: var(--e-7); }
}
/* no computador: o texto e a foto em cima; o celular encostado na carta, e a foto presa na beirada dela */
@media screen and (min-width: 1100px) {
  .lp-casa { grid-template-columns: minmax(0, var(--lp-col-lado)) minmax(0, var(--lp-col-texto)); grid-template-areas: "texto duas" "reels carta"; column-gap: var(--e-9); row-gap: 0; }
  .lp-duas { align-self: end; margin-bottom: calc(var(--e-9) * -1); }
  .lp-reels { margin-top: var(--e-8); }
  .lp-carta { padding-top: var(--e-10); }
}

/* -------------------------------------------------------------------------
   7 · Perguntas de sempre
   ------------------------------------------------------------------------- */
.lp-perguntas__grade { display: grid; gap: var(--e-8); align-items: start; }
.lp-perguntas__lista { display: grid; gap: var(--e-5); }
.lp-perguntas__lista .lp-cabeca { margin-bottom: 0; }
.lp-perguntas__abre { margin: 0; color: var(--texto-2); }
.lp-sanfona { max-width: var(--largura-texto); }
.lp-sanfona strong { color: var(--texto); }

/* o cartão de quem ainda tem dúvida, com a regra da casa carimbada no canto */
.lp-duvida { position: relative; display: grid; gap: var(--e-4); justify-items: start; max-width: var(--medida-campo); padding: var(--e-8) var(--e-6) var(--e-6); transform: rotate(var(--giro, 0deg)); box-shadow: var(--sombra-solta); }
.lp-duvida > p, .lp-duvida > h3 { margin: 0; }
.lp-duvida__carimbo { position: absolute; top: calc(var(--e-6) * -1); right: calc(var(--e-4) * -1); margin: 0; }
.lp-verdade { display: grid; justify-items: center; font-size: var(--fs-carimbo); line-height: var(--lh-ui); text-align: center; }
@media screen and (min-width: 1100px) {
  .lp-perguntas__grade { grid-template-columns: minmax(0, var(--lp-col-texto)) minmax(0, var(--lp-col-lado)); column-gap: var(--e-9); }
  .lp-duvida { margin-top: var(--e-10); justify-self: center; }
}
}

/* -------------------------------------------------------------------------
   8 · Pode entrar
   ------------------------------------------------------------------------- */
.lp-fim { isolation: isolate; }
.lp-fim__miolo { display: grid; gap: var(--e-5); justify-items: center; text-align: center; }
.lp-titulo-fim { justify-items: center; font-size: var(--lp-manchete-fim); }

/* a página de erro (404.html) usa as peças do fim da página */
.lp-erro { isolation: isolate; min-height: calc(100svh - var(--lp-barra-altura)); display: grid; align-content: center; }
.lp-erro__botoes { justify-content: center; }

/* -------------------------------------------------------------------------
   Rodapé: papel kraft, com o logotipo e a mascote colados (as peças soltas saíram em 14/10)
   ------------------------------------------------------------------------- */
.lp-rodape { padding-block: var(--e-9) var(--e-7); }
.lp-rodape__grade { display: grid; gap: var(--e-7); align-items: start; }

/* a mascote, em adesivo, sentada na beirada rasgada */
.lp-rodape__mascote { position: absolute; top: calc(var(--e-8) * -1); right: var(--calha); z-index: var(--z-alto); width: calc(var(--e-10) + var(--e-6)); height: auto; cursor: pointer; --giro: var(--giro-4); transform: rotate(var(--giro)); }

.lp-rodape__assina { display: grid; gap: var(--e-4); justify-items: start; }
.lp-rodape__logo { max-width: none; }
.lp-rodape__logo svg { --giro: calc(var(--giro-2) * -1); width: min(100%, var(--lp-rodape-logo)); height: auto; aspect-ratio: var(--lp-logo-proporcao); overflow: visible; color: var(--tinta); transform: rotate(var(--giro)); }
.lp-rodape__casa { max-width: var(--medida-curta); font-family: var(--letra-titulo); font-weight: var(--peso-h4); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); }
.lp-rodape__contatos { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-6); font-size: var(--fs-texto-g); }
.lp-rodape__contatos li { max-width: none; }
.lp-rodape__contatos a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo-g); font-weight: var(--peso-semi); }

.lp-rodape__rotulo { margin-bottom: var(--e-2); font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-etiqueta); letter-spacing: var(--ls-etiqueta); }
.lp-rodape__lista { columns: 2 var(--e-10); column-gap: var(--e-6); }
.lp-rodape__lista li { break-inside: avoid; }
.lp-rodape__lista a { display: inline-flex; align-items: center; min-height: var(--alvo); color: var(--texto); font-weight: var(--peso-semi); text-decoration: none; }
.lp-rodape__lista a:hover { text-decoration: underline; text-decoration-color: var(--tomate); text-decoration-thickness: var(--traco-forte); text-underline-offset: var(--e-1); }
/* a última linha: o direito autoral, com o pesponto do capacho em cima (voltar ao começo é o botão flutuante) */
.lp-rodape__fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-5); padding-top: var(--e-5); border-top: var(--traco) dashed var(--linha-media-cor); }
.lp-rodape__legal { max-width: none; font-size: var(--fs-legenda); color: var(--texto-2); }
/* cada pedaço quebra inteiro: o nome, a razão social e o CNPJ com o número */
.lp-rodape__legal span { display: inline-block; }

@media screen and (min-width: 768px) {
  /* duas partes: quem é e como falar, de um lado; os atalhos, do outro */
  .lp-rodape__grade { grid-template-columns: minmax(0, var(--lp-col-texto)) minmax(0, var(--lp-col-lado)); grid-template-areas: "assina mapa" "fim fim"; align-items: end; }
  .lp-rodape__assina { grid-area: assina; }
  .lp-rodape__mapa { grid-area: mapa; }
  .lp-rodape__fim { grid-area: fim; }
}
/* a mascote grande só onde sobra lado: no tablet ela subia por cima do botão do "Pode entrar." */
@media screen and (min-width: 1100px) {
  .lp-rodape__mascote { width: var(--lp-rodape-mascote); top: calc(var(--e-10) * -1); }
}

/* -------------------------------------------------------------------------
   Três toques antes do WhatsApp (a janela do DS)
   ------------------------------------------------------------------------- */
.lp-qualifica .janela__corpo { gap: var(--e-4); }
.lp-qualifica [hidden] { display: none; }   /* o botão e o bloco do DS têm display próprio, que ganharia do hidden */
.lp-qualifica__porque { color: var(--tinta-2); }
.lp-qualifica__andamento { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); }
.lp-qualifica__andamento .progresso-blocos { --blocos: var(--lp-passos, 3); }
.lp-qualifica__passo { display: grid; gap: var(--e-4); }
.lp-qualifica__passo[hidden] { display: none; }
.lp-qualifica__passo h3:focus { outline: none; }
.lp-qualifica__opcoes { display: grid; gap: var(--e-3); padding-bottom: var(--e-2); padding-right: var(--e-1); }
.lp-qualifica__opcoes .botao { justify-content: flex-start; white-space: normal; text-align: left; }
.lp-qualifica__acoes { justify-content: space-between; }
.lp-qualifica__acoes [data-pular] { margin-left: auto; }

/* -------------------------------------------------------------------------
   Quem pede menos movimento: a troca é instantânea, sem colagem
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp-resposta.colando { animation: none; }
  .ampulheta__etapa { transition: none; }
  .celular__conversa .balao.chegou { animation: none; }
}

/* -------------------------------------------------------------------------
   Movimento pausado no botão do capacho: o que cola entra já colado.
   No DS, a pausa congela a animação de tudo que tem .respira, inclusive a
   colagem de entrada, que para no primeiro quadro (transparente): as tiras
   do "Pode entrar." sumiam (14/10). Mesmo efeito de quem pede menos movimento.
   ------------------------------------------------------------------------- */
html[data-movimento="pausado"] [data-colar].in { animation: none; opacity: 1; transform: rotate(var(--giro, 0deg)); }

/* -------------------------------------------------------------------------
   Política de privacidade (/privacidade/), 27/10/2026
   Uma coluna de leitura. A personalidade fica no título em chapa e no
   bilhete da geladeira; o resto é texto quieto, para ler com calma.
   ------------------------------------------------------------------------- */
.lp-politica-topo { padding-block: var(--lp-topo-cima) var(--e-8); }
.lp-politica-topo__miolo { display: grid; gap: var(--e-5); justify-items: start; max-width: var(--medida); }
.lp-politica-topo__titulo { font-size: var(--lp-manchete-fim); }
.lp-politica-topo__linha { max-width: var(--medida-curta); }
.lp-politica-topo__data { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }

.lp-politica { padding-block: var(--e-8) var(--e-9); }
.lp-politica__texto { display: grid; gap: var(--e-7); max-width: var(--medida); margin-inline: auto; }

.lp-politica__bilhete {
  --px: var(--lp-politica-px);
  justify-self: center;
  max-width: var(--medida-curta);
  margin-top: calc(var(--lp-politica-px) * var(--ima) * .5);
  font-size: var(--fs-destaque);
}

.lp-politica__indice { display: grid; gap: var(--e-3); padding-block: var(--e-5); border-block: var(--traco) solid var(--linha-cor); }
.lp-politica__indice-titulo { font-family: var(--letra-titulo); font-size: var(--fs-h5); font-weight: var(--peso-h4); line-height: var(--lh-ui); }
.lp-politica__lista-indice { display: grid; gap: var(--e-2); padding-left: var(--e-5); line-height: var(--lh-ui); }
@media screen and (min-width: 768px) {
  .lp-politica__lista-indice { display: block; columns: 2; column-gap: var(--e-6); }
  .lp-politica__lista-indice li { break-inside: avoid; margin-bottom: var(--e-2); }
}

.lp-politica__secao {
  display: grid;
  gap: var(--e-3);
  font-size: var(--fs-texto);
  line-height: var(--lh-texto);
  scroll-margin-top: calc(var(--lp-barra-altura) + var(--e-5));
}
.lp-politica__secao h2 {
  display: grid;
  grid-template-columns: var(--lp-politica-num) 1fr;
  align-items: baseline;
  font-family: var(--letra-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-h4);
  line-height: var(--lh-titulo-2);
}
.lp-politica__num { font-family: var(--letra-numero); font-weight: var(--peso-normal); color: var(--lilas-tinta); }
.lp-politica__secao > :not(h2) { margin-left: var(--lp-politica-num); }
.lp-politica__secao ul, .lp-politica__secao ol { display: grid; gap: var(--e-2); padding-left: var(--e-5); }
@media screen and (max-width: 767px) {
  .lp-politica__secao > :not(h2) { margin-left: 0; }
}

/* o item de apagar é o que a Meta e quem chega procuram: fica numa folha branca colada */
.lp-politica__secao--apagar { padding: var(--e-5); background: var(--branco); border-radius: var(--raio-papel); box-shadow: var(--sombra-colada); }

.lp-politica-pe { padding-block: var(--e-7); }
.lp-politica-pe__miolo { display: grid; gap: var(--e-4); justify-items: start; max-width: var(--medida); }