@font-face {
  font-family: Nunito;
  src: url('assets/nunito.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color: #4c0708;
  background: #fff5e2;
  font-family: Nunito, 'Trebuchet MS', sans-serif;
  line-height: 1.45;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: start center;
  padding: clamp(2rem, 8.5svh, 5rem) 1.1rem 2rem;
  background:
    radial-gradient(ellipse at 3% 0%, #ffe2a4 0, transparent 35%),
    radial-gradient(ellipse at 100% 95%, #ffe3ad 0, transparent 37%),
    linear-gradient(145deg, #fffaf0, #fff5e3 70%, #fff8e8);
}

.bio { width: min(100%, 33rem); }

.marca {
  display: grid;
  place-items: center;
  margin: 0 0 clamp(2.1rem, 6.5vw, 2.65rem);
}

.marca img {
  display: block;
  width: clamp(8.5rem, 35vw, 11rem);
  height: auto;
  mix-blend-mode: multiply;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.links { display: grid; gap: 1rem; }

.links a {
  display: grid;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}

.links a:focus-visible { outline: 3px solid #900009; outline-offset: 5px; }
.links a:active { transform: translateY(1px); }

.links .campanha {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1rem, 4.5vw, 1.75rem);
  gap: .65rem;
  justify-items: start;
  align-content: center;
  min-height: 13.9rem;
  color: #fff7e5;
  background: radial-gradient(ellipse at 92% 65%, #d83615 0, transparent 66%), linear-gradient(121deg, #740309, #a10a09 63%, #690307);
  border: 1px solid #a11817;
  border-radius: 1.65rem;
  box-shadow: 0 13px 28px #82180726, 0 2px 4px #82180726;
}

.campanha-arte {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 57%;
  background:
    linear-gradient(90deg, #810507 0%, #810507aa 36%, #81050722 67%, transparent 86%),
    linear-gradient(0deg, #810507 0%, #81050700 28%),
    url('assets/campanha-social.jpg') 95% 26% / auto 224% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 1%, #000 45%);
}

.unidade {
  color: #ffe395;
  font-size: clamp(.64rem, 2.65vw, .76rem);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.campanha-titulo {
  max-width: min(68%, 17.75rem);
  font-size: clamp(1.45rem, 6.4vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 1px 5px #620306;
}

.campanha-acao {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.65rem;
  margin-top: .4rem;
  padding: .48rem .85rem;
  border: 1px solid #ffe990;
  border-radius: 5rem;
  background: linear-gradient(180deg, #ffe47c, #ffcd24);
  box-shadow: 0 3px 0 #c37b08;
  color: #4c0708;
  font-size: clamp(.79rem, 3.25vw, .94rem);
  font-weight: 900;
}

.campanha-acao > span { font-size: 1.17rem; line-height: 1; }

.links .site {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: .8rem;
  min-height: 5.1rem;
  padding: .82rem clamp(.85rem, 4vw, 1.3rem);
  background: #fffcf6;
  border: 1px solid #eedcc5;
  border-radius: 1.3rem;
  box-shadow: 0 5px 16px #7b301110;
}

.site-icone {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  padding: .22rem;
  background: #fff0d6;
  border-radius: .78rem;
  mix-blend-mode: multiply;
}

.site-texto { display: grid; gap: .04rem; }
.site-texto strong { font-size: clamp(1rem, 4vw, 1.16rem); font-weight: 900; }
.site-texto > span { font-size: .86rem; color: #754d40; }
.site-seta { color: #9f080d; font-size: 1.42rem; line-height: 1; }

@media (min-width: 42rem) {
  body { place-items: center; }
  .links .campanha { min-height: 15.55rem; }
}

@media (hover: hover) {
  .links a:hover { transform: translateY(-3px); }
  .links .campanha:hover { box-shadow: 0 17px 34px #82180737; }
  .links .site:hover { box-shadow: 0 9px 21px #7b301123; }
}

@media (prefers-reduced-motion: reduce) {
  .links a { transition: none; }
}