/* ── 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-block;
  cursor: default;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), letter-spacing .5s ease, filter .4s ease;
}
.ai-hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.08em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  opacity: 0.6;
  border-radius: 999px;
}
.ai-hl:hover::after { transform: scaleX(1); }
.ai-hl-violet:hover {
  transform: translateY(-2px) scale(1.04);
  letter-spacing: 0.01em;
  animation: aeroGlowViolet 1.6s ease-in-out infinite;
}
.ai-hl-orange:hover {
  transform: translateY(-2px) scale(1.04);
  letter-spacing: 0.01em;
  animation: aeroGlowOrange 1.6s ease-in-out infinite;
}

/* ── Aviso de construcción */
@keyframes aeroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes aeroSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.ai-construction-overlay {
  animation: aeroFadeIn .35s ease-out forwards;
}
.ai-construction-card {
  animation: aeroSlideUp .45s .08s cubic-bezier(.2,.8,.2,1) both;
}

/* ── Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .jf-blob-1, .jf-blob-2, .jf-blob-3, .jf-blob-4 { animation: none !important; }
  .ai-pulse-dot, .ai-blink { animation: none !important; }
  .ai-hl-violet:hover, .ai-hl-orange:hover { animation: none !important; transform: none !important; }
  .ai-construction-overlay, .ai-construction-card { animation: none !important; }
}
/* Reserva externa y pago según la modalidad seleccionada. */
.jf-proton-grid { display:grid; grid-template-columns:1fr 1fr; }
.jf-proton-booking,.jf-proton-payments { padding:clamp(22px,4vw,44px); min-width:0; }
.jf-proton-payments { background:rgba(255,90,31,.055); border-left:1px solid rgba(20,22,26,.1); }
.jf-proton-grid h3 { font-size:30px; line-height:1.15; margin:20px 0; font-weight:500; }
.jf-proton-grid p { font-size:15px; line-height:1.6; margin:16px 0; }
.jf-proton-grid .jf-proton-detail { font-size:13px; color:#55565b; }
.jf-proton-button { display:flex; align-items:center; justify-content:center; padding:16px 20px; border-radius:14px; background:#ff5a1f; color:white; font-size:14px; font-weight:600; text-align:center; line-height:1.4; }
.jf-proton-button:hover { background:#bc3709; color:white; }
.jf-proton-button:focus-visible,.jf-proton-selector label:focus-within { outline:3px solid #673ac9; outline-offset:4px; }
.jf-proton-service { margin:24px 0; border:1px solid rgba(20,22,26,.13); border-radius:16px; padding:22px; background:rgba(255,255,255,.7); }
.jf-proton-service h4 { margin:0 0 10px; font-size:20px; font-weight:500; }
.jf-proton-service strong { color:#993008; }
.jf-proton-selector { padding:0; margin:24px 0; border:0; }
.jf-proton-selector legend { font-size:14px; margin-bottom:12px; }
.jf-proton-selector label { display:flex; align-items:center; gap:12px; padding:15px; margin:10px 0; border:1px solid #bdbdc0; border-radius:12px; cursor:pointer; font-size:14px; }
.jf-proton-selector strong { display:block; margin-top:5px; font-size:13px; }
.jf-proton-selector .is-selected { border-color:#ff5a1f; background:rgba(255,90,31,.08); }
.jf-proton-selector input { accent-color:#bc3709; }
.jf-proton-selector label.jf-proton-initial { border-color:rgba(20,22,26,.16); font-size:13px; color:#45464b; }
.jf-proton-selector label.jf-proton-initial.is-selected { border-color:#ff5a1f; color:#14161a; }
.jf-proton-initial b { font-weight:500; }
.jf-proton-initial-copy { display:block; margin-top:5px; line-height:1.5; }
@media(max-width:760px) { .jf-proton-grid { grid-template-columns:1fr; } .jf-proton-payments { border-left:0; border-top:1px solid rgba(20,22,26,.1); } }