/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --bg-light:       #f5f4ff;
  --bg-light-2:     #f9f7f3;
  --bg-light-3:     #eef6f3;
  --navy:           #0e1622;
  --navy-2:         #162132;
  --ink-light:      #14161a;
  --ink-dark:       #1a1530;
  --ink-mute:       #2a2d33;
  --ink-on-dark:    #e7eaef;
  --orange:         #ff5a1f;
  --violet:         #a78bfa;
  --violet-strong:  #7d4ef4;
  --line:           rgba(20,22,26,0.08);
  --line-strong:    rgba(20,22,26,0.16);
  --line-dark:      rgba(255,255,255,0.06);
  --line-dark-strong: rgba(255,255,255,0.14);
  --font-sans:      "Space Grotesk", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", monospace;
  --font-serif:     "Times New Roman", Georgia, serif;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;
  --shadow-soft: 0 30px 80px rgba(20,22,26,0.12);
  --px: 60px;
}

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--navy); }
::selection { background: var(--orange); color: #fff; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 99px; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Tablet */
@media (max-width: 960px) {
  :root { --px: 28px; }
  .jf-topbar-nav  { display: none !important; }
  .jf-about-grid  { grid-template-columns: 1fr !important; }
  .jf-diag-grid   { grid-template-columns: 1fr !important; }
  .jf-notes-grid  { grid-template-columns: 1fr 1fr !important; }
  .jf-contact-grid { grid-template-columns: 1fr !important; }
  .jf-hero-title  { font-size: clamp(52px, 10vw, 100px) !important; }
  .jf-section-head h2 { font-size: clamp(32px, 5vw, 48px) !important; }
}

/* ── Movil */
@media (max-width: 640px) {
  :root { --px: 20px; }
  .jf-hero-title  { font-size: clamp(44px, 13vw, 72px) !important; }
  .jf-hero-btns   { flex-direction: column !important; align-items: flex-start !important; }
  .jf-hero-meta   { display: none !important; }
  .jf-quote-grid  { grid-template-columns: 1fr !important; }
  .jf-quote-text  { font-size: clamp(24px, 6vw, 40px) !important; }
  .jf-notes-grid  { grid-template-columns: 1fr !important; }
  .jf-cal-grid    { grid-template-columns: 1fr !important; }
  .jf-cal-right   { display: none !important; }
  .jf-proj-cols   { grid-template-columns: 48px 1fr 20px !important; font-size: 18px !important; }
  .jf-proj-tag, .jf-proj-year { display: none !important; }
  .jf-footer      { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  .jf-topbar-meta { display: none !important; }
  .jf-diag-viz    { display: none !important; }
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes aeroBlob1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(80px, 60px) scale(1.08); }
  66%  { transform: translate(-40px, 100px) scale(0.95); }
}
@keyframes aeroBlob2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-120px, -80px) scale(1.12); }
}
@keyframes aeroBlob3 {
  0%, 100% { transform: translate(0, 0) scale(0.9); }
  40%  { transform: translate(60px, -50px) scale(1.05); }
  75%  { transform: translate(-80px, 40px) scale(1); }
}
@keyframes aeroBlob4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(100px, 60px) scale(1.1); }
}
@keyframes aeroPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(52,211,153,0.6); }
  50%  { box-shadow: 0 0 20px rgba(52,211,153,0.9), 0 0 32px rgba(52,211,153,0.4); }
}
@keyframes aeroBlink {
  0%, 100% { opacity: 1; }
  50%  { opacity: 0.55; }
}
@keyframes aeroGlowViolet {
  0%, 100% { text-shadow: 0 0 0px rgba(167,139,250,0); }
  50%  { text-shadow: 0 0 24px rgba(167,139,250,0.55), 0 0 60px rgba(125,78,244,0.35); }
}
@keyframes aeroGlowOrange {
  0%, 100% { text-shadow: 0 0 0px rgba(255,90,31,0); }
  50%  { text-shadow: 0 0 24px rgba(255,90,31,0.55), 0 0 60px rgba(255,90,31,0.3); }
}

/* ── Blobs animados */
.jf-blob { will-change: transform; }
.jf-blob-1 { animation: aeroBlob1 22s ease-in-out infinite; }
.jf-blob-2 { animation: aeroBlob2 28s ease-in-out infinite; }
.jf-blob-3 { animation: aeroBlob3 26s ease-in-out infinite; }
.jf-blob-4 { animation: aeroBlob4 32s ease-in-out infinite; }

/* ── Pulse dot */
.ai-pulse-dot { animation: aeroPulse 2.4s ease-in-out infinite; }
.ai-blink     { animation: aeroBlink 2s ease-in-out infinite; }

/* ── CTA naranja */
.ai-cta { transition: transform .25s ease, box-shadow .3s ease, filter .25s ease; }
.ai-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,90,31,0.35); filter: brightness(1.05); }
.ai-cta:active { transform: translateY(0); }
.ai-cta-arrow { transition: transform .35s cubic-bezier(.2,.8,.2,1); display: inline-flex; }
.ai-cta:hover .ai-cta-arrow { transform: translateX(4px); }

/* ── CTA fantasma dark */
.ai-cta-ghost { transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.ai-cta-ghost:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.3) !important; transform: translateY(-2px); }

/* ── CTA fantasma light */
.ai-cta-ghost-light { transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.ai-cta-ghost-light:hover { background: rgba(255,255,255,0.85) !important; border-color: rgba(255,90,31,0.4) !important; transform: translateY(-2px); }

/* ── Nav links */
.ai-nav-link { transition: background .25s ease, color .25s ease; position: relative; }
.ai-nav-link:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }

/* ── Nav: numeral romano se ilumina en naranja */
.ai-nav-num { transition: color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); display: inline-block; }
.ai-nav-link:hover .ai-nav-num { color: var(--orange) !important; transform: scale(1.3) translateY(-1px); opacity: 1 !important; }

/* ── Filas de proyectos */
.ai-proj-row { transition: background .35s ease, padding-left .35s ease; }
.ai-proj-row .ai-arrow { transition: transform .35s cubic-bezier(.2,.8,.2,1), color .25s ease; display: inline-block; }
.ai-proj-row:hover { padding-left: 30px !important; }
.ai-proj-row:hover .ai-arrow { transform: translateX(8px); color: #ff5a1f !important; }

/* ── Cards */
.ai-card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease, background .3s ease; }
.ai-card:hover { transform: translateY(-4px); }
.ai-card-light:hover { box-shadow: 0 20px 50px rgba(20,22,26,0.12); border-color: rgba(255,90,31,0.3) !important; background: rgba(255,255,255,0.85) !important; }
.ai-card-dark:hover  { box-shadow: 0 20px 50px rgba(0,0,0,0.4); border-color: rgba(255,90,31,0.35) !important; background: rgba(255,255,255,0.05) !important; }

/* ── leer en cards */
.ai-leer { transition: letter-spacing .3s ease, color .25s ease; }
.ai-card:hover .ai-leer { letter-spacing: 0.18em; }

/* ── Voces */
.ai-voice { transition: padding-left .35s ease; cursor: pointer; }
.ai-voice:hover { padding-left: 8px !important; }
.ai-voice:hover .ai-voice-name { color: #ff5a1f !important; }

/* ── Filas de datos (formación y contacto) */
.ai-row { transition: padding-left .3s ease; }
.ai-row:hover { padding-left: 8px !important; }
.ai-row-key { transition: color .25s ease; }
.ai-row:hover .ai-row-key { color: var(--orange) !important; }

/* ── Links de contacto (tel, WA) */
.ai-link { transition: color .25s ease; position: relative; display: inline-block; }
.ai-link:hover { color: var(--orange) !important; }
.ai-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  border-radius: 999px;
}
.ai-link:hover::after { transform: scaleX(1); }

/* ── Calendario */
.ai-day-btn  { transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.ai-day-btn:hover:not(.ai-day-active) { transform: translateY(-2px); border-color: rgba(255,90,31,0.4) !important; }
.ai-time-btn { transition: transform .2s ease, border-color .25s ease; }
.ai-time-btn:hover:not(:disabled):not(.ai-time-active) { transform: translateY(-1px); border-color: rgba(255,90,31,0.5) !important; }
.ai-confirm  { transition: transform .25s ease, box-shadow .3s ease, filter .25s ease; }
.ai-confirm:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,90,31,0.4); filter: brightness(1.06); }

/* ── Plus que rota */
.ai-plus { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ai-section-head:hover .ai-plus { transform: rotate(90deg); }

/* ── Highlight glow */
.ai-hl {
  position: relative;
  display: inline-bl