:root {
  /* ── Brand ── */
  --color-brand:        #048d96;
  --color-brand-dark:   #01666d;
  --color-brand-light:  #8dddde;
  --color-accent:       #6639c5;
  --color-accent-dark:  #2b1657;
  --color-teal-deep:    #123f59;

  /* ── Surfaces & Backgrounds ── */
  --color-bg:           #000000;
  --color-bg-ui:        #101010;
  --color-bg-card:      #ffffff;
  --color-surface:      #f0f0f0;
  --color-surface-alt:  #f1f1f1;

  /* ── Text ── */
  --color-text-on-dark:  #f0f0f0;
  --color-text-on-light: #101010;
  --color-text-muted:    #464646;
  --color-text-subtle:   #888888;
  --color-text-faint:    #5e5e5e;
  --color-text-medium:   #343434;

  /* ── Gradients ── */
  --gradient-brand:      linear-gradient(30deg, #6639c5, #048d96);
  --gradient-brand-h:    linear-gradient(90deg, #048d98, #6639c5);
  --gradient-teal:       linear-gradient(45deg, #048d96, #123f59);
  --gradient-teal-hover: linear-gradient(90deg, #01666d, #048d96);
  --gradient-accent:     linear-gradient(90deg, #6639c5, #2b1657);
  --gradient-surface:    linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  --gradient-copyright:  linear-gradient(90deg, #8dddde 0%, #048d98 100%);

  /* ── Borders ── */
  --color-border: #e1e1e1;

  /* ── Shadows ── */
  --shadow-card:   0 0 8px -1px rgba(0, 0, 0, 0.25);
  --shadow-header: 0px -1px 12px rgba(0, 0, 0, 0.25);
  --shadow-panel:  -5px 0 10px rgba(0, 0, 0, 0.1);
  --shadow-footer: 0 -4px 10px -4px rgba(0, 0, 0, 0.3);

  /* ── Border Radius ── */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   10px;
  --radius-full: 50%;

  /* ── Transitions ── */
  --transition-fast: 0.3s;
  --transition-base: 0.5s;
  --transition-slow: 0.8s;

  /* ── Typography ── */
  --font-primary: 'Poppins', system-ui, sans-serif;
  --font-light:   'PoppinsLight', system-ui, sans-serif;
}

/*Arreglo Inicial de la Pagina*/
@font-face {
  font-family: 'Poppins';
  src: url('/public/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'PoppinsLight';
  src: url('/public/fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
}

@keyframes show {
  from {
    opacity: 0;
    transform: scale(0.25)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
.animation {
  view-timeline-name: --animation;
  view-timeline-axis: block;
  animation-timeline: --animation;
  animation-name: show;
  animation-range: entry 30% cover 40%;
  animation-fill-mode: both;
}
h1, h2, h3, h4, h5, h6, p, span, img, div, a {
  user-select: none;
  caret-color: transparent;
}
h1 {
  color: var(--color-text-on-dark);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.02;
  font-weight: 600;
}
h1 span {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 500;
}
h2 {
  color: var(--color-text-on-dark);
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  padding: 0px 16% 10px 16%;
  font-weight: 400;
  line-height: 1.1;
  font-family: var(--font-light);
}
h2 span {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-family: var(--font-light);
}
h3 {
  color: var(--color-text-on-dark);
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  font-weight: 400;
  padding: 0px 25% 10px 25%;
  line-height: 1.1;
  font-family: var(--font-light);
}
h3 span {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-family: var(--font-light);
}
h4 {
  color: var(--color-text-on-dark);
  font-size: 1.3rem;
  line-height: 1;
  font-family: var(--font-light);
}
h5 {
  color: var(--color-text-on-dark);
  font-size: 1.3rem;
  line-height: 1;
}
h6 {
  color: var(--color-text-on-dark);
  font-size: 1.2rem;
  line-height: 1;
}
p {
  color: var(--color-text-on-dark);
  font-size: 1.25rem;
  font-family: var(--font-light);
}
span {
  color: var(--color-text-on-dark);
  font-size: 1rem;
}
b {
  color: var(--color-brand);
  font-weight: normal;
}
a {
  text-decoration: none;
}
@media (min-width: 1600px) {
 h2 {
  font-size: 2.8rem;
 }
 h2 span {
  font-size: 1.9rem;
 }
 h3 {
  font-size: 2.8rem;
 }
 h3 span {
  font-size: 1.9rem;
 }
}
@media (max-width: 950px) {
  h2 {
    padding: 0 7% 25px 7%;
  }
  h3 {
    padding: 0 7% 25px 7%;
  }
  h4 {
    font-size: 20px;
  }
  h5 {
    font-size: 18px;
  }
  h6 {
    font-size: 18px;
  }
}
@media (max-width: 650px) {
  h1 {
    font-weight: 400;
  }
  h2 {
    padding: 0 0 25px 0
  }
  h3 {
    padding: 0 0 25px 0;
  }
  h4 {
    font-size: 20px;
    font-weight: 300;
  }
  h5 {
    font-size: 18px;
  }
  h6 {
    font-size: 18px;
  }
  p {
    font-size: 16px;
  }
  strong {
    font-weight: normal !important;
  }
}