:root {
/* Otras propiedades */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(0.75rem, 1.5vw, 1rem);
  --space-lg: clamp(1rem, 2vw, 1.5rem);
  --space-xl: clamp(1.5rem, 3vw, 2rem);
  --space-2xl: clamp(2rem, 4vw, 3rem);
  --space-3xl: clamp(3rem, 6vw, 5rem);
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 2.5rem);
  --text-4xl: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  --text-5xl: clamp(3rem, 2rem + 4vw, 4rem);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --header-height: 60px;}

body.menu-open {
/* Posicionamiento */
  position: fixed;

  /* Modelo de caja */
  overflow: hidden;

  /* Dimensiones */
  width: 100%;
  height: 100%;

  /* Otras propiedades */
  touch-action: none;}

.skip-link {
/* Posicionamiento */
  position: absolute;
  top: -100%;
  left: 50%;
  z-index: 99999;

  /* Relleno */
  padding: var(--space-md) var(--space-lg);

  /* Bordes */
  border-radius: 0 0 8px 8px;

  /* Fondos */
  background: var(--color-menta, #2845D6);

  /* Tipografía */
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;

  /* Colores y efectos */
  color: var(--color-background-dark, #060E3A);

  /* Transiciones y animaciones */
  transition: top 0.3s var(--ease-out-expo);

  /* Otras propiedades */
  transform: translateX(-50%);}

.skip-link:focus {
/* Posicionamiento */
  top: 0;

  /* Otras propiedades */
  outline: 3px solid var(--color-naranja, #F68048);
  outline-offset: 2px;}

header {
/* Posicionamiento */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  /* Dimensiones */
  height: var(--header-height);

  /* Relleno */
  padding-top: var(--safe-area-top);
  padding-left: max(var(--space-md), var(--safe-area-left));
  padding-right: max(var(--space-md), var(--safe-area-right));

  /* Fondos */
  background: rgba(6, 14, 58, 0.95);

  /* Colores y efectos */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

  /* Otras propiedades */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);}

nav {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  justify-content: space-between;
  align-items: center;

  /* Dimensiones */
  height: 100%;
  max-width: 1400px;

  /* Márgenes */
  margin: 0 auto;

  /* Relleno */
  padding: 0 var(--space-md);}

.logo {
/* Modelo de caja */
  overflow: hidden;

  /* Dimensiones */
  max-width: 60%;

  /* Tipografía */
  font-size: var(--text-lg);
  font-weight: 700;

  /* Colores y efectos */
  color: var(--color-naranja, #F68048);

  /* Transiciones y animaciones */
  transition: font-size 0.3s var(--ease-in-out-soft);

  /* Otras propiedades */
  white-space: nowrap;
  text-overflow: ellipsis;}

.mobile-menu-toggle {
/* Posicionamiento */
  position: relative;
  z-index: 1002;

  /* Modelo de caja */
  display: none;

  /* Flexbox y Grid */
  flex-shrink: 0;

  /* Dimensiones */
  width: 44px;
  height: 44px;

  /* Relleno */
  padding: 0;

  /* Bordes */
  border: none;
  border-radius: 8px;

  /* Fondos */
  background: rgba(40, 69, 214, 0.1);

  /* Transiciones y animaciones */
  transition: all 0.3s var(--ease-in-out-soft);

  /* Interactividad */
  cursor: pointer;

  /* Otras propiedades */
  -webkit-tap-highlight-color: transparent;}

.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
/* Fondos */
  background: rgba(40, 69, 214, 0.2);

  /* Colores y efectos */
  box-shadow: 0 0 0 2px var(--color-menta, #2845D6);

  /* Otras propiedades */
  outline: none;}

.mobile-menu-toggle:focus-visible {
/* Otras propiedades */
  outline: 2px solid var(--color-menta, #2845D6);
  outline-offset: 2px;}

.hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
/* Posicionamiento */
  position: absolute;
  left: 50%;

  /* Dimensiones */
  width: 22px;
  height: 2px;

  /* Bordes */
  border-radius: 2px;

  /* Fondos */
  background: var(--color-menta, #2845D6);

  /* Colores y efectos */
  box-shadow: 0 0 8px rgba(40, 69, 214, 0.5);

  /* Transiciones y animaciones */
  transition: all 0.3s var(--ease-out-expo);

  /* Otras propiedades */
  transform: translateX(-50%);}

.hamburger-icon {
/* Posicionamiento */
  top: 50%;

  /* Márgenes */
  margin-top: -1px;}

.hamburger-icon::before, .hamburger-icon::after {
/* Posicionamiento */
  left: 0;

  /* Otras propiedades */
  content: '';
  transform: none;}

.hamburger-icon::before {
/* Posicionamiento */
  top: -7px;}

.hamburger-icon::after {
/* Posicionamiento */
  top: 7px;}

.mobile-menu-toggle.active {
/* Fondos */
  background: rgba(246, 128, 72, 0.2);}

.mobile-menu-toggle.active .hamburger-icon {
/* Fondos */
  background: transparent;

  /* Colores y efectos */
  box-shadow: none;}

.mobile-menu-toggle.active .hamburger-icon::before {
/* Posicionamiento */
  top: 0;

  /* Fondos */
  background: var(--color-naranja, #F68048);

  /* Colores y efectos */
  box-shadow: 0 0 8px rgba(246, 128, 72, 0.5);

  /* Otras propiedades */
  transform: rotate(45deg);}

.mobile-menu-toggle.active .hamburger-icon::after {
/* Posicionamiento */
  top: 0;

  /* Fondos */
  background: var(--color-naranja, #F68048);

  /* Colores y efectos */
  box-shadow: 0 0 8px rgba(246, 128, 72, 0.5);

  /* Otras propiedades */
  transform: rotate(-45deg);}

.menu-overlay {
/* Posicionamiento */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;

  /* Modelo de caja */
  display: none;

  /* Dimensiones */
  width: 100vw;
  height: 100vh;
  height: 100dvh;

  /* Fondos */
  background: rgba(0, 0, 0, 0.7);

  /* Colores y efectos */
  opacity: 0;

  /* Transiciones y animaciones */
  transition: opacity 0.3s var(--ease-in-out-soft), visibility 0.3s;

  /* Otras propiedades */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  visibility: hidden;}

.menu-overlay.active {
/* Colores y efectos */
  opacity: 1;

  /* Otras propiedades */
  visibility: visible;}

.nav-links {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  gap: var(--space-xl);

  /* Márgenes */
  margin: 0;

  /* Relleno */
  padding: 0;

  /* Otras propiedades */
  list-style: none;}

.nav-links a {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  display: block;

  /* Relleno */
  padding: var(--space-sm) 0;

  /* Tipografía */
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;

  /* Colores y efectos */
  color: var(--color-texto, #E4E6EB);

  /* Transiciones y animaciones */
  transition: color 0.3s var(--ease-in-out-soft);}

.nav-links a::after {
/* Posicionamiento */
  position: absolute;
  bottom: 0;
  left: 0;

  /* Dimensiones */
  width: 0;
  height: 2px;

  /* Fondos */
  background: var(--color-naranja, #F68048);

  /* Colores y efectos */
  box-shadow: 0 0 8px rgba(246, 128, 72, 0.5);

  /* Transiciones y animaciones */
  transition: width 0.3s var(--ease-out-expo);

  /* Otras propiedades */
  content: '';}

.nav-links a:hover, .nav-links a:focus {
/* Colores y efectos */
  color: var(--color-naranja, #F68048);

  /* Otras propiedades */
  outline: none;}

.nav-links a:hover::after, .nav-links a:focus::after {
/* Dimensiones */
  width: 100%;}

.nav-links a:focus-visible {
/* Bordes */
  border-radius: 4px;

  /* Otras propiedades */
  outline: 2px solid var(--color-menta, #2845D6);
  outline-offset: 4px;}

.hero {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  align-items: center;
  justify-content: center;

  /* Dimensiones */
  min-height: 100vh;
  min-height: 100dvh;

  /* Relleno */
  padding-top: calc(var(--header-height) + var(--safe-area-top));}

.hero-content {
/* Dimensiones */
  max-width: 900px;
  width: 100%;

  /* Relleno */
  padding: var(--space-xl);}

.hero h1 {
/* Márgenes */
  margin-bottom: var(--space-lg);

  /* Tipografía */
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;

  /* Colores y efectos */
  text-shadow: 0 0 20px rgba(40, 69, 214, 0.4);}

.hero-subtitle {
/* Márgenes */
  margin-bottom: var(--space-xl);

  /* Tipografía */
  font-size: var(--text-lg);
  line-height: 1.4;

  /* Colores y efectos */
  opacity: 0.9;

  /* Transiciones y animaciones */
  transition: opacity 0.5s var(--ease-in-out-soft);}

.hero-description {
/* Dimensiones */
  max-width: 600px;

  /* Márgenes */
  margin-bottom: var(--space-xl);
  margin-left: auto;
  margin-right: auto;

  /* Tipografía */
  font-size: var(--text-base);
  line-height: 1.6;

  /* Colores y efectos */
  opacity: 0.8;}

.cta-container {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);}

.cta-button {
/* Relleno */
  padding: var(--space-md) var(--space-xl);

  /* Bordes */
  border-radius: 50px;

  /* Tipografía */
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;

  /* Transiciones y animaciones */
  transition: all 0.3s var(--ease-out-expo);

  /* Otras propiedades */
  -webkit-tap-highlight-color: transparent;}

.cta-button:active {
/* Otras propiedades */
  transform: scale(0.95);}

.section-title {
/* Márgenes */
  margin-bottom: var(--space-2xl);

  /* Tipografía */
  font-size: var(--text-3xl);}

.about, .skills, .experience, .contact {
/* Relleno */
  padding: var(--space-3xl) 0;}

.container {
/* Dimensiones */
  max-width: 1200px;
  width: 100%;

  /* Márgenes */
  margin: 0 auto;

  /* Relleno */
  padding: 0 var(--space-lg);}

.about-content {
/* Modelo de caja */
  display: grid;

  /* Flexbox y Grid */
  gap: var(--space-2xl);}

.stats {
/* Modelo de caja */
  display: grid;

  /* Flexbox y Grid */
  gap: var(--space-md);

  /* Otras propiedades */
  grid-template-columns: repeat(2, 1fr);}

.stat-item {
/* Relleno */
  padding: var(--space-lg);

  /* Tipografía */
  text-align: center;

  /* Transiciones y animaciones */
  transition: transform 0.3s var(--ease-out-expo);}

.stat-item:hover {
/* Otras propiedades */
  transform: translateY(-5px);}

.stat-number {
/* Tipografía */
  font-size: var(--text-3xl);}

.stat-label {
/* Tipografía */
  font-size: var(--text-sm);}

.about-text {
/* Tipografía */
  font-size: var(--text-base);
  line-height: 1.8;}

.about-text p {
/* Márgenes */
  margin-bottom: var(--space-lg);}

.skills-grid {
/* Modelo de caja */
  display: grid;

  /* Flexbox y Grid */
  gap: var(--space-lg);}

.skill-category {
/* Relleno */
  padding: var(--space-xl);

  /* Transiciones y animaciones */
  transition: transform 0.3s var(--ease-out-expo);}

.skill-category:hover {
/* Otras propiedades */
  transform: translateY(-3px);}

.skill-category h3 {
/* Márgenes */
  margin-bottom: var(--space-md);

  /* Tipografía */
  font-size: var(--text-lg);}

.skill-tags {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-wrap: wrap;
  gap: var(--space-sm);}

.skill-tag {
/* Relleno */
  padding: var(--space-xs) var(--space-md);

  /* Tipografía */
  font-size: var(--text-sm);

  /* Transiciones y animaciones */
  transition: transform 0.2s, background 0.3s;}

.skill-tag:hover {
/* Otras propiedades */
  transform: scale(1.05);}

.timeline {
/* Relleno */
  padding-left: var(--space-lg);}

.timeline-item {
/* Márgenes */
  margin-bottom: var(--space-2xl);

  /* Relleno */
  padding-left: var(--space-lg);}

.timeline-content {
/* Relleno */
  padding: var(--space-lg);

  /* Transiciones y animaciones */
  transition: transform 0.3s var(--ease-out-expo);}

.timeline-content:hover {
/* Otras propiedades */
  transform: translateX(5px);}

.timeline-date {
/* Márgenes */
  margin-bottom: var(--space-xs);

  /* Tipografía */
  font-size: var(--text-sm);}

.timeline-title {
/* Márgenes */
  margin-bottom: var(--space-xs);

  /* Tipografía */
  font-size: var(--text-lg);}

.timeline-company {
/* Márgenes */
  margin-bottom: var(--space-md);

  /* Tipografía */
  font-size: var(--text-sm);}

.timeline-content p {
/* Tipografía */
  font-size: var(--text-sm);
  line-height: 1.6;}

.contact-content {
/* Dimensiones */
  max-width: 700px;

  /* Márgenes */
  margin: 0 auto;}

.contact-content h2 {
/* Tipografía */
  font-size: var(--text-2xl);}

.contact-form {
/* Márgenes */
  margin-bottom: var(--space-xl);

  /* Relleno */
  padding: var(--space-xl);}

.contact-info {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);}

.contact-item {
/* Transiciones y animaciones */
  transition: transform 0.3s var(--ease-out-expo);}

.contact-item:hover {
/* Otras propiedades */
  transform: translateY(-3px);}

.footer {
/* Relleno */
  padding: var(--space-lg) 0 var(--space-md);
  padding-bottom: max(var(--space-md), var(--safe-area-bottom));}

.footer .container {
/* Dimensiones */
  max-width: 600px;}

.footer-brand {
/* Márgenes */
  margin-bottom: var(--space-md);}

.footer-logo-text {
/* Tipografía */
  font-size: var(--text-lg);}

.footer-tagline {
/* Tipografía */
  font-size: var(--text-xs);}

.footer-nav {
/* Flexbox y Grid */
  gap: var(--space-sm) var(--space-md);

  /* Márgenes */
  margin-bottom: var(--space-md);

  /* Relleno */
  padding-bottom: var(--space-md);}

.footer-nav a {
/* Tipografía */
  font-size: var(--text-sm);}

.footer-legal, .footer-contact {
/* Flexbox y Grid */
  gap: var(--space-xs) var(--space-sm);}

.footer-legal a, .footer-contact a {
/* Tipografía */
  font-size: var(--text-xs);}

.footer-separator {
/* Modelo de caja */
  display: none;}

.footer-bottom {
/* Relleno */
  padding-top: var(--space-sm);}

.footer-bottom p {
/* Tipografía */
  font-size: 0.65rem;}