/* variables.css */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* Colors */
  --Blanco: #FFF;
  --Blanco_Hover: #E5E5E5;
  --Negro: #1A1A1A;
  --Negro_Hover: #2F2F2F;
  --Azul: #2563EB;
  --Azul_Hover: #5585F2;
  --Amarillo: #FFF82B;
  --Amarillo_Hover: #FFFBA1;

  /* Typography Base */
  --font-space: 'Space Grotesk', sans-serif;
  --font-plus: 'Plus Jakarta Sans', sans-serif;
}

/* Typography Classes */
.text-h0 {
  font-family: var(--font-space);
  font-size: 96px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 96px */
  letter-spacing: -0.96px;
}

.text-h1 {
  font-family: var(--font-space);
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 70.4px */
  letter-spacing: -0.64px;
}

.text-h2 {
  font-family: var(--font-space);
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 57.6px */
  letter-spacing: -0.48px;
}

.text-h3 {
  font-family: var(--font-space);
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 38.4px */
}

.text-h4 {
  font-family: var(--font-space);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 28.8px */
}

.text-p-large {
  font-family: var(--font-plus);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
}

.text-p {
  font-family: var(--font-plus);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.text-button {
  font-family: var(--font-plus);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .text-h0 { font-size: clamp(48px, 8vw, 96px); }
  .text-h1 { font-size: clamp(36px, 6vw, 64px); }
  .text-h2 { font-size: clamp(28px, 5vw, 48px); }
  .text-h3 { font-size: clamp(24px, 4vw, 32px); }
  .text-h4 { font-size: clamp(20px, 3vw, 24px); }
}

/* Base reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--Blanco);
  color: var(--Negro);
  font-family: var(--font-plus);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}