:root {
  color-scheme:dark;
  --pad:clamp(22px,5vw,85px);
  --ink:#f0eee7
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#111;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible {
  outline:2px solid #ec9383;
  outline-offset:5px
}
.skip {
  position:fixed;
  top:8px;
  left:8px;
  background:#eee;
  color:#111;
  padding:14px;
  z-index:20;
  transform:translateY(-170%)
}
.skip:focus {
  transform:translateY(0)
}
.gallery-header {
  margin:0 var(--pad);
  padding:35px 0;
  border-bottom:1px solid #fff3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}
.gallery-logo {
  font-weight:800;
  letter-spacing:4px;
  font-size:23px
}
.gallery-logo>span {
  font-size:7px;
  font-weight:400;
  letter-spacing:2px;
  display:block;
  margin-top:7px
}
.gallery-header>span {
  font-family:monospace;
  font-size:8px;
  letter-spacing:1px;
  color:#aaa99f
}
.gallery-intro {
  padding:55px var(--pad) 45px
}
.gallery-intro>p {
  font-size:8px;
  letter-spacing:2px;
  color:#c07b6b;
  margin:0 0 22px
}
.gallery-intro h1 {
  font-size:clamp(40px,4.5vw,70px);
  letter-spacing:-3px;
  font-weight:400;
  line-height:1.04;
  margin:0
}
.gallery-intro>div {
  display:flex;
  gap:30px;
  align-items:center;
  margin-top:30px
}
.gallery-intro>div>span {
  font-family:monospace;
  font-size:10px;
  color:#c7a18a
}
.gallery-intro>div>p {
  font-size:12px;
  line-height:1.8;
  color:#b6b1a5;
  margin:0
}
.gallery-grid {
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 30px
}
.choice {
  min-width:0;
  border:1px solid #fff3;
  background:#171717
}
.preview {
  position:relative;
  aspect-ratio:1.6;
  overflow:hidden;
  border-bottom:1px solid #fff3;
  background:#111
}
.preview iframe {
  position:absolute;
  left:0;
  top:0;
  width:1440px;
  height:900px;
  border:0;
  transform:scale(.3);
  transform-origin:0 0;
  pointer-events:none
}
.preview-cover {
  position:absolute;
  inset:0;
  z-index:2
}
.choice-info {
  padding:25px 28px 28px
}
.choice-heading {
  display:flex;
  gap:18px;
  align-items:center
}
.choice-heading>span {
  font-family:monospace;
  font-size:9px;
  color:#c98675
}
.choice-heading h2 {
  margin:0;
  flex:1;
  font-size:29px;
  font-weight:400;
  letter-spacing:-1px
}
.choice-heading h2>a {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.choice-heading h2>a>span {
  font-size:27px;
  color:#c98675;
  font-weight:400
}
.choice-info>p {
  font-size:12px;
  color:#bbb5a9;
  line-height:1.8;
  max-width:400px;
  min-height:44px;
  margin:17px 0
}
.choice-info>small {
  font-size:8px;
  letter-spacing:1px;
  color:#aaa395;
  text-transform:uppercase;
  display:block
}
.open-demo {
  margin-top:25px;
  border-top:1px solid #fff2;
  min-height:44px;
  padding-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#dfd7c8
}
.open-demo>span {
  font-size:18px;
  color:#c98675
}
.choice:hover {
  border-color:#a9846b
}
.choice-2 {
  background:#eeece3;
  color:#171b16
}
.choice-2 .choice-info>p {
  color:#51584b
}
.choice-2 .choice-info>small {
  color:#5d6557
}
.choice-2 .choice-heading>span {
  color:#727968
}
.choice-2 .choice-heading h2>a>span {
  color:#8f1111
}
.choice-2 .open-demo {
  color:#171b16;
  border-color:#171b1633
}
.choice-3 {
  background:#17242c
}
.choice-3 .choice-info>p {
  color:#b0c2ce
}
.choice-3 .choice-info>small {
  color:#9aafb9
}
.choice-4 {
  background:#211c17
}
.choice-4 .choice-heading h2 {
  font-family:Georgia,serif
}
.choice-4 .choice-info>p {
  color:#c3b194
}
.gallery-note {
  margin:40px var(--pad);
  font-size:10px;
  line-height:1.8;
  color:#aaa193;
  max-width:750px
}
footer {
  margin:0 var(--pad);
  padding:25px 0;
  border-top:1px solid #fff3;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-family:monospace;
  font-size:7px;
  letter-spacing:1px;
  color:#a69c8b
}
@media(min-width:1800px) {
  body {
  max-width:1800px;
  margin:auto
}

}
@media(max-width:700px) {
  .gallery-header {
  padding-block:25px
}
.gallery-logo {
  font-size:20px;
  letter-spacing:3px
}
.gallery-logo>span {
  font-size:6px
}
.gallery-header>span {
  font-size:6px;
  letter-spacing:.5px;
  max-width:105px;
  text-align:right;
  line-height:1.8
}
.gallery-intro {
  padding-top:40px;
  padding-bottom:30px
}
.gallery-intro>p {
  font-size:7px;
  letter-spacing:1.4px
}
.gallery-intro h1 {
  font-size:43px;
  letter-spacing:-2px
}
.gallery-intro>div {
  gap:22px;
  margin-top:25px
}
.gallery-intro>div>span {
  font-size:8px
}
.gallery-intro>div>p {
  font-size:10px
}
.gallery-grid {
  grid-template-columns:1fr;
  gap:25px
}
.choice-info {
  padding:22px
}
.choice-heading h2 {
  font-size:27px
}
.choice-info>p {
  font-size:11px;
  min-height:0
}
.choice-info>small {
  font-size:7px;
  letter-spacing:.5px
}
.gallery-note {
  font-size:9px;
  margin-block:30px
}
footer {
  flex-wrap:wrap;
  font-size:6px;
  gap:18px
}

}
@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto
}

}


/* As quatro prévias incorporam os próprios sites. */
.choice-2{background:#171717;color:var(--ink)}.choice-2 .choice-info>p{color:#bbb5a9}.choice-2 .choice-info>small{color:#bda58b}.choice-2 .choice-heading>span{color:#c98675}.choice-2 .choice-heading h2>a>span{color:#c98675}.choice-2 .open-demo{color:#dfd7c8;border-color:#ffffff22}.choice-3{background:#1b241d}.choice-3 .choice-info>p{color:#bac5b0}.choice-3 .choice-info>small{color:#a9bc99}.choice-4{background:#211f1b}.choice-4 .choice-heading h2{font-family:Arial,Helvetica,sans-serif}.choice-4 .choice-info>p{color:#c2bcaa}