:root {
  --black:#000;
  --red:#EF0606;
  --swirl:#D3CCC7;
  --off:#EFEEE8;
  --bg:var(--off);
  --fg:#000;
  --muted:#5d5853;
  --card:#fff;
  --line:var(--swirl);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#0c0c0c;
    --fg:#EFEEE8;
    --muted:#a39d97;
    --card:#171717;
    --line:#2c2b2a
  }
}
* {
  box-sizing:border-box;
  margin:0
}
html {
  scroll-behavior:smooth
}
body {
  font-family:Archivo,system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg)
}
a {
  color:inherit;
  text-decoration:none
}
:focus-visible {
  outline:2px solid var(--red);
  outline-offset:3px
}
.wrap {
  max-width:1200px;
  margin:0 auto;
  padding:0 28px
}
header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  color:var(--off)
}
header .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  font-size:1.05rem
}
.mark {
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--red);
  display:grid;
  place-items:center;
  flex:none
}
.mark img {
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover
}
nav {
  display:flex;
  align-items:center;
  gap:26px;
  font-weight:600;
  font-size:.92rem
}
nav a,
.dd>button {
  transition:color .2s
}
nav a:hover,
nav a:focus-visible,
.dd>button:hover,
.dd>button:focus-visible {
  color:var(--red)
}
.dd {
  position:relative
}
.dd>button {
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 0
}
.dd>button::after {
  content:"";
  width:6px;
  height:6px;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-2px)
}
.menu {
  position:absolute;
  top:100%;
  left:-16px;
  min-width:200px;
  background:#000;
  border:1px solid #2c2b2a;
  border-radius:12px;
  padding:8px;
  display:none
}
.dd:hover .menu,.dd:focus-within .menu {
  display:block
}
.menu a {
  display:block;
  padding:10px 14px;
  border-radius:8px
}
.menu a:hover {
  background:var(--red);
  color:#fff
}
.cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--red);
  color:#fff;
  border-radius:999px;
  padding:12px 26px;
  font-weight:800;
  font-size:.88rem
}
.cta:hover {
  background:var(--off);
  color:#000
}
.burger {
  display:none;
  background:none;
  border:0;
  color:inherit;
  font-size:1.6rem;
  cursor:pointer
}
.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  background:#000 url(../imagens/home-visual-1.jpg) center/cover;
  color:var(--off)
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.15) 35%,rgba(0,0,0,.88))
}
.hero .wrap {
  position:relative;
  padding-bottom:72px;
  width:100%
}
.hero h1 {
  font-stretch:75%;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(3.2rem,11vw,9rem);
  line-height:.88;
  letter-spacing:-.02em
}
.btns {
  display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap
}
.btn {
  display:inline-flex;
  align-items:center;
  height:54px;
  padding:0 34px;
  border-radius:999px;
  font-weight:800;
  font-size:.95rem;
  border:2px solid var(--off);
  transition:.2s
}
.btn.solid {
  background:var(--red);
  border-color:var(--red);
  color:#fff
}
.btn:hover {
  background:var(--off);
  border-color:var(--off);
  color:#000
}
section.s {
  padding:96px 0
}
h2 {
  font-stretch:78%;
  font-weight:900;
  font-size:clamp(2.2rem,5vw,3.8rem);
  line-height:.95;
  letter-spacing:-.02em;
  text-transform:uppercase
}
.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:40px
}
.tile {
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--card) center/cover;
  color:#fff
}
.tile::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.8))
}
.tile > .tile-title {
  position:absolute;
  z-index:1;
  left:26px;
  bottom:24px;
  font-stretch:78%;
  font-weight:900;
  font-size:clamp(1.6rem,3vw,2.4rem);
  text-transform:uppercase;
  transition:bottom .25s ease
}
.tile > .tile-description {
  position:absolute;
  z-index:1;
  right:26px;
  bottom:28px;
  left:26px;
  font-size:1rem;
  font-weight:500;
  font-stretch:normal;
  line-height:1.5;
  text-transform:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease
}
.tile:hover,
.tile:focus-visible {
  outline:3px solid var(--red)
}
.tile-personal:hover::after,
.tile-personal:focus-visible::after,
.tile-equipment:hover::after,
.tile-equipment:focus-visible::after {
  background:linear-gradient(180deg,rgba(0,0,0,.12) 15%,rgba(0,0,0,.88) 100%)
}
.tile-personal:hover .tile-title,
.tile-personal:focus-visible .tile-title,
.tile-equipment:hover .tile-title,
.tile-equipment:focus-visible .tile-title {
  bottom:116px
}
.tile-personal:hover .tile-description,
.tile-personal:focus-visible .tile-description,
.tile-equipment:hover .tile-description,
.tile-equipment:focus-visible .tile-description {
  opacity:1;
  transform:translateY(0)
}
@media (hover:none) {
  .tile-personal .tile-title,
  .tile-equipment .tile-title {
    bottom:116px
  }
  .tile-personal .tile-description,
  .tile-equipment .tile-description {
    opacity:1;
    transform:none
  }
}
.shop {
  background:var(--swirl);
  color:#000
}
.shop .tile {
  background-color:#fff;
  aspect-ratio:1/1
}
.shop .tile::after {
  display:none
}
.shop .tile:hover {
  outline:3px solid var(--red)
}
.lbl {
  display:inline-block;
  margin-top:14px;
  font-stretch:78%;
  font-weight:900;
  text-transform:uppercase;
  font-size:1.3rem
}
.lbl:hover {
  color:var(--red)
}
.shop .tile.c {
  background-size:contain;
  background-repeat:no-repeat
}
.shop .tile.c::after {
  background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.55))
}
.head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap
}
.go {
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:54px;
  padding:0 30px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-weight:800
}
.go svg {
  width:18px;
  height:18px
}
.go:hover {
  background:var(--off);
  color:#000
}
footer {
  background:#000;
  color:var(--off);
  padding:72px 0 28px
}
.fg {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:48px
}
.fl h4 {
  font-size:.95rem;
  margin:28px 0 12px;
  color:var(--red)
}
.fl a.l:hover {
  color:var(--red)
}
.fr h3 {
  font-stretch:80%;
  font-weight:900;
  text-transform:uppercase;
  font-size:1.3rem
}
.fr p {
  color:var(--swirl);
  margin:10px 0 28px;
  max-width:52ch;
  line-height:1.55
}
.fr h4 {
  font-size:.95rem;
  margin-bottom:12px;
  color:var(--red)
}
.fr ul {
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px
}
.fr li a:hover {
  color:var(--red)
}
.bot {
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid #2c2b2a;
  text-align:center;
  font-size:.82rem;
  color:var(--swirl);
  line-height:1.8
}
@media (max-width:1040px) {
  .burger {
    display:block
  }
  nav {
    position:absolute;
    top:84px;
    left:16px;
    right:16px;
    background:#000;
    border-radius:16px;
    padding:20px;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    display:none
  }
  nav.open {
    display:flex
  }
  nav .account-menu {
    margin-top:10px
  }
  .menu {
    position:static;
    display:none;
    background:none;
    border:0;
    padding:4px 0 0 12px
  }
  .dd:hover .menu,.dd:focus-within .menu {
    display:none
  }
  .dd.open .menu {
    display:block
  }
  .grid,.fg {
    grid-template-columns:1fr
  }
  .tile {
    aspect-ratio:4/3
  }
  section.s {
    padding:64px 0
  }
}
.toast {
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%,20px);
  background:#000;
  color:#EFEEE8;
  border:1px solid var(--red);
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:50
}
.toast.on {
  opacity:1;
  transform:translate(-50%,0)
}
.tile {
  scroll-margin-top:90px
}
.dev {
  color:var(--red);
  text-decoration:underline;
  font-weight:400
}
.dev:hover {
  color:var(--off)
}
* {
  scrollbar-color:#000 #D3CCC7
}
*::-webkit-scrollbar {
  width:12px;
  height:12px
}
*::-webkit-scrollbar-track {
  background:#D3CCC7
}
*::-webkit-scrollbar-thumb {
  background:#000;
  border-radius:8px;
  border:2px solid #D3CCC7
}
*::-webkit-scrollbar-thumb:hover {
  background:#2a2a2a
}