/* ========================================
   CSS RESET
   ======================================== */

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

*:not(dialog) {
   margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
   html {
      interpolate-size: allow-keywords;
   }
}

body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
   display: block;
   max-width: 100%;
}

input,
button,
textarea,
select {
   font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
   overflow-wrap: break-word;
}

p {
   text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   text-wrap: balance;
}

#root,
#__next {
   isolation: isolate;
}

* {
   scroll-padding: 6em;
}

/* ========================================
   FONTS
   ======================================== */

@font-face {
   font-family: 'DM Sans';
   src: url('../../fonts/DMSans-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: 'DM Sans';
   src: url('../../fonts/DMSans-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'DM Sans';
   src: url('../../fonts/DMSans-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: 'DM Sans';
   src: url('../../fonts/DMSans-ExtraBold.woff') format('woff');
   font-weight: 800;
   font-style: normal;
}

:root {
   --yellow: hsl(55, 89%, 71%);
   --yellow-op-8: hsla(55, 89%, 71%, 0.8);
   --light-blue: hsl(194, 100%, 92%);
   --gray: hsl(60, 2%, 61%);
   --light-gray: hsl(60, 2%, 61%);
   --black: hsl(0, 0%, 21%);
   --white: hsl(0, 0%, 100%);
   --blue: #0033ff;
   --black-op-40: rgba(0, 0, 0, 0.4);
   --white-op-10: rgba(255, 255, 255, 0.1);
   --text-xs: clamp(0.8rem, 0.1vi + 0.78rem, 0.89rem);
   --text-s: clamp(1rem, 0.2vi + 0.95rem, 1.19rem);
   --text-m: clamp(1.25rem, 0.35vi + 1.16rem, 1.58rem);
   --text-l: clamp(1.56rem, 0.58vi + 1.42rem, 2.11rem);
   --text-xl: clamp(1.95rem, 0.9vi + 1.73rem, 2.81rem);
   --text-xxl: clamp(2.44rem, 1.38vi + 2.1rem, 3.75rem);
   --text-xxxl: clamp(3.05rem, 2.05vi + 2.54rem, 5rem);
   --shadow-l: 0 0 17px rgba(0, 0, 0, 0.1);
   --max-width: 1100px;
   --max-width-2: 1000px;
}

/* ========================================
   HEADER SECTION
   ======================================== */

.header-tech-hub {
   background-color: var(--white);
   box-shadow: var(--shadow-l);
   position: sticky;
   top: 0;
   z-index: 100;
   font-family: "DM Sans", sans-serif;
}

.header-tech-hub__nav {
   max-width: var(--max-width);
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1em 0;
   gap: 2em;
}

.header-tech-hub__logo-link {
   flex-shrink: 0;
   display: flex;
   align-items: center;
}

.header-tech-hub__logo {
   height: 4rem;
   width: auto;
}

.header-tech-hub__nav-list {
   list-style: none;
   display: flex;
   gap: 2.5em;
   margin: 0;
   padding: 0;
   flex: 1;
   justify-content: flex-end;
   align-items: center;
}

.header-tech-hub__nav-item {
   margin: 0;
}

.header-tech-hub__nav-link {
   text-decoration: none;
   color: var(--black);
   font-size: var(--text-xs);
   font-weight: 400;
   transition: all 0.3s ease;
   position: relative;
   white-space: nowrap;
}

.header-tech-hub__nav-link:hover {
   color: var(--gray);
}

.header-tech-hub__nav-link::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 0;
   height: 2px;
   background-color: var(--yellow);
   transition: width 0.3s ease;
}

.header-tech-hub__nav-link:hover::after {
   width: 100%;
}

.header-tech-hub__toggle {
   display: none;
   flex-direction: column;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   gap: 6px;
}

.header-tech-hub__toggle-line {
   display: block;
   width: 25px;
   height: 3px;
   background-color: var(--black);
   border-radius: 2px;
   transition: all 0.3s ease;
   transform-origin: center;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
   background-color: var(--light-blue);
}

.hero__container {
   max-width: var(--max-width);
   margin: auto;
   padding: 10em 3em;
   transform: translateY(4em);
   display: flex;
   flex-direction: column;
   gap: .5em;
   background-image: url('../../../../../uploads/2026/05/Manhattan-City-1024x383.webp');
   background-size: cover;
   background-position: center;
   position: relative;
   border-radius: 2em;
   overflow: hidden;
   font-family: "Dm Sans", sans-serif;
}

.hero__container::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--black-op-40);
   mix-blend-mode: multiply;
   z-index: 0;
}

.hero__container::before {
   content: "";
   position: absolute;
   bottom: -50%;
   height: 35rem;
   background: url(../../../../../uploads/2026/05/Sol-Argentino-Amarillo.webp);
   z-index: 1;
   width: 35rem;
   background-size: cover;
   left: 75%;
   animation: rotate 25s linear infinite;
}

.hero__title {
   font-size: var(--text-xl);
   font-weight: 700;
   color: var(--white);
   z-index: 1;
   line-height: 1.2;
}

.hero__actions {
   display: flex;
   gap: .75em;
   flex-wrap: wrap;
   z-index: 1;
}

.hero__action {
   padding: 0.75em 1.5em;
   font-size: var(--text-xs);
   text-decoration: none;
   border-radius: 999rem;
}

.hero__action:first-child {
   background-color: var(--yellow);
   color: var(--black);
   border: 1px solid var(--yellow)
}

.hero__action:last-child {
   background-color: var(--white-op-10);
   color: var(--white);
   border: 1px solid var(--white);
   backdrop-filter: blur(2px);
}

.hero__action-text-partners {
   display: flex;
   align-items: center;
   gap: 0.5em;
}

.hero__action-text-partners::after {
   content: '';
   width: calc(var(--text-xs) / 1.5);
   height: calc(var(--text-xs) / 1.5);
   background-image: url('../../../../../uploads/2026/05/arrow-r.webp');
   background-size: contain;
   background-repeat: no-repeat;
}

/* ========================================
   PARTNERS SECTION
   ======================================== */

.partners {
   padding-top: 7em;
   padding-bottom: 3em;
}

.partners__container {
   display: grid;
   grid-template-columns: repeat(4,
         1fr);
   max-width: var(--max-width);
   gap: 2em;
   margin: auto;
}

.partners__logo {
   aspect-ratio: 16/5;
   object-fit: contain;
   width: 100%;
}

/* ========================================
   ARGENTINA DATA SECTION
   ======================================== */

.arg-data__container {
   max-width: var(--max-width);
   margin: auto;
   padding-top: 3em;
   padding-bottom: 3em;
   display: flex;
   flex-direction: column;
   color: var(--black);
   gap: 2em;
   font-family: "Dm Sans", sans-serif;
}

.arg-data__container p,
.arg-data__container h2 {
   margin: 0;
}

.arg-data__text {
   display: flex;
   gap: 2em;
}

.arg-data__header {
   flex: 2;
}

.arg-data__title {
   font-size: var(--text-l);
   line-height: 1.2;
}

.arg-data__span {
   position: relative;
}

.arg-data__span::after {
   content: '';
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
   height: 3px;
   background-color: var(--yellow);
}

.arg-data__description {
   flex: 3;
   font-size: var(--text-s);
}

.arg-data__stats {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border: 1px solid var(--gray);
   border-radius: .5em;
   padding-left: 0;
}

.arg-data__stat {
   border-left: 1px solid var(--gray);
   padding: 2em 2em;
}

.arg-data__stat:first-child {
   border-left: none;
}

.arg-data__stat-label {
   font-size: var(--text-s);
}

.arg-data__stat-value {
   font-size: var(--text-m);
}

/* ========================================
   WHY ARGENTINA SECTION
   ======================================== */

.why-arg {
   background-color: var(--gray);
}

.why-arg__container {
   max-width: var(--max-width);
   margin: auto;
   font-family: "Dm Sans", sans-serif;
   display: flex;
   flex-direction: column;
   gap: 2em;
   padding-top: 3em;
   padding-bottom: 3em;
}

.why-arg__title {
   color: var(--white);
   line-height: 1.2;
   font-size: var(--text-l);
}

.why-arg__span {
   position: relative;
}

.why-arg__span::after {
   content: '';
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
   height: 3px;
   background-color: var(--yellow);
}

.why-arg__list {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1em;
   padding-left: 0;
}

.why-arg__item {
   padding: 1.5em;
   background: var(--white);
   border-radius: .5em;
   font-size: var(--text-s);
   box-shadow: var(--shadow-l);
}

.why-arg__item:nth-child(odd) {
   background: var(--light-blue);
}

.why-arg__item:first-child,
.why-arg__item:nth-child(4),
.why-arg__item:nth-child(7) {
   grid-row: span 2;
}

.why-arg__image {
   width: 100%;
}

/* ========================================
   EVENT POSTAL SECTION
   ======================================== */

.event-postal__container {
   max-width: var(--max-width-2);
   margin: auto;
   padding-top: 2em;
   padding-bottom: 2em;
   padding-left: 4em;
   padding-right: 4em;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: 2em;
   align-items: center;
   background-color: var(--white);
   border-radius: .5em;
   box-shadow: var(--shadow-l);
}

.event-postal {
   position: relative;
   padding-top: 3em;
}

.event-postal::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 75%;
   background: var(--yellow);
   z-index: -1;
}

.event-postal__title {
   font-size: var(--text-l);
   line-height: 1.2;
   color: var(--black);
   font-family: "Dm Sans", sans-serif;
   margin: 0;
   position: relative;
}

.event-postal__title::after {
   content: '';
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
   height: 3px;
   background-color: var(--yellow);
}

.event-postal__title span {
   font-size: var(--text-xl);
}

.event-postal__qr {
   aspect-ratio: 1/1;
   object-fit: cover;
   width: 200px;
}

/* ========================================
   HUB COMPANIES SECTION
   ======================================== */

.hub-companies__container {
   max-width: var(--max-width);
   margin: auto;
   font-family: "Dm Sans", sans-serif;
   display: flex;
   flex-direction: column;
   gap: 2em;
   padding-top: 3em;
   padding-bottom: 3em;
}

.hub-companies__title {
   color: var(--black);
   line-height: 1.2;
   font-size: var(--text-l);
}

.hub-companies__span {
   position: relative;
}

.hub-companies__span::after {
   content: '';
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
   height: 3px;
   background-color: var(--yellow);
}

.hub-companies__list {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1em;
   padding-left: 0;
}

.hub-companies__logo-container {
   width: 100%;
   display: flex;
   justify-content: center;
   background-color: var(--white);
   padding: 2em;
}

.hub-companies__data-container {
   display: flex;
   flex-direction: column;
   gap: 1em;
   padding-bottom: 2em;
   padding-left: 2em;
   padding-right: 2em;
}

.hub-companies__item {
   background: var(--white);
   border-radius: .5em;
   display: flex;
   flex-direction: column;
   gap: 1em;
   overflow: hidden;
   box-shadow: var(--shadow-l);
}

.hub-companies__links {
   display: flex;
   gap: 1em;
   padding-top: 2em;
   border-top: 1px solid var(--light-gray);
}

.hub-companies__link {
   text-decoration: none;
   color: var(--black);
   font-size: var(--text-s);
   transition: ease all 0.3s;
}

.hub-companies__link:hover {
   opacity: .9;
   color: var(--black);
}

.hub-companies__link span {
   display: flex;
   align-items: center;
   gap: .5em;
}

.hub-companies__link:first-child span:before {
   content: '';
   width: var(--text-xs);
   height: var(--text-xs);
   background-image: url('../../../../../uploads/2026/05/Link-External.webp');
   background-size: contain;
   background-repeat: no-repeat;
}

.hub-companies__link:last-child span:before {
   content: '';
   width: var(--text-xs);
   height: var(--text-xs);
   background-image: url('../../../../../uploads/2026/05/LinkedIn-Icon-company.webp');
   background-size: contain;
   background-repeat: no-repeat;
}

.hub-companies__description {
   font-size: var(--text-s);
}

.hub-companies__logo {
   aspect-ratio: 16/5;
   object-fit: contain;
   min-width: 225px;
   max-width: 225px;
}

/* ========================================
   FOOTER SECTION
   ======================================== */

.footer-tech-hub {
   background-color: var(--gray);
   color: var(--white);
   font-family: "DM Sans", sans-serif;
}

.footer-tech-hub__container {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 3em 0;
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.footer-tech-hub__brand-group,
.footer-tech-hub__info-group {
   display: flex;
   align-items: center;
   gap: 2em;
   flex-wrap: wrap;
   justify-content: space-between;
}

.footer-tech-hub__logo {
   height: 4rem;
   width: auto;
}

.footer-tech-hub__social-list {
   display: flex;
   gap: 1.5em;
   list-style: none;
   margin: 0;
   padding: 0;
}

.footer-tech-hub__social-item {
   margin: 0;
}

.footer-tech-hub__social-link {
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

.footer-tech-hub__social-link:hover {
   transform: translateY(-1px);
}

.footer-tech-hub__social-icon {
   width: 1.1rem;
   aspect-ratio: 1/1;
   object-fit: contain;
}

.footer-tech-hub__copyright,
.footer-tech-hub__developer-text {
   margin: 0;
   font-size: var(--text-xs);
}

.footer-tech-hub__link {
   color: var(--white);
}

.footer-tech-hub__link:hover {
   color: var(--white);
}

.footer-tech-hub__developer {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.footer-tech-hub__developer-logo {
   height: 1.75rem;
   width: auto;
}

/* ======================================== */

@media (max-width: 768px) {
   .header-tech-hub__nav {
      padding: 1em 2em;
   }

   .header-tech-hub__toggle {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 2rem;
      height: 2rem;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      overflow: visible;
      z-index: 110;
   }

   .header-tech-hub__toggle-line {
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--black);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
      transform-origin: center;
   }

   .header-tech-hub__toggle-line:nth-child(1) {
      top: 0.45rem;
   }

   .header-tech-hub__toggle-line:nth-child(2) {
      top: calc(50% - 1.5px);
   }

   .header-tech-hub__toggle-line:nth-child(3) {
      bottom: 0.45rem;
   }

   .header-tech-hub__nav-list {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: var(--white);
      flex-direction: column;
      align-items: stretch;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s ease, padding 0.35s ease;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      padding: 0 1.5em;
      margin: 0;
   }

   .header-tech-hub__nav-list.active {
      max-height: 400px;
      padding-top: 1em;
      padding-bottom: 1em;
   }

   .header-tech-hub__nav-item {
      width: 100%;
   }

   .header-tech-hub__nav-item:last-child {
      border-bottom: none;
   }

   .header-tech-hub__nav-link {
      display: block;
      font-size: var(--text-s);
      color: var(--black);
   }

   .header-tech-hub__nav-link::after {
      display: none;
   }

   .header-tech-hub__toggle.active .header-tech-hub__toggle-line:nth-child(1) {
      top: calc(50% - 1.5px);
      transform: rotate(45deg);
   }

   .header-tech-hub__toggle.active .header-tech-hub__toggle-line:nth-child(2) {
      opacity: 0;
   }

   .header-tech-hub__toggle.active .header-tech-hub__toggle-line:nth-child(3) {
      top: calc(50% - 1.5px);
      transform: rotate(-45deg);
      bottom: auto;
   }

   .header-tech-hub__logo-link img {
      height: 2.5rem;
   }

   .partners__container {
      grid-template-columns: repeat(2, 1fr);
      padding-right: 2em;
      padding-left: 2em;
   }

   .hero {
      padding-right: 1em;
      padding-left: 1em;
   }

   .hero__container {
      padding: 5em 1em;
   }

   .arg-data__text {
      flex-direction: column;
   }

   .arg-data__stats {
      grid-template-columns: repeat(2, 1fr);
   }

   .arg-data__stat {
      border-left: none;
   }

   .arg-data__stat:nth-child(2) {
      border-left: 1px solid var(--gray);
   }

   .arg-data__stat:last-child {
      border-left: 1px solid var(--gray);
      border-top: 1px solid var(--gray);
   }

   .arg-data__stat:nth-child(3) {
      border-top: 1px solid var(--gray);
   }

   .arg-data__container {
      padding: 3em 1em;
   }

   .hero__container::before {
      bottom: -30%;
      height: 15rem;
      z-index: 1;
      width: 15rem;
      left: 65%;
   }

   .why-arg__list {
      grid-template-columns: 1fr;
   }

   .why-arg__container {
      padding: 3em 1em;
   }

   .hub-companies__container {
      padding: 3em 1em;
   }

   .hub-companies__list {
      grid-template-columns: 1fr;
   }

   .footer-tech-hub__container {
      padding: 2em 1em;
      gap: 2em;
   }

   .footer-tech-hub__brand-group {
      flex-direction: column;
      gap: 1.5em;
   }

   .footer-tech-hub__info-group {
      flex-direction: column;
      gap: 1.5em;
   }

   .footer-tech-hub__copyright {
      text-align: center;
   }

   .footer-tech-hub__developer-logo {
      height: 1rem;
   }

   .event-postal__container {      
      flex-direction: column;
      gap: 1em;
      padding-right: 2em;
      padding-left: 2em;
      align-items: flex-start;
   }

   .event-postal {
      padding-left: 3em;
      padding-right: 3em;
   }
}

@keyframes rotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}