/* Prodel Express · página "Sistema de gestão" (o "conheça" do site), sobre a base de lp.css
 * Pedido do cliente (30/09): uma área fora da página inicial que explica os controles do sistema, área por área,
 * na linha da página de sistema de gestão da TOTVS. Aqui a linguagem é a mesma da página inicial: documentos de papel,
 * sem foto de banco nem tela inventada. As listas de controles vêm do site do próprio cliente (prodelexpress.com.br).
 */

/* cabeçalho: a marca é link para a página inicial */
a.marca { min-height: 44px; border-radius: 3px; }  /* alvo de toque: a imagem do símbolo tem só 34 px de altura */

/* ── 1 · hero: o rastro impresso de um pedido, área por área ─────────── */
.s-hero { padding-top: clamp(36px, 6vh, 72px); }
.s-hero .wrap { display: grid; gap: 36px; }
.s-hero .ancora { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.s-hero .ancora:hover { color: var(--ciano); }
.s-hero .micro { margin-top: 20px; }
.s-hero .palco { padding: 24px 0 12px; }
.s-rastro.impressao { margin: 0; width: min(100%, 460px); }
.s-rastro li { grid-template-columns: 84px 1fr; }
.s-rastro li span:first-child { padding-top: 2px; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.s-rastro li:last-child { color: var(--profundo); font-weight: 700; }
@media (min-width: 900px) {
  .s-hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .s-rastro.impressao { margin-left: auto; transform: rotate(1deg); }
}

/* ── 2 · os controles, área por área (folhas numeradas, como as da página inicial) ── */
.areas { background: var(--papel); padding: var(--dobra) 0; }
.areas-cab h2 { max-width: 18ch; }
.areas-cab .lead { margin-top: 16px; font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); line-height: 1.5; color: var(--tinta-2); max-width: 46ch; }

/* sumário: índice do caderno, com o número da folha em mono */
.sumario { margin-top: 32px; }
.sumario ol { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--tinta); }
.sumario a { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--fio-claro);
  font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.sumario a:hover { color: var(--profundo); }
.sumario i { font-family: var(--mono); font-style: normal; font-weight: 400; font-size: .78rem; color: var(--tinta-3); }
@media (min-width: 560px) { .sumario ol { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 900px) { .sumario ol { grid-template-columns: repeat(4, 1fr); } }

/* cada área: nome e uma frase à esquerda, a lista de controles à direita */
.area { margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 2px solid var(--tinta); display: grid; gap: 18px;
  scroll-margin-top: calc(var(--alto-topo) + 16px); }
.area h3 { margin-top: 8px; font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); letter-spacing: -.02em; text-transform: none; line-height: 1.1; }
.area header p { margin-top: 10px; color: var(--tinta-2); max-width: 36ch; }
.controles { column-gap: 36px; }
.controles li { break-inside: avoid; display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px dotted #C9CFD8; font-size: .98rem; line-height: 1.4; }
.controles li::before { content: ''; width: 9px; height: 9px; border: 1.5px solid var(--profundo); }
@media (min-width: 640px) { .controles { columns: 2; } }
@media (min-width: 900px) {
  .area { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .area header { position: sticky; top: calc(var(--alto-topo) + 24px); }  /* o nome da área acompanha a lista longa */
}

/* ── 3 · como funciona por dentro: ficha técnica ─────────────────────── */
.s-ficha { background: #fff; padding: var(--dobra) 0; }
.s-ficha .wrap { display: grid; gap: 32px; }
.s-ficha h2 { max-width: 14ch; }
.s-ficha .btn { margin-top: 26px; }
.ft { border-top: 2px solid var(--tinta); }
.ft > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--fio-claro); }
.ft dt { font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); padding-top: 3px; }
.ft dd { color: var(--tinta-2); max-width: 62ch; }
@media (min-width: 640px) { .ft > div { grid-template-columns: 150px 1fr; gap: 24px; } }
@media (min-width: 900px) { .s-ficha .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; } }