/*
 * O que é só da página de download. O resto (fontes, cores, botões, papel,
 * fita, desenhos e movimento) vem de /landing/styles.css, para as duas
 * páginas serem uma só.
 */

.pv-icon { width: 20px; height: 20px; flex: none; fill: none; }

/* Cabeçalho: sem menu, só a volta para o site e a entrada no app. */
.dl-back { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .dl-back { font-size: 0; gap: 0; }
  .dl-back .pv-icon { width: 22px; height: 22px; }
}

/* Capa: a foto do tablet, o título e o celular desenhado. */
.dl-hero { min-height: 0; padding: 148px 0 104px; }
.dl-hero .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.dl-badge-icon {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 999px; background: var(--yellow); color: var(--navy);
}
.dl-badge-icon .pv-icon { width: 15px; height: 15px; }
.dl-where { display: block; position: relative; width: fit-content; color: var(--yellow); font-style: italic; padding-bottom: .2em; }
.dl-scribble { position: absolute; left: -.08em; right: -.08em; bottom: -.04em; }
.dl-scribble .sk { display: block; width: 100%; height: auto; }
.dl-phone { max-width: 300px; }
.dl-phone .sk { width: 190px; }
.dl-phone figcaption { font-size: 1.45rem; line-height: 1; color: var(--ink-soft); }

/* Versões: fichas de papel com traço de caneta, como as da landing. */
.dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.dl-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 24px 24px; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 4px 10px 6px 12px;
  box-shadow: 6px 6px 0 var(--hl);
}
.dl-card:nth-child(odd) { rotate: -.6deg; }
.dl-card:nth-child(even) { rotate: .7deg; }
.dl-card h3 { font-size: 1.4rem; margin: 18px 0 6px; }
.dl-card p { color: var(--ink-soft); font-size: .98rem; }
.dl-icon {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; color: var(--ink);
}
/* A mancha amarela atrás do ícone, como nos ícones desenhados da landing. */
.dl-icon::before {
  content: ""; position: absolute; inset: 10px 4px 2px 12px; z-index: 0;
  background: var(--hl); opacity: .55; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
  rotate: -8deg;
}
.dl-icon .pv-icon { position: relative; width: 34px; height: 34px; }
/* Na prancheta escura a mancha meio transparente vira oliva: fica cheia. */
@media (prefers-color-scheme: dark) {
  .dl-card:not(.dl-card--web) .dl-icon { color: var(--navy); }
  .dl-card:not(.dl-card--web) .dl-icon::before { opacity: .92; }
}
.dl-action { margin-top: auto; padding-top: 24px; min-height: 74px; display: flex; align-items: flex-end; }
.dl-soon { font-size: 1.5rem; line-height: 1; color: var(--ink-soft); }
.dl-action .btn { min-height: 46px; padding: 0 20px; }

/* O sistema de quem abre: a fita da landing e um bilhete à mão. */
.dl-card--current { box-shadow: 9px 9px 0 var(--hl); }
.dl-card--current::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 92px; height: 24px;
  translate: -50% 0; rotate: -3deg;
  background: rgb(244 229 16 / .82); box-shadow: 0 2px 6px rgb(0 0 0 / .15);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
}
.dl-card--current h3::after {
  content: "seu sistema"; margin-left: 10px;
  font: 700 1.25rem/1 var(--hand); color: var(--ink-soft); letter-spacing: 0;
}

/* O navegador já funciona: ficha amarela, a única cor cheia da grade. */
.dl-card--web { background: var(--yellow); border-color: var(--navy); color: var(--navy); --hl: var(--navy); }
.dl-card--web p { color: rgb(13 28 44 / .78); }
.dl-card--web .dl-icon { color: var(--navy); }
.dl-card--web .dl-icon::before { background: var(--navy); opacity: .12; }
.dl-card--web h3::after { color: rgb(13 28 44 / .7); }
.dl-btn-dark { background: var(--navy); color: var(--yellow); }
.dl-btn-dark:hover { transform: translateY(-2px); }
.dl-btn-file { background: var(--ink); color: var(--paper); }
.dl-btn-file:hover { transform: translateY(-2px); }

.dl-note {
  margin-top: 56px; padding-top: 22px; border-top: 2px dashed var(--line);
  font-size: 1.55rem; line-height: 1.3; color: var(--ink-soft);
}

/* Aviso do Windows: uma linha simples, sem nada técnico. */
.dl-tip { margin-top: 20px; max-width: 72ch; color: var(--ink-soft); font-size: .98rem; }

.dl-footer { padding: 28px 0; }
.dl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--on-dark-soft); font-size: .9rem; }
.dl-foot a { text-decoration: none; }
.dl-foot a:hover { color: var(--on-dark); }

@media (prefers-reduced-motion: no-preference) {
  .js .dl-phone.rise { transform: translateY(40px) rotate(8deg); }
  .js.loaded .dl-phone.rise { transform: rotate(3deg); }
  .js .dl-scribble .sk path { stroke-dashoffset: 1; }
  .js.loaded .dl-scribble .sk path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.65, .05, .3, 1) 1s; }
  .dl-card { transition: translate .45s var(--ease), box-shadow .45s var(--ease); }
  .dl-card:hover { translate: 0 -6px; box-shadow: 10px 12px 0 var(--hl); }
}

@media (max-width: 1024px) {
  .dl-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-phone { justify-self: start; }
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .dl-hero { padding: 112px 0 72px; }
  .dl-phone { justify-self: center; max-width: 230px; padding: 24px 20px 18px; }
  .dl-phone .sk { width: 140px; }
  .dl-phone figcaption { font-size: 1.2rem; }
  .dl-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .dl-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 20px; }
  .dl-icon { grid-row: span 2; }
  .dl-card h3 { margin: 0 0 2px; font-size: 1.25rem; }
  .dl-action { grid-column: 1 / -1; min-height: 0; padding-top: 14px; }
  .dl-note { margin-top: 40px; font-size: 1.35rem; }
}