@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');

:root {
  --gitex-red: #ed1c24;
  --page-width: 620px;
  --button-height: 78px;
}

* { box-sizing: border-box; }
html { background: #f2f2f2; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  color: var(--gitex-red);
  background: #f2f2f2;
}

.page {
  width: min(100%, var(--page-width));
  min-height: 100svh;
  margin: 0 auto;
  padding: 70px 68px 36px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-link { display: block; text-decoration: none; }
.logo {
  width: 126px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gitex-red);
  display: grid;
  place-items: center;
}
.logo img { width: 78%; height: auto; display: block; }

.title {
  margin: 34px 0 36px;
  font-size: clamp(30px, 6.2vw, 43px);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -1.2px;
}

.menu {
  width: 100%;
  display: grid;
  gap: 28px;
}

.menu a {
  position: relative;
  min-height: var(--button-height);
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--gitex-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-size: clamp(21px, 4.4vw, 31px);
  line-height: 1.08;
  font-weight: 700;
  transition: transform .15s ease, filter .15s ease;
}
.menu a::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.6px solid #fff;
  border-radius: inherit;
  pointer-events: none;
}
.menu a:hover { transform: translateY(-2px); filter: brightness(.94); }
.menu a:focus-visible { outline: 4px solid rgba(237,28,36,.25); outline-offset: 4px; }

.socials {
  margin-top: auto;
  padding-top: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gitex-red);
  color: #fff;
  text-decoration: none;
  font-size: 23px;
  transition: transform .15s ease, filter .15s ease;
}
.socials a:hover { transform: translateY(-2px); filter: brightness(.92); }

.page-home { padding-top: 140px; }
.page-home .menu { margin-top: 104px; }
.page-home .socials { padding-top: 90px; }

.page-catalogos .title { margin-top: 38px; }
.page-catalogos .menu { gap: 30px; }

.page-fitas { padding-top: 44px; }
.page-fitas .logo { width: 126px; }
.page-fitas .title { margin: 30px 0 26px; }
.page-fitas .menu { gap: 13px; }
.page-fitas .menu a { min-height: 73px; }
.page-fitas .socials { padding-top: 42px; }

.page-ofertas { padding-top: 140px; }
.page-ofertas .title { margin: 38px 0 38px; }
.page-ofertas .menu { gap: 32px; }

@media (max-width: 520px) {
  :root { --button-height: 68px; }
  .page { padding-left: 28px; padding-right: 28px; }
  .page-home, .page-ofertas { padding-top: 86px; }
  .page-home .menu { margin-top: 72px; }
  .logo, .page-fitas .logo { width: 112px; }
  .socials { gap: 11px; padding-top: 54px; }
  .socials a { width: 40px; height: 40px; }
}