/* ============================================================
   ipark-base.css — Lenguaje visual compartido de la web iPark
   FUENTE: Home aprobado (index.html). Es la BASE compartida:
   Crystal Header flotante + atmósfera nocturna + movimiento.
   Toda página de la web debe partir de aquí.
   ============================================================ */
  :root {
    --ip-bg-0:#031927;
    --ip-bg-1:#04202f;
    --ip-bg-2:#062538;
    --ip-bg-3:#0a2e43;
    --ip-accent:#ea1744;
    --ip-accent-hover:#ff5577;
    --ip-success:#34d399;
    --ip-intelligence:#bfea5a;
    --ip-text-strong:#fff;
    --ip-text-primary:rgba(255,255,255,.82);
    --ip-text-secondary:rgba(255,255,255,.62);
    --ip-text-muted:rgba(255,255,255,.42);
    --ip-border-soft:rgba(255,255,255,.06);
    --ip-border:rgba(255,255,255,.09);
    --ip-border-strong:rgba(255,255,255,.14);
    --ip-surface-glass:rgba(8,20,32,.90);
    --ip-surface-glass-strong:rgba(8,20,32,.96);
    --ip-font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
    --ip-font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
    --ip-radius-sm:10px;
    --ip-radius-md:16px;
    --ip-radius-lg:22px;
    --ip-radius-pill:999px;
    --ip-shadow-card:0 18px 50px rgba(0,0,0,.28);
    --ip-shadow-accent:0 10px 30px rgba(234,23,68,.28);
    --ip-blur:blur(22px) saturate(160%);
    --ip-space-1:4px;
    --ip-space-2:8px;
    --ip-space-3:12px;
    --ip-space-4:16px;
    --ip-space-5:24px;
    --ip-space-6:32px;
    --ip-space-7:48px;
    --ip-space-8:72px;
    --ip-motion-fast:160ms ease;
    --ip-motion-base:280ms cubic-bezier(.2,.8,.2,1);
    --ip-motion-slow:520ms cubic-bezier(.2,.8,.2,1);
  }

  /* ── JOURNEY HOME — cinematic styles ── */
  /* overflow-x:clip (not hidden) preserves position:sticky on ipStage */
  html, body { margin:0; padding:0; background:#031927; color:#fff; font-family:'Poppins',sans-serif; overflow-x:clip; }
  a { color:#ea1744; text-decoration:none; }
  a:hover { color:#ff5577; }
  .sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

  /* ── iPark Crystal Header ── */
  .hdr {
    position:fixed !important; top:16px !important; left:50% !important;
    transform:translateX(-50%) !important;
    width:calc(100% - 48px) !important; max-width:1240px !important;
    border-radius:9999px !important; z-index:1000 !important;
    transition:background 400ms ease, backdrop-filter 400ms ease,
               border-color 400ms ease, box-shadow 400ms ease,
               top 400ms ease !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid transparent !important;
    box-shadow:none !important;
  }
  .hdr .nav {
    border-radius:9999px;
    padding:8px 10px 8px 18px !important;
    transition:box-shadow 250ms ease;
  }
  .hdr.ip-c1 {
    background:rgba(8,18,28,.18) !important;
    backdrop-filter:blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(180%) !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:0 2px 24px rgba(0,0,0,.18),
               inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  .hdr.ip-c2 {
    background:rgba(4,18,30,.52) !important;
    backdrop-filter:blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(160%) !important;
    border-color:rgba(255,255,255,.11) !important;
    box-shadow:0 4px 32px rgba(0,0,0,.28),
               inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  .hdr.ip-car-glow .nav {
    box-shadow:inset 0 -1px 14px rgba(234,23,68,.14),
               0 0 20px rgba(234,23,68,.08) !important;
  }
  .hdr .nav-ghost {
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.2) !important;
    color:#fff !important;
    box-shadow:none !important;
  }
  .hdr .nav-ghost:hover {
    background:rgba(255,255,255,.16) !important;
    border-color:rgba(255,255,255,.35) !important;
    color:#fff !important;
    transform:translateY(-1px) !important;
  }
  .hdr .nav-lang, .hdr .nav-lang .chev { color:rgba(255,255,255,.72) !important; }
  .hdr a.logo { color:#fff !important; padding-right:18px !important; border-right:1px solid rgba(255,255,255,.12) !important; margin-right:6px !important; }
  .hdr .logo-text { color:#fff !important; font-size:20px !important; letter-spacing:-.03em !important; }
  .hdr .logo-sub { color:rgba(255,255,255,.38) !important; }
  .hdr .logo-mark-img { width:36px !important; height:36px !important; }
  .hdr.ip-c1 .nav-pill, .hdr.ip-c2 .nav-pill { background:transparent !important; box-shadow:none !important; }
  .hdr .nav-pill a { color:rgba(255,255,255,.72) !important; }
  .hdr .nav-pill a:hover, .hdr .nav-pill a:focus-visible { color:#ea1744 !important; background:rgba(234,23,68,.08) !important; }
  .hdr .nav-burger { background:rgba(8,20,32,.76); border-color:var(--ip-border-strong); }
  .hdr .nav-burger span { background:#fff; }
  .nav-drawer { background:var(--ip-surface-glass-strong); color:#fff; border-left:1px solid var(--ip-border); }
  .nav-drawer-head { border-bottom-color:var(--ip-border); }
  .nav-drawer-head strong { color:#fff; }
  .nav-drawer-close { background:rgba(255,255,255,.06); border-color:var(--ip-border); color:#fff; }
  .nav-drawer nav a { color:var(--ip-text-primary); }
  .nav-drawer nav a:hover { color:#fff; background:rgba(234,23,68,.1); }
  .nav-drawer-cta { border-top-color:var(--ip-border); }
  .nav-drawer-cta .ghost { background:rgba(255,255,255,.05); border-color:var(--ip-border-strong); color:#fff; }

  /* ── Shared dark-theme primitives ── */
  .ip-shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
  .ip-section { padding:clamp(72px,10vw,128px) 0; background:var(--ip-bg-0); }
  .ip-section--raised { background:linear-gradient(180deg,var(--ip-bg-1),var(--ip-bg-0)); }
  .ip-eyebrow { color:var(--ip-accent); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
  .ip-title { color:var(--ip-text-strong); font-size:clamp(34px,5vw,68px); line-height:1.04; letter-spacing:-.035em; }
  .ip-lead { color:var(--ip-text-secondary); font-size:clamp(16px,2vw,20px); line-height:1.7; }
  .ip-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .ip-card { padding:26px; color:var(--ip-text-primary); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); border:1px solid var(--ip-border); border-radius:var(--ip-radius-lg); box-shadow:var(--ip-shadow-card); }
  .ip-card h2,.ip-card h3 { color:var(--ip-text-strong); }
  .ip-card p { color:var(--ip-text-secondary); }
  .ip-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid var(--ip-border-strong); border-radius:var(--ip-radius-pill); color:var(--ip-text-primary); background:rgba(255,255,255,.04); font-size:12px; font-weight:700; }
  .ip-pill--success::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ip-success); box-shadow:0 0 10px var(--ip-success); }
  .ip-metric { font-family:var(--ip-font-mono); color:var(--ip-intelligence); }
  .ip-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border:1px solid transparent; border-radius:var(--ip-radius-pill); font:700 14px/1 var(--ip-font-sans); transition:transform var(--ip-motion-base),background var(--ip-motion-base),box-shadow var(--ip-motion-base); }
  .ip-button--primary { color:#fff; background:var(--ip-accent); box-shadow:var(--ip-shadow-accent); }
  .ip-button--primary:hover { color:#fff; background:var(--ip-accent-hover); transform:translateY(-2px); }
  .ip-button--ghost { color:#fff; border-color:var(--ip-border-strong); background:rgba(255,255,255,.04); }
  .ip-button--ghost:hover { color:#fff; background:rgba(255,255,255,.09); }

  .ft { background:var(--ip-bg-0); border-top:1px solid var(--ip-border-soft); }

  /* ── Modal compartido (.modal-card) tematizado al universo oscuro ── */
  /* El overlay .modal ya es scrim oscuro en shared.css; aquí oscurecemos la tarjeta */
  .modal-card { background:var(--ip-surface-glass-strong) !important; border:1px solid var(--ip-border); box-shadow:0 32px 80px rgba(0,0,0,.55); backdrop-filter:var(--ip-blur); -webkit-backdrop-filter:var(--ip-blur); }
  .modal-card h3 { color:var(--ip-text-strong); }
  .modal-card .sub, .modal-card .legal, .modal-contact-note { color:var(--ip-text-secondary); }
  .modal-card .close { background:rgba(255,255,255,.06); color:#fff; }
  .modal-card .close:hover { background:rgba(234,23,68,.16); color:#fff; }
  .modal-card .field label { color:var(--ip-text-muted); }
  .modal-card .field input, .modal-card .field select, .modal-card .field textarea { background:rgba(255,255,255,.05) !important; border:1px solid var(--ip-border-strong) !important; color:#fff !important; }
  .modal-card .field input:focus, .modal-card .field select:focus, .modal-card .field textarea:focus { border-color:var(--ip-accent) !important; }
  .modal-contact-btns .cta-email-btn { background:rgba(255,255,255,.05) !important; color:#fff !important; border:1px solid var(--ip-border-strong) !important; }
  .modal-contact-btns .cta-email-btn:hover { background:rgba(234,23,68,.14) !important; color:#fff !important; border-color:rgba(234,23,68,.4) !important; }

  @keyframes ipfloat  { 0%,100%{ transform:translate(-50%,calc(-50% - 5px)); } 50%{ transform:translate(-50%,calc(-50% + 5px)); } }
  @keyframes ipfloatH { 0%,100%{ transform:translateY(-5px); } 50%{ transform:translateY(5px); } }
  @keyframes ipwheel  { 0%{ transform:translateY(0); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(9px); opacity:0; } }
  @keyframes ipscan   { 0%{ top:8%; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:88%; opacity:0; } }
  @keyframes ippulse  { 0%,100%{ box-shadow:0 0 0 0 rgba(234,23,68,.5); } 50%{ box-shadow:0 0 0 10px rgba(234,23,68,0); } }
  @keyframes iprise   { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes ipstreak { 0%{ transform:translateY(-46px) scaleY(.6); opacity:0; } 22%{ opacity:.55; } 100%{ transform:translateY(150px) scaleY(1.3); opacity:0; } }
  @keyframes ipfeed   { 0%{ opacity:0; transform:translateY(12px) scale(.96); } 12%{ opacity:1; transform:translateY(0) scale(1); } 82%{ opacity:1; transform:translateY(0) scale(1); } 100%{ opacity:0; transform:translateY(-10px) scale(.98); } }
  @keyframes ipconn   { 0%{ transform:translateY(-40px) scaleY(.7); opacity:0; } 20%{ opacity:.7; } 100%{ transform:translateY(180px) scaleY(1.3); opacity:0; } }
  @keyframes ipplate  { 0%,100%{ opacity:.35; transform:translateX(-50%) scale(.9); } 50%{ opacity:.9; transform:translateX(-50%) scale(1.08); } }
  @keyframes iphalo   { 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.96); } 50%{ opacity:.85; transform:translate(-50%,-50%) scale(1.04); } }
  @keyframes iplights { 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
  .ip-chip-in { animation:iprise .5s ease both; }
  #ipCanvas   { will-change:transform; }
  #ipCar { max-width:none; }
  #ipStage, #ipTrail, #ipProgress, #ipCenter { transition:none !important; }
  #ipStage, #ipCenter, #ipHeroCar, #ipTrail, #ipProgress, #ipStreaks { will-change:transform,opacity; }

  h1, h2, h3, h4, h5 { color: #fff; }
  p { color: rgba(255,255,255,.6); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }
  @media (max-width:820px) {
    .ip-shell { width:min(100% - 32px,1180px); }
    .ip-grid { grid-template-columns:1fr; }
  }