/* JuTec Impressoras: o azul e o amarelo da marca, a folha branca e a tira de teste CMYK */
:root {
  --azul: #0A3D91;
  --azul-fundo: #082F73;
  --tinta: #06214F;
  --amarelo: #FFD000;
  --folha: #FFFFFF;
  --gelo: #EEF3F9;
  --linha: #C9D6E6;
  --f-tit: "Saira Condensed", "Arial Narrow", sans-serif;
  --f-txt: "IBM Plex Sans", system-ui, sans-serif;
  --ease-enter: cubic-bezier(.2, .8, .25, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--tinta); background: var(--gelo); font: 400 17px/1.5 var(--f-txt); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid #E0007A; outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 30; padding: 10px 14px; color: #fff; background: var(--tinta); }
.skip:focus { top: 8px; }
.marco { position: absolute; top: 170px; left: 0; width: 1px; height: 1px; }
.page { max-width: 560px; margin: 0 auto; overflow-x: clip; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
main { padding: 0 20px; }
h2 { font: 800 clamp(32px, 9.4vw, 40px)/1.05 var(--f-tit); margin: 0 0 14px; }
h3 { font: 800 25px/1.1 var(--f-tit); margin: 0 0 3px; }
p { margin: 0; }
section { margin-top: 54px; }

/* Cena 1 */
.hero { padding: calc(14px + env(safe-area-inset-top)) 20px 18px; color: #fff; background: linear-gradient(180deg, var(--azul) 0, var(--azul-fundo) 100%); }
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hero__bar img { width: 58px; height: 58px; border-radius: 12px; }
.hero__bar a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 600; font-size: 15px; text-decoration: none; }
/* a boca da impressora */
.saida { position: relative; z-index: 2; height: 20px; margin: 0 -6px; background: var(--tinta); border-radius: 6px; box-shadow: inset 0 -5px 0 #000C2A; }
.led { position: absolute; right: 12px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--amarelo); }
.bandeja { overflow: hidden; margin-top: -6px; padding-bottom: 8px; }
.folha { position: relative; padding: 22px 18px 18px; color: var(--tinta); background: var(--folha); box-shadow: 0 8px 18px rgba(0, 12, 42, .35); }
.cmyk { display: flex; gap: 4px; margin-bottom: 10px; }
.cmyk i { width: 26px; height: 8px; background: #00AEEF; }
.cmyk i:nth-child(2) { background: #E0007A; }
.cmyk i:nth-child(3) { background: var(--amarelo); }
.cmyk i:nth-child(4) { background: #111; }
.folha h1 { font: 800 clamp(54px, 17vw, 76px)/.92 var(--f-tit); margin: 0; color: var(--azul); }
.folha h1 span { display: block; font-size: .62em; color: var(--tinta); }
.folha p { margin-top: 8px; font-weight: 600; font-size: 17px; }
.hero__foto { display: grid; grid-template-columns: 44% 1fr; gap: 14px; align-items: center; margin: 14px 0 0; }
.hero__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.hero__foto figcaption { font-size: 20px; font-weight: 600; line-height: 1.28; }
.ancora { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 4px; color: var(--amarelo); font-weight: 600; }

/* Abertura: a folha é puxada em passos, como no tracionador */
.js .hero:not(.pronto) .folha { transform: translateY(-101%); animation: folha-segura 0s 2.6s forwards; }
@keyframes folha-segura { to { transform: none; } }
.js .hero.abertura:not(.pronto) .folha { animation: puxa 1120ms steps(9, end) both, assenta 180ms 1120ms var(--ease-enter); }
.hero.abertura .led { animation: pisca 180ms steps(2, jump-none) 6; }
@keyframes puxa { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes assenta { 40% { transform: translateY(3px); } }
@keyframes pisca { 50% { background: #5C6A85; } }
.js .hero.sem-abertura:not(.pronto) .folha { transform: none; animation: fade 240ms both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.folha.is-puxa { animation: puxa-eco 420ms steps(4, end); }
@keyframes puxa-eco { from { transform: translateY(-14px); } to { transform: none; } }

/* Botões */
.links { display: grid; gap: 10px; margin-top: 24px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 16px; font: 800 22px var(--f-tit); color: var(--tinta); text-decoration: none; background: var(--folha); border: 2px solid var(--tinta); border-radius: 8px; cursor: pointer; transition: transform 120ms var(--ease-enter), background 120ms; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); background: var(--gelo); }
.btn--acao { background: var(--amarelo); }
.btn--acao:active { background: #E8BD00; }

.servico { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 2px solid var(--linha); }
.servico > i { display: grid; place-items: center; width: 52px; height: 52px; font-size: 22px; color: #fff; background: var(--azul); border-radius: 8px; }
.servico p { font-size: 16px; line-height: 1.4; }

.bulk { display: grid; grid-template-columns: 44% 1fr; gap: 16px; align-items: center; margin-inline: -20px; padding: 26px 20px; color: #fff; background: var(--azul); }
.bulk img { width: 100%; aspect-ratio: 1 / 1.15; object-fit: cover; border-radius: 10px; }
.bulk h2 { color: var(--amarelo); font-size: clamp(29px, 8.6vw, 36px); }
.bulk p { font-size: 16px; line-height: 1.4; }

.ajuda { margin-bottom: 14px; }
fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sinal { position: relative; display: block; cursor: pointer; }
.sinal input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sinal span { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; background: var(--folha); border: 2px solid var(--linha); border-radius: 8px; font-weight: 600; transition: background 140ms, border-color 140ms; }
.sinal span::before { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--tinta); border-radius: 4px; background: #fff; }
.sinal input:checked + span { background: #FFF6C7; border-color: var(--tinta); }
.sinal input:checked + span::before { background: var(--azul); box-shadow: inset 0 0 0 3px #fff; }
.sinal input:focus-visible + span { outline: 3px solid #E0007A; outline-offset: 2px; }
.campo { display: block; margin: 14px 0 6px; font-weight: 600; }
input[name="modelo"] { width: 100%; min-height: 50px; padding: 10px 12px; font: 400 17px var(--f-txt); color: var(--tinta); background: #fff; border: 2px solid var(--linha); border-radius: 8px; }
form .btn { margin-top: 14px; }

.final { display: grid; grid-template-columns: 36% 1fr; gap: 12px; align-items: center; padding: 20px 16px; background: var(--amarelo); border-radius: 12px; }
.final img { width: 100%; }
.final p { margin-bottom: 12px; font-weight: 600; }
.final .btn--acao { background: var(--folha); font-size: 20px; }
.flutuante { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px; color: var(--tinta); background: var(--amarelo); border: 2px solid var(--tinta); border-radius: 8px; font: 800 22px var(--f-tit); text-decoration: none; white-space: nowrap; visibility: hidden; opacity: 0; transform: translate(-50%, 16px); transition: opacity 240ms var(--ease-enter), transform 240ms var(--ease-enter), visibility 0s 240ms; }
.flutuante.is-visivel { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }

.rodape { margin-top: 44px; padding: 0 20px; text-align: center; font-size: 14px; }
.credito { display: flex; width: fit-content; align-items: center; gap: 14px; min-height: 44px; margin: 18px auto 0; text-align: left; font-size: 13px; line-height: 1.35; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.credito-txt strong { display: block; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.selo-b2 { --seal-ink: currentColor; --seal-accent: var(--azul); --seal-ring: 1.6 1.3; --seal-font: var(--f-txt); flex: none; width: 72px; height: 72px; overflow: visible; transition: rotate 320ms cubic-bezier(.22, 1, .36, 1); }
.selo-borda, .selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: .7; stroke-dasharray: var(--seal-ring); opacity: .75; }
.selo-texto { fill: var(--seal-ink); font-family: var(--seal-font); font-size: 6.3px; font-weight: 600; letter-spacing: .8px; }
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }
.credito:active .selo-b2 { rotate: -10deg; }
.selo-giro { transform-box: view-box; transform-origin: 50px 50px; }
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still, .selo-b2.is-still .selo-giro, .is-page-hidden .selo-b2, .is-page-hidden .selo-giro { animation-play-state: paused; }
}
/* Reduced motion: folha já impressa, com fade curto */
@media (prefers-reduced-motion: reduce) {
  .js .hero:not(.pronto) .folha, .hero .folha { transform: none; animation: fade 200ms both; }
  .hero.abertura .led, .folha.is-puxa { animation: none; }
  .flutuante { transform: translate(-50%, 0); transition: opacity 200ms, visibility 0s 200ms; }
  .btn, .sinal span { transition: none; }
  .credito:active .selo-b2 { rotate: none; }
}