.header {
  flex: 0 0 var(--header-height);
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem var(--main-inset);
  position: relative;
  z-index: var(--z-header);
}

.header__brand {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: var(--width-expanded);
  font-size: var(--brand-font-size);
  line-height: 1.05;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-drag: none;
}

.header__nav {
  display: flex;
  gap: 1rem;
  margin-left: 2rem;
}

.language-menu {
  margin-left: auto;
}.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-pad-y) var(--button-pad-x);
  border: var(--button-border) solid var(--color-fg);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-fg);
  font-family: var(--font-main);
  font-size: var(--button-font-size);
  font-stretch: var(--width-expanded);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  z-index: 10;
}

.button__label {
  display: block;
  width: 100%;
  text-align: center;
}

.button:hover {
  color: rgb(182, 8, 8);
  border-color: rgb(182, 8, 8);
}.cos-scr {
  display: inline;
}

.cos-scr__word {
  display: inline-block;
  white-space: nowrap;
}

.cos-scr__char {
  display: inline-block;
  transform-origin: center;
  line-height: 1;
  text-align: center;
}.language-menu {
  position: relative;
}.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.home__wipe {
  position: fixed;
  inset: 0;
  z-index: var(--z-wipe);
  background: var(--color-gallery-bg);
  transform: scaleY(0);
  transform-origin: top;
}

.home__title {
  flex: 0 0 var(--title-height);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-inline: var(--main-inset);
  font-size: calc(8.8vw - 0.176 * var(--main-inset));
  line-height: 0.7;
  font-stretch: var(--width-expanded);
  font-weight: var(--weight-bold);
  position: relative;
  z-index: var(--z-title);
}

.home__main {
  margin-top: 1.5rem;
  margin-inline: var(--main-inset);
  flex: 9 0 0;
  position: relative;
  background-color: #F6F6F6;
}

.button.home__gallery {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: var(--z-gallery);
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.home__secondary {
  flex: 2 0 0;
  display: flex;
  align-items: flex-start;
  padding: 1rem var(--main-inset);
}

.home__copy {
  flex: 1 1 auto;
  padding-inline: 0.75rem;
  font-size: var(--copy-font-size);
  text-align: justify;
  text-align-last: left;
  font-stretch: var(--width-standard);
  position: relative;
}
.home__copy:hover {
  z-index: var(--z-resist-hover);
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.home__clickToResist {
  font-size: clamp(1rem, 5cqi, 1.5rem);
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-right: 5rem;
  margin-left: 12rem;
  font-stretch: var(--width-expanded);
  padding: 0 var(--button-pad-x);
}
.home__clickToResist:hover {
  z-index: var(--z-resist-hover);
  border-color: var(--color-fg);
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-radius: 2rem;
  color: rgb(182, 8, 8);
  z-index: 10;
}

.home__footer {
  box-sizing: border-box;
  flex: 1;
  flex-direction: row;
  padding: 0 0 1rem 1rem;
  margin: 0;
  line-height: 0.2;
  font-size: 1.3rem;
}
.home__footer a {
  color: inherit;
}
.home__footer .home__social_icon svg {
  height: 2rem;
  width: auto;
  margin-left: 0.75em;
}
.home__footer .home__social_icon svg:hover {
  fill: rgb(182, 8, 8);
}
.home__footer .home__email_icon svg {
  height: 3rem;
  width: auto;
  transform: translateY(17%);
  margin-left: 0.5em;
}
.home__footer .home__email_icon svg:hover {
  fill: rgb(182, 8, 8);
}

.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  font-size: 1rem;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transform: translate(-50%, -50%);
  transition: top 0.4s ease, left 0.4s ease;
  border: 5px solid var(--color-fg);
  font-stretch: var(--width-expanded);
  z-index: 999;
}

.badge--home {
  top: 50%;
  left: 60%;
}.hero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--main-inset));
  right: calc(-1 * var(--main-inset));
  z-index: var(--z-hero);
  clip-path: inset(-100vh 0);
}

.hero__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.hero__item {
  position: relative;
  flex: 0 0 auto;
  height: var(--shirt-size);
  pointer-events: none;
}

.hero__shirt {
  user-select: none;
  -webkit-user-drag: none;
}

.hero__shirt--base {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 933/712;
}

.hero__shirt--us {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 5px solid transparent;
  border-radius: 50%;
  background-color: var(--color-fg);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.cursor--expanded {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-color: var(--color-fg);
  font-stretch: var(--width-expanded);
}

.cursor__label {
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cursor--expanded .cursor__label {
  opacity: 1;
}
.cursor__label:lang(es) {
  font-stretch: var(--width-standard);
  font-size: 0.85rem;
}

.cursor__word {
  grid-area: 1/1;
  transition: opacity 0.2s ease;
}

.cursor__word--drag,
.cursor__word--click {
  opacity: 0;
}

.cursor--drag .cursor__word--drag {
  opacity: 1;
}

.cursor--click .cursor__word--click {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor__label,
  .cursor__word {
    transition: none;
  }
}
body.cursor-hidden,
body.cursor-hidden * {
  cursor: none !important;
}

@media (pointer: coarse) {
  .cursor {
    display: none;
  }
}.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  background: #000;
}

.preloader__rive {
  width: min(60vw, 480px);
  height: min(60vw, 480px);
  filter: invert(1);
}@font-face {
  font-family: "Panell";
  src: url("/fonts/PanellCollectionVF.woff2") format("woff2"), url("/fonts/PanellCollectionVF.ttf") format("truetype");
  font-weight: 400 700;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-bg: #ffffff;
  --color-fg: #111111;
  --color-line: #e5e5e5;
  --font-main: 'Panell', system-ui, -apple-system, sans-serif;
  --width-compressed: 50%;
  --width-condensed: 65%;
  --width-narrow: 78%;
  --width-standard: 103%;
  --width-wide: 140%;
  --width-extended: 170%;
  --width-expanded: 200%;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --button-radius: 999px;
  --button-font-size: 1.2rem;
  --button-pad-x: 0.85em;
  --button-pad-y: 0.6em;
  --button-border: 7px;
  --brand-font-size: 1.6rem;
  --copy-font-size: 1.3rem;
  --shirt-size: 128%;
  --main-inset: 1rem;
  --color-gallery-bg: #2b2b2b;
  --color-frame: #000;
  --z-wipe: -1;
  --z-header: 4;
  --z-title: 1;
  --z-hero: 2;
  --z-gallery: 3;
  --z-resist: 3;
  --z-resist-hover: 3;
  --z-cursor: 9999;
  --z-preloader: 10000;
  --header-height: 4rem;
  --title-height: 6rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-main);
  font-stretch: var(--width-compressed);
  font-weight: var(--weight-bold);
}

.site-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 64em) {
  :root {
    --title-height: 4rem;
    --brand-font-size: 1.2rem;
    --button-font-size: 1rem;
    --copy-font-size: clamp(0.2rem, 2.4vh, 1.1rem);
    --shirt-size: 115%;
  }
  .home__main {
    flex: 1 1 auto;
  }
  .home__secondary {
    flex: 0 1 auto;
  }
  .home__title {
    white-space: nowrap;
  }
  .home__copy {
    flex: 1 1 auto;
  }
  .home__resist {
    display: none;
  }
  .home__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    padding: 0.3rem var(--main-inset);
    margin: 0;
    line-height: 1;
    font-size: 0.65rem;
  }
  .home__footer .home__email_icon svg {
    transform: translateY(0%);
  }
  .home__footer p {
    margin: 0;
  }
  .header__nav {
    gap: 0.5rem;
    margin-left: 1rem;
  }
  .header__brand {
    flex: 0 1 auto;
    font-stretch: var(--width-expanded);
  }
}
@media (max-width: 48em) {
  :root {
    --brand-font-size: 1.5rem;
    --button-font-size: 0.65rem;
    --button-border: 4px;
    --main-inset: 0.5rem;
    --shirt-size: 100%;
    --title-height: 2.5rem;
    --copy-font-size: clamp(0.55rem, 1.5vh, 0.85rem);
  }
  .header {
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding-block: 0.5rem;
  }
  .header__brand {
    flex: 0 0 100%;
    font-size: 1rem;
  }
  .header__nav {
    margin-left: 0;
    gap: 0.4rem;
  }
  .language-menu {
    margin-left: auto;
  }
  .home__main {
    margin-top: 0.5rem;
  }
  .home__secondary {
    flex: 0 0 auto;
    align-items: stretch;
    padding-bottom: 2rem;
    line-height: 1rem;
  }
  .home__clickToResist {
    display: none;
  }
  .home__footer {
    margin: 0.2rem;
    justify-content: flex-start;
  }
  .home__footer .home__social_icon {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 100;
  }
  .home__footer .home__email_icon {
    transform: translateY(2%);
    position: fixed;
    top: 0rem;
    right: 3rem;
    z-index: 100;
  }
}