/* Seções 2 a 7 da landing nova · v2 "A chave e o papel" (plano da Duda em design-imagem/detalhes.md,
   medidas dos mockups design-imagem/mockups/v2-sec-02 a v2-sec-07). Seção de chave = escura; seção de papel = clara. */

.secao {
  --pad: clamp(96px, 11vw, 168px);
  position: relative;
  padding: var(--pad) 0;
  background: radial-gradient(55% 60% at 100% 0%, rgba(255, 138, 0, 0.09), transparent 70%), var(--fundo);
}
.secao__in { max-width: calc(var(--larg) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.rotulo { margin: 0 0 18px; font: 500 0.9375rem/1 var(--corpo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--laranja-claro); }
.titulo-2 {
  margin: 0;
  font: 800 clamp(2.5rem, 5.4vw, 5rem)/1.02 var(--titulo);
  letter-spacing: -0.028em;
  word-spacing: 0.06em;
  text-wrap: balance;
}
.apoio { margin: 24px 0 0; max-width: 32rem; font-size: clamp(1.0625rem, 1.5vw, 1.4375rem); line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.mini { display: block; font: 400 0.8125rem/1 var(--mono); color: var(--texto-2); letter-spacing: 0.08em; text-transform: uppercase; }

/* superfície de papel: papel de recibo, tinta quase preta, luz de dia vinda da direita */
.papel {
  --texto: #1a1714;
  --texto-2: #5e564d;
  --linha: #dcd3c6;
  color: var(--texto);
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
    #f3ede3;
}
.papel .rotulo { color: #a84800; }
.papel :focus-visible { outline-color: #a84800; }

/* ---------- 2 · extrato: o recibo sai da impressora térmica ---------- */
.extrato__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.extrato__texto { align-self: center; }
.canais { margin: 22px 0 0; color: var(--texto-2); font-size: 1.0625rem; }
.canais span { font-family: var(--mono); font-size: 0.9375rem; color: var(--texto); }
/* a impressora encosta no topo da seção, como se estivesse presa na borda */
.extrato__doc { margin: calc(-1 * var(--pad)) 0 0; justify-self: center; width: min(100%, 340px); position: relative; }
.impressora {
  position: relative; z-index: 2;
  height: 118px; margin: 0 6px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, #34302c 0%, #1b1917 55%, #0f0e0d 100%);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 0 26px 40px -18px rgba(40, 26, 12, 0.55);
}
.impressora__fenda {
  position: absolute; left: 9%; right: 9%; bottom: 22px; height: 9px;
  border-radius: 5px; background: #050505;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* o papel nasce dentro da fenda: a caixa recorta o que ainda não saiu */
.recibo {
  position: relative; z-index: 1;
  width: calc(82% - 8px); margin: -26px auto 0;
  padding: 44px 22px 118px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), transparent 34px), #fcfaf6;
  color: #1d1915;
  font: 400 0.9375rem/1.45 var(--mono);
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 18px 16px rgba(70, 45, 20, 0.16));
  /* borda serrilhada embaixo */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
}
.recibo__cab { margin: 0; font-weight: 700; letter-spacing: 0.06em; }
.recibo__barra { display: flex; height: 8px; margin: 12px 0 18px; }
.recibo__barra i { flex: 0 0 var(--p); }
.recibo__barra i:nth-child(1) { background: var(--laranja); }
.recibo__barra i:nth-child(2) { background: var(--ambar); }
.recibo__barra i:nth-child(3) { background: #cbbfae; }
.recibo__barra i:nth-child(4) { background: #8a8177; }
.recibo__linhas { margin: 0; display: grid; gap: 9px; }
.recibo__linhas div { display: flex; justify-content: space-between; gap: 12px; }
.recibo__linhas dt { text-transform: uppercase; letter-spacing: 0.03em; }
.recibo__linhas dd { margin: 0; }
.recibo__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 16px 0 0; padding-top: 12px;
  border-top: 1.5px dashed #1d1915;
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em;
}
.recibo__total strong { font-size: 1.5rem; letter-spacing: 0; padding-bottom: 2px; border-bottom: 4px double #1d1915; }
.carimbo {
  position: absolute; right: 26px; bottom: 40px;
  padding: 5px 12px 4px;
  border: 3px solid #c2362c; border-radius: 5px;
  color: #c2362c; font: 700 1.1875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.88;
  /* tinta falhada de carimbo de verdade */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- 3 · cobrança: um boleto só, viajando pela correia de couro ---------- */
.cobranca__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; }
.cobranca__titulo { font-size: clamp(2.375rem, 4.7vw, 4.5rem); max-width: 15ch; }
.cobranca__titulo span { display: block; color: #a39a8f; }
.cobranca__valor {
  margin: 0; justify-self: end; text-align: right;
  font: 400 clamp(2.5rem, 6vw, 5.75rem)/1 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cobranca__valor .mini { margin-bottom: 14px; letter-spacing: 0.12em; }
.correia { --h: clamp(64px, 7vw, 96px); position: relative; margin-top: clamp(80px, 9vw, 128px); }
.correia__couro {
  position: absolute; left: 0; right: 0; top: 0; height: var(--h);
  background:
    linear-gradient(180deg, rgba(255, 226, 190, 0.22), transparent 28%, transparent 68%, rgba(40, 12, 0, 0.45)),
    url("../img/couro.jpg") center / 520px auto;
  box-shadow: 0 22px 40px -16px rgba(0, 0, 0, 0.85);
}
/* pesponto nas duas bordas */
.correia__couro::before, .correia__couro::after {
  content: ""; position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed rgba(255, 216, 168, 0.8);
}
.correia__couro::before { top: 10px; }
.correia__couro::after { bottom: 10px; }
.correia__trilho { position: relative; max-width: calc(var(--larg) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.correia__estacoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.correia__estacoes li {
  position: relative; padding-top: calc(var(--h) + 20px); text-align: center;
  font: 400 clamp(0.8125rem, 1.15vw, 1.0625rem)/1.3 var(--mono); color: var(--texto-2);
  transition: color .4s;
}
/* rebite de latão em cada estação */
.correia__estacoes li::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--h) / 2 - 10px); width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c7 0 8%, #d9b067 30%, #8a6326 75%, #4d3410 100%);
  box-shadow: 0 2px 3px rgba(40, 12, 0, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}
.correia__estacoes li.feito { color: var(--texto); }
.correia__estacoes li:last-child.feito { color: var(--laranja-claro); }
.boleto {
  --p: 1;
  position: absolute; top: calc(var(--h) / 2 - 86px);
  left: calc(var(--margem) + (100% - 2 * var(--margem)) * (0.125 + 0.75 * var(--p)));
  width: clamp(150px, 15vw, 200px);
  padding: 12px 14px 14px;
  border-radius: 3px;
  background: #f8f3ea; color: #1d1915;
  box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(0, 0, 0, 0.12);
  transform: translateX(-50%) rotate(calc(-7deg + 5deg * var(--p)));
  will-change: left, transform;
}
.boleto__cab { display: flex; justify-content: space-between; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #d8cfc2; font: 400 0.6875rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.boleto__corpo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.boleto__corpo img { width: clamp(38px, 3.6vw, 50px); height: auto; image-rendering: pixelated; }
.barras {
  flex: 1; height: 34px;
  background: repeating-linear-gradient(90deg, #1d1915 0 2px, transparent 2px 4px, #1d1915 4px 5px, transparent 5px 8px, #1d1915 8px 11px, transparent 11px 13px);
}
/* quando chega na última estação: o canto fica verde e aparece o visto */
.boleto__ok {
  position: absolute; right: -11px; bottom: -11px; width: 26px; height: 26px; border-radius: 50%;
  background: #2ea44f; box-shadow: 0 0 0 3px #f8f3ea, 0 4px 8px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: scale(0.4); transition: opacity .25s, transform .35s var(--curva);
}
.boleto__ok::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.boleto.pago .boleto__ok { opacity: 1; transform: none; }
.boleto.pago { background: linear-gradient(315deg, #d6f0dc 0 16%, #f8f3ea 16%); }

/* ---------- 4 · cálculo: a fita da calculadora desce do topo ---------- */
.calculo__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.calculo__texto { padding-top: clamp(8px, 3vw, 40px); }
.calculo__titulo { font-size: clamp(2.75rem, 6.4vw, 6rem); max-width: 9ch; }
.calculo__nota { margin: 28px 0 0; font: 400 0.9375rem/1.4 var(--mono); color: var(--texto-2); max-width: 30ch; }
.fita-caixa { justify-self: center; width: min(100%, 300px); margin-top: calc(-1 * var(--pad)); }
.fita {
  list-style: none; position: relative;
  margin: 0; padding: calc(var(--pad) + 8px) 24px 34px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.035)), #fdfbf7;
  color: #1d1915;
  font: 400 0.875rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 20px 18px rgba(70, 45, 20, 0.16));
  /* rasgo no fim da fita */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -50deg at bottom, #0000, #000 1deg 100deg, #0000 101deg) bottom / 11px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -50deg at bottom, #0000, #000 1deg 100deg, #0000 101deg) bottom / 11px 7px repeat-x;
}
/* furo do grampo */
.fita::before { content: ""; position: absolute; left: 50%; top: calc(var(--pad) - 18px); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #d9cfc0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.conta { position: relative; display: grid; padding: 14px 0 16px; border-bottom: 1px dashed #cfc5b6; outline-offset: 4px; cursor: default; }
.conta:last-child { border-bottom: 0; }
.conta__titulo { margin-bottom: 6px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6259; }
.conta__linha { display: flex; justify-content: space-between; gap: 10px; }
.conta__soma { margin-top: 4px; padding-top: 4px; border-top: 1px solid #1d1915; font-weight: 700; }
/* a regra aparece por baixo da conta quando o mouse passa ou o foco chega */
.conta__detalhe { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--curva); }
.conta__detalhe > span { overflow: hidden; font: 500 0.8125rem/1.4 var(--corpo); color: #a84800; }
.conta:hover .conta__detalhe, .conta:focus-visible .conta__detalhe { grid-template-rows: 1fr; }
.conta:hover .conta__detalhe > span, .conta:focus-visible .conta__detalhe > span { padding-top: 8px; }
/* o vencimento é o erro mais comum da planilha: circulado a lápis */
.conta--marcada .conta__soma::after {
  content: ""; position: absolute; right: -14px; bottom: -6px; width: 112px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 40'%3E%3Cpath d='M14 8 C40 1 96 2 106 15 C114 27 82 37 52 37 C22 37 3 31 4 20 C5 12 22 6 40 5' fill='none' stroke='%23ff7a00' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(-3deg);
  pointer-events: none;
}
.conta__soma { position: relative; }

/* ---------- 5 · como funciona: o quadro de chaves da imobiliária ---------- */
.passos .titulo-2 { font-size: clamp(2.75rem, 6.6vw, 6rem); }
.quadro { position: relative; max-width: 1000px; margin: clamp(48px, 6vw, 80px) auto 0; }
.quadro__madeira {
  width: 100%; height: auto;
  /* o fundo da foto se dissolve na página */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* cada chave pende do gancho pelo topo da argola e balança em volta dele */
.quadro__chave {
  position: absolute; left: var(--x); top: 54.5%;
  width: 11%;
  container-type: inline-size;
  transform-origin: 28% 1.5%;
  transform: translateX(-28%) rotate(var(--a, 0deg));
  filter: drop-shadow(6px 10px 8px rgba(0, 0, 0, 0.55));
}
.quadro__chave img { width: 100%; height: auto; }
.quadro__chave b {
  position: absolute; left: 61%; top: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font: 700 30cqw/1 'Caveat', cursive; color: #2b1305; opacity: 0.82;
}
.estacoes { list-style: none; max-width: 1000px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0 3.5%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.estacoes__n { display: block; font: 400 0.9375rem/1 var(--mono); color: var(--laranja-claro); }
.estacoes h3 { margin: 12px 0 0; font: 700 clamp(1.5rem, 2.4vw, 2.25rem)/1 var(--titulo); letter-spacing: -0.03em; }
.estacoes p { margin: 14px auto 0; max-width: 26ch; color: var(--texto-2); font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.45; }

/* ---------- 6 · planos: três vias de contrato em leque ---------- */
.planos__titulo { text-align: center; margin: 0 auto; max-width: 16ch; }
.planos__titulo::after { content: ""; display: block; width: 72px; height: 3px; margin: 30px auto 0; background: #8f857a; border-radius: 2px; }
.vias { margin: clamp(48px, 6vw, 80px) auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.via {
  position: relative; display: flex; flex-direction: column;
  padding: 38px 32px 32px; min-height: 100%;
  background: linear-gradient(180deg, #fffdf9, #faf6ef);
  border: 1px solid #e3dacd;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 28px 40px -26px rgba(70, 45, 20, 0.4), 0 2px 4px rgba(70, 45, 20, 0.06);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.via:first-child { transform: translate(22px, 30px) rotate(-2.5deg); }
.via:last-child { transform: translate(-22px, 30px) rotate(2.5deg); }
.via--pro { z-index: 2;transform: translateY(-4px); box-shadow: 0 40px 60px -30px rgba(70, 45, 20, 0.55), 0 2px 6px rgba(70, 45, 20, 0.08); }
/* passar o mouse puxa a folha para a frente */
.via:hover, .via:focus-within { z-index: 3; }
.via:first-child:hover, .via:first-child:focus-within { transform: translate(22px, 22px) rotate(-2.5deg); }
.via:last-child:hover, .via:last-child:focus-within { transform: translate(-22px, 22px) rotate(2.5deg); }
.via--pro:hover, .via--pro:focus-within { transform: translateY(-12px); }
.via h3 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--linha); font: 700 0.9375rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-2); }
.via--pro h3 { color: var(--texto); }
.via__preco { margin: 22px 0 0; font: 700 clamp(2.5rem, 4.4vw, 3.75rem)/1 var(--titulo); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.via__preco sup { font-size: 0.36em; letter-spacing: 0; vertical-align: 1.35em; }
.via__preco span { margin-left: 2px; font-size: 0.3em; letter-spacing: 0; color: var(--texto-2); }
.via ul { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; color: var(--texto-2); font-size: 1.0625rem; }
.via li { padding: 9px 0; border-bottom: 1px solid #ece4d8; }
.via .btn { margin-top: auto; min-height: 50px; font-size: 1rem; }
.btn--tinta { background: #1a1714; color: #f5efe6; }
.btn--tinta:hover { background: #000; }
.btn--linha { border: 1px solid #1a1714; color: #1a1714; }
.btn--linha:hover { background: #1a1714; color: #f5efe6; }
/* selo seco: mesma cor do papel, só luz e sombra */
.selo { position: absolute; right: 20px; top: 178px; width: 92px; height: 92px; transform: rotate(-12deg); pointer-events: none; }
.selo circle { fill: none; stroke: #e6ddcf; stroke-width: 2; }
.selo text { font: 700 10.5px var(--mono); letter-spacing: 2.6px; fill: #ebe2d4; }
.selo { filter: drop-shadow(-1px -1px 0 rgba(90, 65, 35, 0.28)) drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)); }

/* ---------- 7 · chamada e rodapé ---------- */
.chamada { padding-bottom: clamp(80px, 9vw, 130px); background: radial-gradient(60% 80% at 100% 40%, rgba(255, 138, 0, 0.1), transparent 70%), var(--fundo); }
.chamada__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: 32px; }
.chamada__titulo { margin: 0; font: 800 clamp(2.75rem, 6.4vw, 5.75rem)/1.02 var(--titulo); letter-spacing: -0.028em; word-spacing: 0.06em; max-width: 13ch; text-wrap: balance; }
.chamada__titulo em { font-style: normal; color: var(--laranja-claro); }
.chamada .btn { margin-top: 36px; font-weight: 700; padding: 0 30px; min-height: 60px; }
.chamada__foto { margin-right: calc(-1 * var(--margem)); }
.chamada__foto img {
  width: 100%; height: auto;
  /* a foto some para a esquerda e para baixo e vira a mesa da seção */
  -webkit-mask-image: radial-gradient(58% 50% at 62% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(58% 50% at 62% 50%, #000 45%, transparent 100%);
}
.rodape { border-top: 1px solid var(--linha); background: var(--fundo); }
.rodape__in {
  max-width: calc(var(--larg) + 2 * var(--margem)); margin: 0 auto;
  padding: 30px var(--margem) max(30px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 40px; color: var(--texto-2); font-size: 1rem;
}
.rodape nav { display: flex; gap: 22px; }
.rodape a:hover { color: var(--texto); }
.rodape small { margin-left: auto; font-size: 1rem; }
.marca--peq { font-size: 1.25rem; color: var(--texto); }
/* etiqueta de couro costurada fechando a página */
.rodape__etiqueta {
  position: relative;
  padding: 8px 16px 8px 30px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 226, 190, 0.2), rgba(40, 12, 0, 0.25)), url("../img/couro.jpg") center / 260px auto;
  color: #2a1205; font: 700 0.875rem/1 var(--corpo); white-space: nowrap;
  outline: 1.5px dashed rgba(255, 216, 168, 0.85); outline-offset: -5px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7);
}
.rodape__etiqueta::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--fundo); box-shadow: 0 0 0 2px #c9a25e; }

/* ---------- movimento (uma vez, curto; reduced motion vê tudo pronto) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--curva), transform .9s var(--curva); }
  .js .extrato__doc[data-revelar], .js .fita-caixa[data-revelar] { opacity: 1; transform: none; }
  [data-revelar].visivel { opacity: 1; transform: none; }

  /* o recibo imprime: sai da fenda, depois o carimbo bate torto */
  .extrato__doc { overflow: hidden; padding-bottom: 40px; margin-bottom: -40px; }
  .recibo { transition: transform 1.7s cubic-bezier(.45, .05, .35, 1); }
  .js .extrato__doc:not(.visivel) .recibo { transform: translateY(calc(-100% + 30px)); }
  .carimbo { transition: opacity .12s 1.85s, transform .18s var(--curva) 1.85s; }
  .js .extrato__doc:not(.visivel) .carimbo { opacity: 0; transform: rotate(-4deg) scale(1.3); }

  /* a fita desenrola de cima para baixo */
  .fita { transition: clip-path 1.4s cubic-bezier(.45, .05, .35, 1); clip-path: inset(0 -40px -40px -40px); }
  .js .fita-caixa:not(.visivel) .fita { clip-path: inset(0 -40px 100% -40px); }

  /* a chave é entregue: entra de lado e assenta com mola */
  .chamada__foto img { transition: transform .7s var(--curva) .1s, opacity .5s .1s; }
  .js .chamada__foto:not(.visivel) img { transform: translateX(40px) rotate(4deg); opacity: 0; }
}

/* sem mouse (celular, tablet): a regra de cada conta já vem aberta */
@media (hover: none), (max-width: 960px) {
  .conta__detalhe { grid-template-rows: 1fr; }
  .conta__detalhe > span { padding-top: 8px; }
  .so-mouse { display: none; }
}

/* ---------- tablet e celular ---------- */
@media (max-width: 960px) {
  .extrato__in, .calculo__in, .chamada__in, .cobranca__in { grid-template-columns: 1fr; }
  .extrato__doc { order: -1; width: min(100%, 300px); }
  .extrato__texto { margin-top: 8px; }
  .cobranca__valor { justify-self: start; text-align: left; }
  .correia__estacoes li { font-size: 0.75rem; padding-left: 4px; padding-right: 4px; }
  .boleto { top: calc(var(--h) / 2 - 70px); padding: 9px 10px 10px; }
  .boleto__cab { font-size: 0.5625rem; }
  .barras { height: 24px; }
  .fita-caixa { order: -1; width: min(100%, 290px); }
  .calculo__texto { padding-top: 24px; }
  .quadro { margin-left: calc(-1 * var(--margem) + 8px); margin-right: calc(-1 * var(--margem) + 8px); }
  .quadro__chave { width: 13%; }
  .estacoes { grid-template-columns: 1fr; text-align: left; gap: 28px; padding: 0; margin-top: 88px; }
  .estacoes li { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; }
  .estacoes__n { grid-row: span 2; padding-top: 6px; }
  .estacoes h3 { margin: 0; }
  .estacoes p { margin: 8px 0 0; }
  .vias { grid-template-columns: 1fr; max-width: 420px; }
  .selo { top: 66px; right: 16px; width: 80px; height: 80px; }
  .via:first-child, .via:last-child, .via--pro { transform: none; }
  .via:first-child { transform: rotate(-1deg); }
  .via:last-child { transform: rotate(1deg); margin-top: -8px; }
  .via--pro { order: -1; margin-bottom: -8px; }
  .via:first-child:hover, .via:last-child:hover, .via--pro:hover { transform: none; }
  .chamada__foto { order: -1; margin: 0 calc(-1 * var(--margem)) 8px; }
  .rodape__in { flex-wrap: wrap; gap: 16px 28px; }
  .rodape small { margin-left: 0; }
}