* {
  box-sizing: border-box;
  min-width: 0;
  font-family: "N27-Medium";
}

html,
body {
  margin: 0 auto;
  color: var(--content-3-pair);
}

p {
  margin: 0;
  text-wrap: pretty;
  text-align: justify;
}

/* Variables globales */
:root {
  --bolt-black-50: #e9e9e9;
  --bolt-black-100: #babbbc;
  --bolt-black-200: #999b9b;
  --bolt-black-300: #6a6d6e;
  --bolt-black-400: #4d5151;
  --bolt-black-500: #212526;
  --bolt-black-600: #1e2223;
  --bolt-black-700: #171a1b;
  --bolt-black-800: #121415;
  --bolt-black-900: #0e1010;
  --dieter-orange-50: #fff0e6;
  --dieter-orange-100: #ffd0b0;
  --dieter-orange-200: #ffb98a;
  --dieter-orange-300: #ff9854;
  --dieter-orange-400: #ff8533;
  --dieter-orange-500: #f60;
  --dieter-orange-600: #e85d00;
  --dieter-orange-700: #b54800;
  --dieter-orange-800: #8c3800;
  --dieter-orange-900: #6b2b00;
  --light-gray-50: #fefefe;
  --light-gray-100: #fcfcfc;
  --light-gray-200: #fafafa;
  --light-gray-300: #f8f8f8;
  --light-gray-400: #f7f7f7;
  --light-gray-500: #f5f5f5;
  --light-gray-600: #dfdfdf;
  --light-gray-700: #aeaeae;
  --light-gray-800: #878787;
  --light-gray-900: #676767;
  --green-50: #eff9f1;
  --green-100: #cdedd3;
  --green-200: #b4e5be;
  --green-300: #92d9a1;
  --green-400: #7dd18e;
  --green-500: #5dc672;
  --green-600: #55b468;
  --green-700: #428d51;
  --green-800: #336d3f;
  --green-900: #275330;
  --blue-50: #edf4fb;
  --blue-100: #c8dbf2;
  --blue-200: #aecaec;
  --blue-300: #88b2e3;
  --blue-400: #71a3dd;
  --blue-500: #4e8cd5;
  --blue-600: #477fc2;
  --blue-700: #376397;
  --blue-800: #2b4d75;
  --blue-900: #213b59;
  --yellow-50: #fff9e6;
  --yellow-100: #ffebb0;
  --yellow-200: #ffe18a;
  --yellow-300: #ffd354;
  --yellow-400: #ffcb33;
  --yellow-500: #ffbe00;
  --yellow-600: #e8ad00;
  --yellow-700: #b58700;
  --yellow-800: #8c6900;
  --yellow-900: #6b5000;
  --red-50: #fbeded;
  --red-100: #f2c8c8;
  --red-200: #ecaeae;
  --red-300: #e38888;
  --red-400: #dd7171;
  --red-500: #d54e4e;
  --red-600: #c24747;
  --red-700: #973737;
  --red-800: #752b2b;
  --red-900: #592121;
  --border-radius-xl: 999px;
  --border-radius-l: 24px;
  --border-radius-m: 16px;
  --border-radius-s: 12px;
  --border-radius-xs: 8px;
  --border-radius-xxs: 4px;
}

@font-face {
  font-family: "N27-Bold";
  src: url("/font/N27-Bold.woff") format("woff"),
    url("/font/N27-Bold.woff2") format("woff2"),
    url("/font/N27-Bold.ttf") format("truetype"),
    url("/font/N27-Bold.eot") format("embedded-opentype");
}

@font-face {
  font-family: "N27-Medium";
  src: url("/font/N27-Medium.woff") format("woff"),
    url("/font/N27-Medium.woff2") format("woff2"),
    url("/font/N27-Medium.ttf") format("truetype"),
    url("/font/N27-Medium.eot") format("embedded-opentype");
}

/* Variables específicas para el modo claro */
:root {
  --background-1: var(--light-gray-50);
  --background-2: var(--light-gray-500);
  --background-3: var(--dieter-orange-500);
  --background-4: var(--dieter-orange-50);
  --background-inverse: var(--bolt-black-600);
  --background-hover: var(--light-gray-500);
  --background-focus: var(--dieter-orange-50);
  --background-disable: var(--light-gray-50);
  --box-shadow-color: rgba(149, 157, 165, 0.2);
  --content-1: var(--bolt-black-500);
  --content-2: var(--bolt-black-200);
  --content-3-pair: var(--light-gray-500);
  --content-4-pair: var(--bolt-black-500);
  --content-inverse: var(--light-gray-500);
  --content-hover: var(--bolt-black-400);
  --content-focus: var(--dieter-orange-500);
  --content-disable: var(--bolt-black-100);
  --border-1: var(--light-gray-600);
  --border-inverse: var(--bolt-black-600);
  --border-hover: var(--bolt-black-50);
  --border-focus: var(--dieter-orange-500);
  --border-disable: var(--bolt-black-50);
  --border-info: var(--blue-500);
  --border-success: var(--green-500);
  --border-warning: var(--yellow-500);
  --border-danger: var(--red-500);
  --semantic-hightlight: var(--dieter-orange-500);
  --semantic-hightlight-light: var(--dieter-orange-50);
  --semantic-hightlight-hover: var(--dieter-orange-100);
  --semantic-hightlight-focus: var(--dieter-orange-50);
  --semantic-hightlight-disable: var(--dieter-orange-50);
  --semantic-info: var(--blue-500);
  --semantic-info-light: var(--blue-100);
  --semantic-info-hover: var(--blue-200);
  --semantic-info-focus: var(--blue-100);
  --semantic-info-disable: var(--blue-50);
  --semantic-sucess: var(--green-500);
  --semantic-sucess-light: var(--green-100);
  --semantic-sucess-hover: var(--green-200);
  --semantic-sucess-focus: var(--green-100);
  --semantic-sucess-disable: var(--green-50);
  --semantic-warning: var(--yellow-500);
  --semantic-warning-light: var(--yellow-100);
  --semantic-warning-hover: var(--yellow-200);
  --semantic-warning-focus: var(--yellow-50);
  --semantic-warning-disable: var(--yellow-50);
  --semantic-danger: var(--red-500);
  --semantic-danger-light: var(--red-100);
  --semantic-danger-hover: var(--red-200);
  --semantic-danger-focus: var(--red-100);
  --semantic-danger-disable: var(--red-50);
}

/* Text-size styles */

.body-l {
  font-family: "N27-Bold";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
}

.main {
  position: relative;
  padding: 16px;
  width: 100dvw;
  height: 100dvh;
  gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.logo {
  width: 80px;
}

.simus {
  text-transform: lowercase;
}

@keyframes blink {
  0%, 21%, 79%, 100% {
    opacity: 0;
}
29%, 71% {
    opacity: 1;
}
}

.pseudo-blink:after {
  animation: blink 1.2s ease infinite;
  background-color: var(--content-3-pair);
  content: "";
  display: inline-block;
  height: 0.7em;
  width: 0.3em;
  transform: translate(-1px);
}

.background {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.gradient {
  background: linear-gradient(
    #000000,
    #000000 3px,
    transparent 0,
    transparent 9px
  );
  background-size: 100% 10px;
  opacity: 0.05;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.from-black {
  background: linear-gradient(to top, #0000004d, transparent);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 2;
}

.noise {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 2;
  background-image: url("/image/noise.gif");
  background-blend-mode: color-dodge;
  opacity: 0.07;
}

@keyframes pan-overlay {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -100%;
  }
}

.animate-pan-overlay {
  animation: pan-overlay 16s linear infinite;
}

.bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}