.hero-badge {
/* Modelo de caja */
  display: inline-block;

  /* Márgenes */
  margin-bottom: 1.5rem;

  /* Relleno */
  padding: 0.5rem 1.25rem;

  /* Bordes */
  border: 1px solid rgba(40, 69, 214, 0.3);
  border-radius: 50px;

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

  /* Tipografía */
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;

  /* Colores y efectos */
  color: var(--color-menta, #2845D6);

  /* Transiciones y animaciones */
  animation: pulse 3s ease-in-out infinite;}

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

  /* Flexbox y Grid */
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;

  /* Márgenes */
  margin: 2rem 0;

  /* Relleno */
  padding: 1.5rem;

  /* Bordes */
  border-radius: 16px;
  border: 1px solid rgba(40, 69, 214, 0.15);

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

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

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

  /* Flexbox y Grid */
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;

  /* Dimensiones */
  min-width: 80px;

  /* Relleno */
  padding: 0.5rem 1rem;}

.hero-metric-value {
/* Fondos */
  background: linear-gradient(135deg, var(--color-menta, #2845D6) 0%, var(--color-naranja, #F68048) 100%);

  /* Tipografía */
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;

  /* Colores y efectos */
  text-shadow: none;

  /* Otras propiedades */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(40, 69, 214, 0.3));}

.hero-metric-label {
/* Tipografía */
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);

  /* Otras propiedades */
  letter-spacing: 0.05em;}

.cta-primary {
/* Bordes */
  border: none;

  /* Fondos */
  background: linear-gradient(135deg, var(--color-naranja, #F68048) 0%, #FF9A6C 100%);

  /* Colores y efectos */
  color: #060E3A !important;
  box-shadow: 0 4px 20px rgba(246, 128, 72, 0.3);}

.cta-primary:hover {
/* Fondos */
  background: linear-gradient(135deg, #FF9A6C 0%, var(--color-naranja, #F68048) 100%);

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

  /* Otras propiedades */
  transform: translateY(-3px);}

.cta-secondary {
/* Bordes */
  border: 1px solid rgba(40, 69, 214, 0.4);

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

  /* Colores y efectos */
  color: var(--color-menta, #2845D6);}

.cta-secondary:hover {
/* Bordes */
  border-color: var(--color-menta, #2845D6);

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

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

.cta-linkedin {
/* Bordes */
  border: 1px solid rgba(100, 180, 255, 0.5);

  /* Fondos */
  background: rgba(100, 180, 255, 0.1);

  /* Colores y efectos */
  color: #87CEFA !important;

  /* Transiciones y animaciones */
  transition: all 0.3s ease;}

.cta-linkedin:hover {
/* Bordes */
  border-color: #87CEFA;

  /* Fondos */
  background: rgba(100, 180, 255, 0.25);

  /* Colores y efectos */
  color: #FFFFFF !important;
  box-shadow: 0 0 25px rgba(100, 180, 255, 0.3);

  /* Otras propiedades */
  transform: translateY(-3px);}

.cta-portfolio {
/* Bordes */
  border: 1px solid rgba(180, 140, 255, 0.5);

  /* Fondos */
  background: rgba(180, 140, 255, 0.1);

  /* Colores y efectos */
  color: #C4A8FF !important;

  /* Transiciones y animaciones */
  transition: all 0.3s ease;}

.cta-portfolio:hover {
/* Bordes */
  border-color: #C4A8FF;

  /* Fondos */
  background: rgba(180, 140, 255, 0.25);

  /* Colores y efectos */
  color: #FFFFFF !important;
  box-shadow: 0 0 25px rgba(180, 140, 255, 0.3);

  /* Otras propiedades */
  transform: translateY(-3px);}

.skill-category-highlight {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;

  /* Bordes */
  border: 1px solid rgba(40, 69, 214, 0.3);

  /* Fondos */
  background: linear-gradient(135deg, rgba(40, 69, 214, 0.1) 0%, rgba(246, 128, 72, 0.05) 100%);}

.skill-category-highlight::before {
/* Posicionamiento */
  position: absolute;
  top: 10px;
  right: 10px;

  /* Tipografía */
  font-size: 1.25rem;

  /* Colores y efectos */
  opacity: 0.8;

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

.skill-tag-ai {
/* Fondos */
  background: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);

  /* Tipografía */
  font-weight: 600;

  /* Colores y efectos */
  color: #fff;}

.skill-tag-ai:hover {
/* Fondos */
  background: linear-gradient(135deg, #7C3AED 0%, #0891B2 100%);

  /* Colores y efectos */
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);

  /* Otras propiedades */
  transform: scale(1.1);}

.leadership-section {
/* Márgenes */
  margin-top: 3rem;

  /* Relleno */
  padding: 2rem;

  /* Bordes */
  border-radius: 16px;
  border: 1px solid rgba(246, 128, 72, 0.2);

  /* Fondos */
  background: rgba(246, 128, 72, 0.05);

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

.leadership-title {
/* Márgenes */
  margin-bottom: 1.25rem;

  /* Tipografía */
  font-size: var(--text-xl, 1.25rem);

  /* Colores y efectos */
  color: var(--color-naranja, #F68048);
  text-shadow: 0 0 10px rgba(246, 128, 72, 0.3);}

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

  /* Flexbox y Grid */
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;}

.leadership-tag {
/* Modelo de caja */
  display: inline-flex;

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

  /* Relleno */
  padding: 0.6rem 1.25rem;

  /* Bordes */
  border: 1px solid rgba(246, 128, 72, 0.3);
  border-radius: 50px;

  /* Fondos */
  background: rgba(246, 128, 72, 0.15);

  /* Tipografía */
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;

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

  /* Transiciones y animaciones */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);}

.leadership-tag:hover {
/* Fondos */
  background: rgba(246, 128, 72, 0.25);

  /* Colores y efectos */
  box-shadow: 0 4px 15px rgba(246, 128, 72, 0.2);

  /* Otras propiedades */
  transform: translateY(-2px);}

.timeline-item-current .timeline-content {
/* Bordes */
  border-left: 3px solid var(--color-menta, #2845D6);

  /* Fondos */
  background: linear-gradient(135deg, rgba(40, 69, 214, 0.08) 0%, rgba(6, 14, 58, 0.9) 100%);}

.timeline-badge {
/* Modelo de caja */
  display: inline-block;

  /* Márgenes */
  margin-bottom: 0.5rem;

  /* Relleno */
  padding: 0.25rem 0.75rem;

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

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

  /* Tipografía */
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;

  /* Colores y efectos */
  color: #060E3A;
  box-shadow: 0 0 10px rgba(40, 69, 214, 0.4);

  /* Otras propiedades */
  letter-spacing: 0.1em;}

.timeline-highlights {
/* Márgenes */
  margin: 1rem 0;

  /* Relleno */
  padding: 0;

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

.timeline-highlights li {
/* Posicionamiento */
  position: relative;

  /* Márgenes */
  margin-bottom: 0.75rem;

  /* Relleno */
  padding-left: 1.5rem;

  /* Tipografía */
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);}

.timeline-highlights li::before {
/* Posicionamiento */
  position: absolute;
  left: 0;

  /* Tipografía */
  font-weight: bold;

  /* Colores y efectos */
  color: var(--color-menta, #2845D6);

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

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

  /* Flexbox y Grid */
  flex-wrap: wrap;
  gap: 0.5rem;

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

.timeline-tag {
/* Relleno */
  padding: 0.25rem 0.6rem;

  /* Bordes */
  border: 1px solid rgba(40, 69, 214, 0.25);
  border-radius: 4px;

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

  /* Tipografía */
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;

  /* Colores y efectos */
  color: var(--color-menta, #2845D6);

  /* Transiciones y animaciones */
  transition: all 0.2s ease;

  /* Otras propiedades */
  letter-spacing: 0.03em;}

.timeline-tag:hover {
/* Fondos */
  background: rgba(40, 69, 214, 0.2);

  /* Otras propiedades */
  transform: translateY(-1px);}

.timeline-item-previous .timeline-content {
/* Bordes */
  border-left: 3px solid rgba(246, 128, 72, 0.5);

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

.projects {
/* Posicionamiento */
  position: relative;

  /* Relleno */
  padding: var(--space-3xl, 5rem) 0;

  /* Fondos */
  background: linear-gradient(180deg, #0D1A63 0%, #060E3A 100%);}

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

  /* Flexbox y Grid */
  gap: 2rem;

  /* Otras propiedades */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}

.project-card {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;

  /* Relleno */
  padding: 2rem;

  /* Bordes */
  border-radius: 16px;
  border: 1px solid rgba(40, 69, 214, 0.1);

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

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

  /* Transiciones y animaciones */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);}

.project-card::before {
/* Posicionamiento */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  /* Dimensiones */
  height: 3px;

  /* Fondos */
  background: linear-gradient(90deg, var(--color-menta, #2845D6) 0%, var(--color-naranja, #F68048) 100%);

  /* Colores y efectos */
  opacity: 0;

  /* Transiciones y animaciones */
  transition: opacity 0.3s ease;

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

.project-card:hover, .project-card:focus {
/* Bordes */
  border-color: rgba(40, 69, 214, 0.3);

  /* Colores y efectos */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(40, 69, 214, 0.1);

  /* Otras propiedades */
  transform: translateY(-8px);
  outline: none;}

.project-card:focus {
/* Bordes */
  border-color: var(--color-menta, #2845D6);

  /* Colores y efectos */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(40, 69, 214, 0.3);}

.project-card:hover::before, .project-card:focus::before {
/* Colores y efectos */
  opacity: 1;}

.project-badge {
/* Modelo de caja */
  display: inline-block;

  /* Márgenes */
  margin-bottom: 1rem;

  /* Relleno */
  padding: 0.35rem 0.9rem;

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

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

  /* Tipografía */
  font-size: 0.75rem;
  font-weight: 700;

  /* Colores y efectos */
  color: #060E3A;
  box-shadow: 0 0 15px rgba(40, 69, 214, 0.4);}

.project-badge-ai {
/* Fondos */
  background: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);

  /* Colores y efectos */
  color: #fff;}

.project-title {
/* Márgenes */
  margin-bottom: 0.75rem;

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

  /* Colores y efectos */
  color: var(--color-texto, #E4E6EB);
  text-shadow: 0 0 10px rgba(40, 69, 214, 0.2);}

.project-description {
/* Márgenes */
  margin-bottom: 1.25rem;

  /* Tipografía */
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.7;

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);}

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

  /* Flexbox y Grid */
  flex-wrap: wrap;
  gap: 0.5rem;}

.project-tag {
/* Relleno */
  padding: 0.3rem 0.7rem;

  /* Bordes */
  border: 1px solid rgba(246, 128, 72, 0.25);
  border-radius: 4px;

  /* Fondos */
  background: rgba(246, 128, 72, 0.1);

  /* Tipografía */
  font-size: 0.7rem;
  font-weight: 600;

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

  /* Transiciones y animaciones */
  transition: all 0.2s ease;}

.project-tag:hover {
/* Fondos */
  background: rgba(246, 128, 72, 0.2);

  /* Otras propiedades */
  transform: scale(1.05);}

.project-card-highlight {
/* Bordes */
  border-color: rgba(139, 92, 246, 0.3);

  /* Fondos */
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);}

.project-badge-mobile {
/* Fondos */
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* Colores y efectos */
  color: #fff;}

.project-badge-prod {
/* Fondos */
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

  /* Colores y efectos */
  color: #060E3A;}

.project-badge-self {
/* Fondos */
  background: linear-gradient(135deg, #F68048 0%, #E85D26 100%);

  /* Colores y efectos */
  color: #fff;}

.project-badge-health {
/* Fondos */
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);

  /* Colores y efectos */
  color: #fff;}

.project-badge-fitness {
/* Fondos */
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

  /* Colores y efectos */
  color: #fff;}

.project-badge-api {
/* Fondos */
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);

  /* Colores y efectos */
  color: #fff;}

.education {
/* Posicionamiento */
  position: relative;

  /* Relleno */
  padding: var(--space-3xl, 5rem) 0;

  /* Fondos */
  background: #060E3A;}

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

  /* Flexbox y Grid */
  gap: 2rem;

  /* Otras propiedades */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}

.education-column {
/* Relleno */
  padding: 2rem;

  /* Bordes */
  border-radius: 16px;
  border: 1px solid rgba(40, 69, 214, 0.1);

  /* Fondos */
  background: rgba(18, 18, 18, 0.8);

  /* Transiciones y animaciones */
  transition: all 0.3s ease;}

.education-column:hover {
/* Bordes */
  border-color: rgba(40, 69, 214, 0.25);

  /* Otras propiedades */
  transform: translateY(-3px);}

.education-subtitle {
/* Márgenes */
  margin-bottom: 1.5rem;

  /* Relleno */
  padding-bottom: 0.75rem;

  /* Bordes */
  border-bottom: 1px solid rgba(40, 69, 214, 0.2);

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

  /* Colores y efectos */
  color: var(--color-menta, #2845D6);}

.education-list {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-direction: column;
  gap: 1rem;}

.education-item {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-direction: column;
  gap: 0.25rem;

  /* Relleno */
  padding: 0.75rem;

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

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

  /* Transiciones y animaciones */
  transition: background 0.2s ease;}

.education-item:hover {
/* Fondos */
  background: rgba(40, 69, 214, 0.08);}

.education-program {
/* Tipografía */
  font-weight: 600;
  font-size: var(--text-sm, 0.875rem);

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

.education-institution {
/* Tipografía */
  font-size: var(--text-xs, 0.75rem);

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);}

.certifications-list {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-direction: column;
  gap: 0.75rem;}

.certification-item {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  align-items: center;
  gap: 0.75rem;

  /* Relleno */
  padding: 0.75rem;

  /* Bordes */
  border-radius: 8px;
  border: 1px solid rgba(246, 128, 72, 0.1);

  /* Fondos */
  background: rgba(246, 128, 72, 0.05);

  /* Transiciones y animaciones */
  transition: all 0.2s ease;}

.certification-item:hover {
/* Fondos */
  background: rgba(246, 128, 72, 0.1);

  /* Otras propiedades */
  transform: translateX(5px);}

.certification-icon {
/* Flexbox y Grid */
  flex-shrink: 0;

  /* Tipografía */
  font-size: 1.25rem;}

.certification-name {
/* Tipografía */
  font-weight: 500;
  font-size: var(--text-sm, 0.875rem);

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

.languages-list {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-direction: column;
  gap: 0.75rem;}

.language-item {
/* Modelo de caja */
  display: flex;

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

  /* Relleno */
  padding: 0.75rem 1rem;

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

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

.language-name {
/* Tipografía */
  font-weight: 600;
  font-size: var(--text-sm, 0.875rem);

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

.language-level {
/* Relleno */
  padding: 0.25rem 0.6rem;

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

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

  /* Tipografía */
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;

  /* Colores y efectos */
  color: var(--color-menta, #2845D6);}

.language-level-native {
/* Fondos */
  background: rgba(246, 128, 72, 0.15);

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

.ai-engineering {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;

  /* Relleno */
  padding: var(--space-3xl, 5rem) 0;

  /* Fondos */
  background: linear-gradient(180deg, #060E3A 0%, #0D1A63 50%, #060E3A 100%);}

.ai-engineering::before {
/* Posicionamiento */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Fondos */
  background: radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 40%);

  /* Interactividad */
  pointer-events: none;

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

.ai-intro {
/* Dimensiones */
  max-width: 600px;

  /* Márgenes */
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;

  /* Tipografía */
  text-align: center;
  font-size: var(--text-lg, 1.125rem);

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);}

.ai-grid {
/* Posicionamiento */
  position: relative;
  z-index: 1;

  /* Modelo de caja */
  display: grid;

  /* Flexbox y Grid */
  gap: 2rem;

  /* Otras propiedades */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}

.ai-card {
/* Relleno */
  padding: 2rem;

  /* Bordes */
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.2);

  /* Fondos */
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);

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

  /* Transiciones y animaciones */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);}

.ai-card:hover {
/* Bordes */
  border-color: rgba(139, 92, 246, 0.5);

  /* Colores y efectos */
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2);

  /* Otras propiedades */
  transform: translateY(-8px) scale(1.02);}

.ai-icon {
/* Márgenes */
  margin-bottom: 1rem;

  /* Tipografía */
  font-size: 3rem;

  /* Otras propiedades */
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4));}

.ai-card-title {
/* Márgenes */
  margin-bottom: 0.75rem;

  /* Fondos */
  background: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);

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

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

  /* Otras propiedades */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;}

.ai-card-description {
/* Tipografía */
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.7;

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);}

.blog {
/* Posicionamiento */
  position: relative;

  /* Relleno */
  padding: var(--space-3xl, 5rem) 0;}

.blog .section-subtitle {
/* Márgenes */
  margin-bottom: 2rem;

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

  /* Colores y efectos */
  color: var(--color-texto-secundario, #B0BBE0);}

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

  /* Flexbox y Grid */
  gap: 28px;

  /* Márgenes */
  margin-bottom: 32px;

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

.blog-card {
/* Modelo de caja */
  overflow: hidden;

  /* Bordes */
  border: 1px solid rgba(40, 69, 214, 0.25);
  border-radius: 16px;

  /* Fondos */
  background: rgba(10, 22, 80, 0.7);

  /* Transiciones y animaciones */
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;

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

.blog-card:hover {
/* Bordes */
  border-color: var(--color-acento, #F68048);

  /* Colores y efectos */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 24px rgba(246, 128, 72, 0.08);

  /* Otras propiedades */
  transform: translateY(-6px);}

.blog-card-link {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-direction: column;

  /* Dimensiones */
  height: 100%;

  /* Tipografía */
  text-decoration: none;

  /* Colores y efectos */
  color: inherit;}

.blog-card-image {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;

  /* Dimensiones */
  height: 200px;}

.blog-card-image img {
/* Dimensiones */
  width: 100%;
  height: 200px;

  /* Transiciones y animaciones */
  transition: transform 0.5s ease;

  /* Otras propiedades */
  object-fit: cover;}

.blog-card:hover .blog-card-image img {
/* Otras propiedades */
  transform: scale(1.06);}

.blog-card-image--placeholder {
/* Modelo de caja */
  display: flex;

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

  /* Dimensiones */
  height: 200px;

  /* Fondos */
  background: linear-gradient(135deg, #0A1650 0%, #1a2980 100%);

  /* Tipografía */
  font-size: 3rem;

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

.blog-card-body {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-direction: column;
  flex: 1;

  /* Relleno */
  padding: 20px 22px 22px;}

.blog-category {
/* Modelo de caja */
  display: inline-block;

  /* Dimensiones */
  width: fit-content;

  /* Márgenes */
  margin-bottom: 10px;

  /* Relleno */
  padding: 4px 12px;

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

  /* Fondos */
  background: rgba(246, 128, 72, 0.15);

  /* Tipografía */
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;

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

  /* Otras propiedades */
  letter-spacing: 0.5px;}

.blog-card-title {
/* Modelo de caja */
  display: -webkit-box;
  overflow: hidden;

  /* Márgenes */
  margin: 0 0 10px;

  /* Tipografía */
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;

  /* Colores y efectos */
  color: #fff;

  /* Otras propiedades */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;}

.blog-card-title a {
/* Tipografía */
  text-decoration: none;

  /* Colores y efectos */
  color: #fff;

  /* Transiciones y animaciones */
  transition: color 0.2s;}

.blog-card-title a:hover {
/* Colores y efectos */
  color: var(--color-acento, #F68048);}

.blog-card-excerpt {
/* Modelo de caja */
  display: -webkit-box;
  overflow: hidden;

  /* Flexbox y Grid */
  flex: 1;

  /* Márgenes */
  margin-bottom: 16px;

  /* Tipografía */
  font-size: 0.88rem;
  line-height: 1.55;

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

  /* Otras propiedades */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;}

.blog-card-meta {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  align-items: center;
  gap: 6px;

  /* Márgenes */
  margin-top: auto;

  /* Relleno */
  padding-top: 14px;

  /* Bordes */
  border-top: 1px solid rgba(40, 69, 214, 0.15);

  /* Tipografía */
  font-size: 0.8rem;

  /* Colores y efectos */
  color: rgba(176, 187, 224, 0.7);}

.blog-empty {
/* Relleno */
  padding: 40px;

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

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

  /* Otras propiedades */
  grid-column: 1 / -1;}

.blog-more {
/* Márgenes */
  margin-top: 8px;

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

.btn-outline {
/* Modelo de caja */
  display: inline-block;

  /* Relleno */
  padding: 10px 24px;

  /* Bordes */
  border: 1px solid var(--color-acento, #F68048);
  border-radius: 8px;

  /* Tipografía */
  text-decoration: none;
  font-size: 0.95rem;

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

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

.btn-outline:hover {
/* Fondos */
  background: var(--color-acento, #F68048);

  /* Colores y efectos */
  color: #fff;}

.why-me {
/* Posicionamiento */
  position: relative;

  /* Relleno */
  padding: var(--space-3xl, 5rem) 0;

  /* Fondos */
  background: #0D1A63;}

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

  /* Flexbox y Grid */
  gap: 1.5rem;

  /* Otras propiedades */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}

.why-me-item {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  align-items: flex-start;
  gap: 1rem;

  /* Relleno */
  padding: 1.5rem;

  /* Bordes */
  border-radius: 12px;
  border: 1px solid rgba(40, 69, 214, 0.1);

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

  /* Transiciones y animaciones */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);}

.why-me-item:hover {
/* Bordes */
  border-color: rgba(40, 69, 214, 0.3);

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

  /* Otras propiedades */
  transform: translateY(-4px);}

.why-me-icon {
/* Flexbox y Grid */
  flex-shrink: 0;

  /* Tipografía */
  font-size: 2rem;

  /* Otras propiedades */
  filter: drop-shadow(0 0 8px rgba(40, 69, 214, 0.3));}

.why-me-content h3 {
/* Márgenes */
  margin-bottom: 0.35rem;

  /* Tipografía */
  font-size: var(--text-base, 1rem);
  font-weight: 700;

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

.why-me-content p {
/* Márgenes */
  margin: 0;

  /* Tipografía */
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);}

.personal-note {
/* Márgenes */
  margin-top: 3rem;

  /* Relleno */
  padding: 2rem;

  /* Bordes */
  border-radius: 16px;
  border: 1px solid rgba(246, 128, 72, 0.15);

  /* Fondos */
  background: linear-gradient(135deg, rgba(246, 128, 72, 0.05) 0%, rgba(40, 69, 214, 0.02) 100%);

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

.personal-note h3 {
/* Márgenes */
  margin-bottom: 1rem;

  /* Tipografía */
  font-size: var(--text-lg, 1.125rem);

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

.personal-note p {
/* Dimensiones */
  max-width: 700px;

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

  /* Tipografía */
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.8;

  /* Colores y efectos */
  color: var(--color-texto-secundario, #9CA3AF);}

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

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

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

  /* Márgenes */
  margin-bottom: 1.5rem;

  /* Relleno */
  padding: 10px;

  /* Bordes */
  border: 2px solid var(--color-menta, #2845D6);
  border-radius: 50%;

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

  /* Colores y efectos */
  color: var(--color-menta, #2845D6);
  box-shadow: 0 0 20px rgba(40, 69, 214, 0.2);}

.personal-avatar {
/* Dimensiones */
  width: 100%;
  height: 100%;

  /* Otras propiedades */
  stroke-width: 1.5;}

.personal-note {
/* Modelo de caja */
  display: flex;

  /* Flexbox y Grid */
  flex-direction: column;
  align-items: center;

  /* Tipografía */
  text-align: left;}

.personal-note h3 {
/* Dimensiones */
  width: 100%;

  /* Márgenes */
  margin-top: 0;

  /* Tipografía */
  text-align: left;}

a.hero-metric {
/* Bordes */
  border-radius: 12px;

  /* Tipografía */
  text-decoration: none;

  /* Transiciones y animaciones */
  transition: all 0.3s ease;

  /* Interactividad */
  cursor: pointer;}

a.hero-metric:hover {
/* Fondos */
  background: rgba(255, 255, 255, 0.03);

  /* Otras propiedades */
  transform: translateY(-5px);}

a.hero-metric:hover .hero-metric-value {
/* Otras propiedades */
  filter: drop-shadow(0 0 20px rgba(40, 69, 214, 0.5));}

a.hero-metric:focus {
/* Otras propiedades */
  outline: 2px solid var(--color-menta, #2845D6);
  outline-offset: 4px;}

.achievements {
/* Relleno */
  padding: 5rem 0;}

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

  /* Flexbox y Grid */
  gap: 1.5rem;

  /* Márgenes */
  margin-top: 2rem;

  /* Otras propiedades */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}

.achievement-card {
/* Posicionamiento */
  position: relative;

  /* Relleno */
  padding: 2rem 1.5rem;

  /* Bordes */
  border-radius: 16px;
  border: 1px solid rgba(40, 69, 214, 0.2);

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

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

  /* Transiciones y animaciones */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);}

.achievement-card:hover {
/* Bordes */
  border-color: rgba(246, 128, 72, 0.4);

  /* Fondos */
  background: rgba(246, 128, 72, 0.08);

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

  /* Otras propiedades */
  transform: translateY(-6px);}

.achievement-icon {
/* Modelo de caja */
  display: block;

  /* Márgenes */
  margin-bottom: 0.75rem;

  /* Tipografía */
  font-size: 2rem;}

.achievement-value {
/* Márgenes */
  margin-bottom: 0.5rem;

  /* Fondos */
  background: linear-gradient(135deg, var(--color-naranja, #F68048), #FF9A6C);

  /* Tipografía */
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;

  /* Otras propiedades */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;}

.achievement-text {
/* Márgenes */
  margin: 0;

  /* Tipografía */
  font-size: 0.9rem;
  line-height: 1.5;

  /* Colores y efectos */
  color: rgba(228, 230, 235, 0.75);}

.valor-diferencial {
/* Relleno */
  padding: 4rem 0;}

.valor-content {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;

  /* Dimensiones */
  max-width: 800px;

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

  /* Relleno */
  padding: 3rem 2.5rem;

  /* Bordes */
  border-radius: 20px;
  border: 1px solid rgba(246, 128, 72, 0.2);

  /* Fondos */
  background: linear-gradient(135deg, rgba(40, 69, 214, 0.06) 0%, rgba(246, 128, 72, 0.04) 100%);

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

.valor-content::before {
/* Posicionamiento */
  position: absolute;
  top: 0;
  left: 50%;

  /* Dimensiones */
  width: 80px;
  height: 3px;

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

  /* Fondos */
  background: linear-gradient(90deg, var(--color-naranja, #F68048), var(--color-menta, #2845D6));

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

.valor-title {
/* Márgenes */
  margin-bottom: 1.5rem;

  /* Tipografía */
  font-size: 1.75rem;
  font-weight: 700;

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

.valor-quote {
/* Posicionamiento */
  position: relative;

  /* Márgenes */
  margin: 0 0 1.5rem;

  /* Relleno */
  padding: 0;

  /* Bordes */
  border: none;

  /* Tipografía */
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.8;

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

.valor-quote::before, .valor-quote::after {
/* Otras propiedades */
  content: '';}

.valor-tagline {
/* Márgenes */
  margin: 0;

  /* Tipografía */
  font-size: 0.95rem;
  line-height: 1.6;

  /* Colores y efectos */
  color: rgba(228, 230, 235, 0.6);}

.skill-category-leadership {
/* Bordes */
  border: 1px solid rgba(246, 128, 72, 0.25);

  /* Fondos */
  background: linear-gradient(135deg, rgba(246, 128, 72, 0.08) 0%, rgba(6, 14, 58, 0.9) 100%);}

.skill-category-leadership h3 {
/* Colores y efectos */
  color: var(--color-naranja, #F68048);}