:root {
  /* ═══ F1 RACING PALETTE ═══ */
  --space-bg: #030712;
  --accent-indigo: #6366f1;
  --accent-crimson: #ff003c;
  --accent-red: #E10600;
  --accent-cyan: #00f2ff;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-glare: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.02) 100%
  );
  --shadow-premium:
    0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --font-display: "Krona One", sans-serif;
  --font-body: "Inter", sans-serif;
  --color-accent: #01696f;
  --color-gold: #D4AF37;
  --color-muted: rgba(255, 255, 255, 0.45);
  --font-title: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  /* Premium Gradients */
  --f1-gradient-accent: linear-gradient(135deg, var(--accent-crimson), #991b1b);
  --f1-gradient-telemetry: linear-gradient(90deg, var(--accent-indigo), var(--accent-cyan));
  --f1-gradient-hub: linear-gradient(135deg, var(--accent-indigo), #030712);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: hidden;
}
body {
  background-color: var(--space-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999999;
  padding: 12px 24px;
  background: var(--accent-indigo);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
}
.app-shell {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

/* ═══ F1 CHASSIS SHAKE — Vibración de chasis en modo OVERTAKE ═══ */
@keyframes f1-chassis-shake {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-2px) rotate(-0.1deg); }
  20%  { transform: translateX(2px) rotate(0.1deg); }
  30%  { transform: translateX(-1px); }
  40%  { transform: translateX(1px) rotate(-0.05deg); }
  50%  { transform: translateX(-2px); }
  60%  { transform: translateX(1px) rotate(0.1deg); }
  70%  { transform: translateX(-1px); }
  80%  { transform: translateX(2px) rotate(-0.1deg); }
  90%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
/* ═══ F1 CINEMATIC BACKGROUND ═══ */
#bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
  filter: brightness(0.45) saturate(0.4) grayscale(0.2);
  object-position: center 30%;
}
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
}
.avatar-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 32px;
  animation: float-avatar 6s ease-in-out infinite;
}
@keyframes float-avatar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.avatar-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 60%,
    transparent 100%
  );
}
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: 
    radial-gradient(ellipse at center, transparent 20%, rgba(3, 7, 18, 0.4) 60%, rgba(3, 7, 18, 0.85) 100%),
    linear-gradient(to bottom, rgba(3, 7, 18, 0.3) 0%, transparent 30%, transparent 70%, rgba(3, 7, 18, 0.7) 100%);
  pointer-events: none;
}
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.text-gradient {
  background: linear-gradient(to right, #ffffff, var(--accent-indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));
}
.text-gradient-red {
  background: linear-gradient(to right, #ffffff, var(--accent-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
section {
  width: 100%;
  max-width: 1200px;
  padding: 120px 24px;
  position: relative;
}
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 150px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--glass-bg);
  border: 1px solid rgba(225, 6, 0, 0.3);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(225, 6, 0, 0.15);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -1px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 0, 0, 0.5);
}
.hero h2 {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 800px;
  line-height: 1.6;
}
.hero-description {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 800px;
  line-height: 1.6;
}
.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  justify-content: center;
  flex-wrap: wrap;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent-red);
}
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.7;
  animation: bounceTail 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}
.scroll-indicator .mouse {
  width: 24px;
  height: 36px;
  border: 2px solid var(--text-secondary);
  border-radius: 12px;
  position: relative;
}
.scroll-indicator .wheel {
  width: 4px;
  height: 8px;
  background: var(--accent-red);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite;
}
@keyframes bounceTail {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  40% {
    transform: translateY(-10px) translateX(-50%);
  }
  60% {
    transform: translateY(-5px) translateX(-50%);
  }
}
@keyframes scrollWheel {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 12px);
    opacity: 0;
  }
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 64px;
}
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 40px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-premium);
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-glare);
  opacity: 0.1;
  pointer-events: none;
}
.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(99, 102, 241, 0.15),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.glass-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.2);
}
.glass-card:hover::after {
  opacity: 1;
}
.glass-card:active {
  transform: scale(0.97);
}
.orb-trigger:active {
  transform: scale(0.92);
}
.orb-item:active .orb-icon {
  transform: scale(0.9);
}
.sensor-chip:active {
  transform: scale(0.95);
}
.podcast-link:active {
  transform: scale(0.96);
}
.tech-stack-image:active {
  transform: scale(0.97);
}
.liquid-modal-close:active {
  opacity: 0.3;
  transform: scale(0.9);
}
.glass-card .icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(225, 6, 0, 0.1),
    rgba(0, 210, 255, 0.1)
  );
  border: 1px solid rgba(225, 6, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--accent-red);
}
.glass-card h3 {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}
.glass-card p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 15px;
}
.sensor-chip {
  position: fixed;
  bottom: 30px;
  left: 30px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.sensor-chip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: floatChip 4s ease-in-out infinite, pulseBorder 2s infinite;
}

@keyframes floatChip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes pulseBorder {
  0% { border-color: rgba(225, 6, 0, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 rgba(225, 6, 0, 0); }
  50% { border-color: rgba(225, 6, 0, 0.8); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(225, 6, 0, 0.4); }
  100% { border-color: rgba(225, 6, 0, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 rgba(225, 6, 0, 0); }
}
.sensor-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
  border-color: var(--accent-cyan);
}
.sensor-chip .dot {
  width: 8px;
  height: 8px;
  background: var(--accent-red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-red);
  animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.liquid-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.liquid-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.liquid-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 5, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 0;
}
.liquid-modal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.45;
  pointer-events: none;
}
.liquid-modal-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 600px;
  background: rgba(8, 8, 12, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 40px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.liquid-modal.show .liquid-modal-content {
  transform: translateY(0) scale(1);
}
.liquid-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.liquid-modal-close:hover {
  opacity: 1;
}
.tech-stack-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
}
.tech-stack-image {
  width: 100%;
  height: auto;
  opacity: 1;
  filter: grayscale(0%);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
@media (hover: hover) {
  .tech-stack-image {
    opacity: 0.6;
    filter: grayscale(100%);
  }
  .tech-stack-image:hover {
    opacity: 1;
    filter: grayscale(0%) drop-shadow(0 0 30px rgba(225, 6, 0, 0.4));
    transform: scale(1.02);
  }
}
.nexus-orb-hub {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}
.orb-trigger {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-red), #0A1628);
  box-shadow:
    0 10px 30px rgba(225, 6, 0, 0.4),
    inset 0 2px 5px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: float 4s ease-in-out infinite;
}
.orb-trigger:hover {
  transform: scale(1.05);
}
.orb-trigger svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  transition: transform 0.4s ease;
}
.orb-menu {
  position: absolute;
  bottom: 80px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
.orb-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  color: #fff;
}
.orb-label {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.orb-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.orb-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.nexus-orb-hub.active .orb-menu {
  pointer-events: auto;
}
.nexus-orb-hub.active .orb-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.nexus-orb-hub.active .orb-item:nth-child(1) {
  transition-delay: 0.1s;
}
.nexus-orb-hub.active .orb-item:nth-child(2) {
  transition-delay: 0.05s;
}
.nexus-orb-hub.active .orb-item:nth-child(3) {
  transition-delay: 0s;
}
.nexus-orb-hub.active .orb-trigger svg {
  transform: rotate(45deg);
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
footer {
  width: 100%;
  text-align: center;
  padding: 40px 24px;
  border-top: 1px solid var(--glass-border);
  margin-top: 80px;
}
footer p {
  color: var(--text-secondary);
  font-size: 14px;
}
@media (max-width: 768px) {
  .hero {
    padding-top: 100px;
    text-align: center;
    align-items: center;
  }
  .hero-stats {
    justify-content: center;
  }
}

/* ================================================
   FRENTE 2 — CURSOR MAGNÉTICO (Solo desktop)
   ================================================ */
@media (hover: hover) {
  body.custom-cursor-active,
  body.custom-cursor-active a,
  body.custom-cursor-active button {
    cursor: none;
  }
}
#cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--accent-red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--accent-red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s ease,
    height 0.2s ease,
    opacity 0.2s ease,
    border-color 0.2s ease;
  opacity: 0;
}

/* ================================================
   FRENTE 2 — BENTO GRID (sistema disponible)
   ================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.bento-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    transform 0.15s ease;
}
.bento-card--wide {
  grid-column: span 8;
}
.bento-card--narrow {
  grid-column: span 4;
}
.bento-card--half {
  grid-column: span 6;
}
.bento-card--full {
  grid-column: span 12;
}
.bento-card--third {
  grid-column: span 4;
}
@media (max-width: 768px) {
  .bento-card--wide,
  .bento-card--narrow,
  .bento-card--half,
  .bento-card--third {
    grid-column: span 12;
  }
  .bento-grid {
    padding: 16px;
    gap: 12px;
  }
}

/* ================================================
   FRENTE 2 — MODAL DE CONTACTO
   ================================================ */
.contact-modal-inner {
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.3) transparent;
}
.contact-modal-inner::-webkit-scrollbar {
  width: 4px;
}
.contact-modal-inner::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 2px;
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 20px;
}
.modal-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--color-accent);
}
.avatar-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--glass-bg), rgba(0, 240, 255, 0.1));
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.modal-avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-name {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px;
}
.modal-title {
  font-size: 0.8rem;
  color: var(--accent-cyan);
  margin: 0 0 2px;
}
.modal-company {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin: 0;
}
.mono {
  font-family: var(--font-mono);
}
.modal-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.modal-section:last-of-type {
  border-bottom: none;
}

/* Tooltip con pulso */
.contact-tooltip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-bottom: 10px;
  animation: fadeInUp 0.4s ease 0.3s both;
}
.tooltip-pulse {
  width: 7px;
  height: 7px;
  background: var(--accent-cyan);
  border-radius: 50%;
  flex-shrink: 0;
  animation: contact-pulse 1.6s ease-in-out infinite;
}
@keyframes contact-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.5);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botón primario contacto */
.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
}
.btn-primary:hover {
  background: #01858e;
}
.btn-primary:active {
  transform: scale(0.97);
}

/* Wallet */
#wallet-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wallet-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}
.wallet-btn:hover {
  opacity: 0.85;
}
.wallet-btn:active {
  transform: scale(0.96);
}
.wallet-desktop-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  text-align: center;
}

/* NFC */
.nfc-write-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 20px;
  background: rgba(0, 240, 255, 0.08);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  font-family: var(--font-title);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nfc-write-btn:hover {
  background: rgba(0, 240, 255, 0.15);
}
.nfc-write-btn:active {
  transform: scale(0.97);
}
.nfc-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin-top: 8px;
  min-height: 20px;
}
.nfc-status--scanning {
  color: var(--accent-cyan);
}
.nfc-status--success {
  color: #67d472;
}
.nfc-status--error {
  color: #f56565;
}
.nfc-status--info {
  color: var(--color-muted);
}
.nfc-hint {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 6px;
}

/* QR */
#section-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.section-label {
  font-size: 0.7rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#qr-canvas {
  border-radius: 8px;
}

/* CTA */
.nexus-cta-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
}
.nexus-cta-divider::before,
.nexus-cta-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}
.nexus-cta-desc {
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.nexus-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
}
.cta-btn--primary {
  background: rgba(0, 240, 255, 0.1);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 240, 255, 0.25);
}
.cta-btn--primary:hover {
  background: rgba(0, 240, 255, 0.18);
}
.cta-btn--primary:active {
  transform: scale(0.97);
}
.cta-btn--whatsapp {
  background: rgba(37, 211, 102, 0.1);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.25);
}
.cta-btn--whatsapp:hover {
  background: rgba(37, 211, 102, 0.18);
}

/* ================================================
   v3.3 — TAP-HIGHLIGHT + ACTIVE STATES (Fase A+D)
   ================================================ */
.glass-card,
.orb-trigger,
.orb-icon,
.podcast-link,
.tech-stack-image,
.sensor-chip,
.liquid-modal-close,
.btn-primary,
.cta-btn,
#save-contact-btn,
.bento-card,
.nfc-write-btn {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
.glass-card:active {
  transform: scale(0.97);
}
.orb-trigger:active {
  transform: scale(0.9);
  box-shadow: none;
}
.orb-item:active .orb-icon {
  transform: scale(0.88);
}
.podcast-link:active {
  transform: scale(0.95) !important;
  opacity: 0.85;
}
.tech-stack-image:active {
  transform: scale(0.98);
  opacity: 0.8;
}
.sensor-chip:active {
  transform: scale(0.93);
}
.liquid-modal-close:active {
  transform: scale(0.88);
  opacity: 0.4;
}
#save-contact-btn:active {
  transform: scale(0.96);
}
.cta-btn:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════
   NEXUS CINEMATIC LOADER v3.3
   ═══════════════════════════════════════════════════ */
#nexus-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #050810;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.9s ease,
    visibility 0.9s ease;
}
#nexus-loader.nl-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nl-bg-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 245, 255, 0.06) 0%,
    rgba(139, 92, 246, 0.04) 40%,
    transparent 70%
  );
  animation: nlPulse 2s ease-in-out infinite alternate;
}
@keyframes nlPulse {
  from {
    transform: scale(0.95);
    opacity: 0.6;
  }
  to {
    transform: scale(1.05);
    opacity: 1;
  }
}
.nl-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: nlFadeUp 0.6s ease forwards;
}
@keyframes nlFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nl-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.nl-brand {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(42px, 9vw, 72px);
  font-weight: 900;
  letter-spacing: 0.25em;
  background: linear-gradient(135deg, #00f5ff, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.4));
  animation: nlGlow 1.4s ease-in-out infinite alternate;
}
@keyframes nlGlow {
  from {
    filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.3));
  }
  to {
    filter: drop-shadow(0 0 35px rgba(139, 92, 246, 0.6));
  }
}
.nl-number {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
}
.nl-suffix {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: clamp(12px, 2vw, 16px);
  color: rgba(0, 245, 255, 0.6);
  letter-spacing: 0.3em;
}
.nl-name {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: clamp(11px, 2vw, 13px);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.nl-bar-wrap {
  width: min(280px, 55vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.nl-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00f5ff, #8b5cf6);
  border-radius: 2px;
  animation: nlFill 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes nlFill {
  0% {
    width: 0%;
  }
  50% {
    width: 70%;
  }
  85% {
    width: 92%;
  }
  100% {
    width: 100%;
  }
}
.nl-tagline {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   HOTFIX CONSOLIDADO v3.4 — Video + Modal + Scroll
   ═══════════════════════════════════════════════════ */

/* Video avatar: ocultar controles nativos */
.avatar-container video::-webkit-media-controls,
.avatar-container video::-webkit-media-controls-enclosure,
.avatar-container video::-webkit-media-controls-panel,
.avatar-container video::-webkit-media-controls-play-button,
.avatar-container video::-webkit-media-controls-start-playback-button,
.avatar-container video::-webkit-media-controls-timeline {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Modal cerrado: INVISIBLE + NO intercepta eventos */
.liquid-modal:not(.show) {
  pointer-events: none !important;
  visibility: hidden !important;
}
.liquid-modal:not(.show) .liquid-modal-bg {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  pointer-events: none !important;
}
.liquid-modal:not(.show) .liquid-modal-content {
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}
.liquid-modal:not(.show) .liquid-modal-video {
  pointer-events: none !important;
}

/* Transición sincronizada: 0.3s para overlay Y contenido */
.liquid-modal {
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease !important;
}
.liquid-modal .liquid-modal-content {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Lock real en el contenedor de scroll cuando hay modal abierto */
#appShell.modal-open {
  overflow: hidden !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* ================================================
   F1 TELEMETRY MICRO-UI (v4.002 — fix ::after conflict)
   ================================================ */
/* F1 status pulse dot — ahora como elemento independiente, no ::after */
.f1-status-dot {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 10px rgba(225, 6, 0, 0.9);
  animation: f1-status-pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.card-sector-label {
  position: absolute;
  left: 18px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(225, 6, 0, 0.7);
  pointer-events: none;
  z-index: 2;
}

@keyframes f1-status-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.7); opacity: 1; }
}

/* F1 WHEEL SVG */
.orb-trigger .f1-wheel {
  width: 28px;
  height: 28px;
  transition: transform 0.18s ease-out;
}
.orb-trigger:hover .f1-wheel,
.orb-trigger:active .f1-wheel {
  transform: scale(1.1) rotate(-6deg);
}

/* ================================================
   MACRO-SPACING — Luxury Oxygenation
   ================================================ */
:root {
  --section-padding-y: 160px;
  --section-padding-y-md: 256px;
}
section.oxygen {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  section.oxygen {
    padding-top: var(--section-padding-y-md);
    padding-bottom: var(--section-padding-y-md);
    padding-left: 60px;
    padding-right: 60px;
  }
}
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 60px;
  text-align: center;
}

/* ================================================
   REVEAL BLUR — Blur-in animation for cards
   ================================================ */
@keyframes blurIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(40px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
.reveal-blur {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(40px);
}
.reveal-blur.active {
  animation: blurIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ================================================
   EXPERIENCE TIMELINE
   ================================================ */
.timeline-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 80px;
}
@media (min-width: 768px) {
  .timeline-entry {
    grid-template-columns: 200px 1fr;
    gap: 48px;
  }
}
.timeline-left {
  position: relative;
}
@media (min-width: 768px) {
  .timeline-left {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}
.timeline-number {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.7;
  color: rgba(255, 255, 255, 0.03);
  margin-bottom: 12px;
}
.timeline-period {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.timeline-company {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.timeline-card {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.timeline-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-glare);
  pointer-events: none;
  z-index: 1;
}
.timeline-role {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.timeline-location {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.timeline-bullets {
  list-style: none;
  padding: 0;
  position: relative;
  z-index: 2;
}
.timeline-bullets li {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
  padding-left: 16px;
  position: relative;
  margin-bottom: 10px;
}
.timeline-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 0;
}
.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}
.timeline-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  color: var(--text-secondary);
  transition: border-color 0.3s, color 0.3s;
}
.timeline-tag:hover {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

/* ================================================
   EDUCATION GRID
   ================================================ */
.edu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .edu-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.edu-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.15s ease;
}
.edu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-glare);
  pointer-events: none;
  z-index: 1;
}
.edu-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.edu-year {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
.edu-degree {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}
.edu-school {
  font-size: 0.8rem;
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
}

/* ================================================
   CERTIFICATIONS LIST
   ================================================ */
.cert-list {
  max-width: 700px;
  margin: 0 auto;
}
.cert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--glass-border);
  transition: padding-left 0.3s ease;
  cursor: default;
}
.cert-item:hover {
  padding-left: 16px;
}
.cert-name {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s;
}
.cert-item:hover .cert-name {
  color: var(--text-primary);
}
.cert-arrow {
  color: rgba(255, 255, 255, 0.15);
  font-family: var(--font-mono);
  font-size: 14px;
  transition: color 0.3s, transform 0.3s;
}
.cert-item:hover .cert-arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}