/* Original DeSofto look (blue-grey bars, grey page, 780px white column), rebuilt on divs. */
body {
  margin: 8px;
  background: #e5e5e5;
  color: #000;
  font: 16px/1.25 "Times New Roman", Times, serif;
}
a { color: #000080; text-decoration: none; }
a:hover { color: #f00000; text-decoration: underline; }
a:active { color: #f00; text-decoration: underline; }

.page { max-width: 780px; margin: 0 auto; background: #fff; border-left: 1px solid #000; border-right: 1px solid #000; }

.head { height: 70px; background: #688b9a url(/bg.gif) repeat-x; display: flex; align-items: center; padding: 0 20px; }
.brand { color: #fff; font-size: 32px; font-weight: bold; }
.head a:hover, .foot a:hover { color: #fff; text-decoration: none; }

.bar { background: #e5e5e5; display: flex; align-items: center; min-height: 28px; font-weight: bold; }
.bar .home { width: 120px; text-align: center; line-height: 0; }
.bar .home img { display: inline-block; vertical-align: middle; }
.bar .menu { flex: 1; }
.bar .lang { padding-right: 12px; }

main { padding: 28px 30px 20px; }
main > br { display: none; }
main h1 { margin: 0 0 18px; text-align: center; font-size: 1.5em; color: #00f; }
main h3 { margin: 16px 0; text-align: center; font-size: 1em; }
main p { margin: 1em 0; text-align: justify; }
main img { display: block; max-width: 100%; height: auto; margin: 12px auto; }
main img[data-fr] { float: right; margin: 10px 0 10px 20px; }
main ul { margin: 12px 0; padding: 0; list-style: none; }
main li { margin: 0 0 6px; padding-left: 20px; background: url(/pt.gif) no-repeat 2px .35em; }
main strong, main b { font-weight: bold; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 6px; }
.prod.wide { grid-column: 1 / -1; }
.prod-head { text-align: center; font-weight: bold; }
.prod-head img { float: left; margin: 0 8px 0 0; }
.prod-head a { display: block; }
.prod-name { font-size: 24px; margin-bottom: 4px; }
.prod-head hr { width: 85%; margin: 4px 0 6px auto; border: 0; border-top: 1px solid #888; border-bottom: 1px solid #fff; height: 0; }
.prod p { margin: 1em 0 0; }

.foot { height: 40px; margin-top: 18px; background: #688b9a url(/bg.gif) repeat-x; display: flex; align-items: center; justify-content: center; }
.foot a { color: #fff; }
.foot a:hover { text-decoration: underline; }
.copy { padding: 8px 0 10px; text-align: center; font-size: 13px; }

@media (max-width: 640px) {
  body { margin: 0; }
  .page { border: 0; }
  main { padding: 20px 14px; }
  .cards { grid-template-columns: 1fr; }
  .bar .home { width: 70px; }
}