:root {
  --azul: #0a5ca8;
  --verde: #0c6b3c;
  --verde-vivo: #12b85c;
  --amarelo: #f6c90a;
  /* largura da capa; a arte original tem 1080 x 1920 */
  --l: min(100vw, 56.25vh);
  --u: calc(var(--l) / 1080);
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  font-family: "Montserrat", system-ui, sans-serif;
  background: linear-gradient(rgba(4, 38, 74, .62), rgba(4, 38, 74, .62)), url("assets/fundo-topo.webp") center top / cover no-repeat;
  background-color: var(--azul);
  display: flex;
  justify-content: center;
}

@media (max-aspect-ratio: 9/16) {
  :root { --l: 100vw; }
}

.capa {
  position: relative;
  width: var(--l);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  border-style: solid;
  border-width: calc(270 * var(--u)) calc(30 * var(--u)) calc(230 * var(--u));
  border-image: url("assets/moldura.webp") 270 30 230 stretch;
}

.painel {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--verde);
  overflow: hidden;
}

.hero {
  position: relative;
  flex: 1;
  min-height: calc(860 * var(--u));
  background: var(--verde-vivo);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amarelo);
  clip-path: polygon(0 0, 100% 0, 100% calc(270 * var(--u)), 0 calc(390 * var(--u)));
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul);
  clip-path: polygon(100% calc(400 * var(--u)), 100% 100%, 12% 100%);
}

.chamada {
  position: relative;
  z-index: 1;
  padding-top: calc(30 * var(--u));
  font-weight: 900;
  font-size: calc(122 * var(--u));
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--verde);
}

.foto {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 290 * var(--u));
  display: block;
}

.letreiro {
  overflow: hidden;
  padding: calc(14 * var(--u)) 0;
  background: var(--amarelo);
  border-block: calc(5 * var(--u)) solid var(--verde);
  color: var(--verde);
  font-weight: 800;
  font-size: calc(30 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}

.letreiro span {
  display: inline-block;
  animation: correr 40s linear infinite;
}

@keyframes correr {
  to { transform: translateX(-50%); }
}

.redes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(22 * var(--u));
  padding: calc(30 * var(--u)) calc(50 * var(--u)) calc(36 * var(--u));
}

.botao {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  border-radius: calc(26 * var(--u));
  color: var(--verde);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, .28);
  transition: transform .12s, box-shadow .12s;
}

.botao:hover { transform: translateY(calc(-3 * var(--u))); }
.botao:active { transform: translateY(calc(6 * var(--u))); box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .28); }
.botao:focus-visible, .atalho:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.whatsapp { background: var(--amarelo); }

.botao svg {
  flex: none;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
}

.botao strong {
  display: block;
  font-weight: 800;
  font-size: calc(46 * var(--u));
  line-height: 1.1;
}

.faixa {
  position: absolute;
  left: calc(120 * var(--u));
  right: calc(50 * var(--u));
  bottom: calc(-157 * var(--u));
  height: calc(50 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(30 * var(--u));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

.atalho { position: absolute; bottom: calc(-94 * var(--u)); height: calc(60 * var(--u)); }
.atalho.fb { left: calc(420 * var(--u)); width: calc(305 * var(--u)); }
.atalho.ig { left: calc(750 * var(--u)); width: calc(240 * var(--u)); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .letreiro span { animation: none; }
}