/* ============ TOKENS ============ */
  :root{
    --bg-void: #0A0512;
    --bg-panel: #150B26;
    --bg-panel-2: #1C0F33;
    --line: rgba(178,131,255,0.14);
    --violet: #8B2FFF;
    --violet-2: #B266FF;
    --magenta: #FF3FA0;
    --cyan: #3FFFE0;
    --text: #F1EAFB;
    --text-dim: #9C8BB5;
    --text-faint: #6A5D85;
    --radius: 18px;
    --ease: cubic-bezier(.16,1,.3,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  body{
    background:var(--bg-void);
    color:var(--text);
    font-family:'Manrope', sans-serif;
    overflow-x:hidden;
    position:relative;
    min-height:100vh;
    user-select:none;
    -webkit-user-select:none;
  }
  input, textarea{ user-select:text; -webkit-user-select:text; }
  img{ -webkit-user-drag:none; user-drag:none; pointer-events:auto; }

  ::selection{ background:var(--violet); color:#fff; }

  h1,h2,h3, .display{
    font-family:'Anton', sans-serif;
    font-weight:400;
    letter-spacing:0.5px;
    text-transform:uppercase;
    line-height:1.05;
  }

  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; border:none;}

  /* ============ AMBIENT BACKGROUND ============ */
  .mesh{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 60% 45% at 15% 8%, rgba(139,47,255,0.35), transparent 60%),
      radial-gradient(ellipse 55% 40% at 85% 18%, rgba(255,63,160,0.22), transparent 60%),
      radial-gradient(ellipse 50% 45% at 50% 95%, rgba(63,255,224,0.10), transparent 60%);
    animation: drift 22s ease-in-out infinite alternate;
  }
  @keyframes drift{
    0%{ filter:hue-rotate(0deg); transform:scale(1) translateY(0);}
    100%{ filter:hue-rotate(18deg); transform:scale(1.06) translateY(-10px);}
  }
  .grain{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .scan-particles{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .p{
    position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
    background:var(--violet-2); box-shadow:0 0 8px 2px var(--violet-2);
    animation: rise linear infinite;
  }
  @keyframes rise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.9;}
    100%{ transform:translateY(-110vh) translateX(var(--drift,20px)); opacity:0; }
  }

  /* ============ NAV ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 6vw;
    backdrop-filter:blur(16px);
    background:rgba(10,5,18,0.55);
    border-bottom:1px solid var(--line);
    transition:padding .3s var(--ease);
  }
  .logo{
    font-family:'Anton', sans-serif; font-size:22px; letter-spacing:1px;
    display:flex; align-items:center; gap:10px;
  }
  .logo .dot{
    width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--cyan), var(--violet));
    box-shadow:0 0 14px 3px rgba(139,47,255,0.7);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.5);} }

  nav ul{ list-style:none; display:flex; gap:34px; }
  nav a{
    font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
    color:var(--text-dim); position:relative; padding-bottom:4px; transition:color .25s;
  }
  nav a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
    background:linear-gradient(90deg, var(--violet), var(--magenta)); transition:width .3s var(--ease);
  }
  nav a:hover{ color:var(--text); }
  nav a:hover::after{ width:100%; }

  .nav-cta{
    padding:10px 22px; border-radius:999px; font-size:13px; font-weight:800;
    letter-spacing:0.5px; text-transform:uppercase;
    background:linear-gradient(120deg, var(--violet), var(--magenta));
    box-shadow:0 4px 24px rgba(139,47,255,0.45);
    transition:transform .25s var(--ease), box-shadow .25s;
  }
  .nav-cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 8px 30px rgba(255,63,160,0.5); }

  .burger{ display:none; }

  /* ============ HERO ============ */
  .hero{
    position:relative; z-index:2;
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:140px 6vw 80px;
  }
  .eyebrow{
    font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--cyan);
    display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
    border:1px solid rgba(63,255,224,0.3); padding:8px 18px; border-radius:999px;
    background:rgba(63,255,224,0.05);
    opacity:0; animation: fadeUp .8s var(--ease) .1s forwards;
  }
  .eyebrow .n{ color:var(--violet-2); font-weight:800; }

  .hero h1{
    font-size:clamp(52px, 11vw, 148px);
    background:linear-gradient(100deg, #fff 10%, var(--violet-2) 45%, var(--magenta) 75%, var(--cyan) 100%);
    background-size:220% 220%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: fadeUp 1s var(--ease) .2s forwards, sheen 7s linear infinite 1.2s;
    opacity:0;
    text-shadow:0 0 80px rgba(139,47,255,0.25);
  }
  @keyframes sheen{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);} }

  .hero .sub{
    max-width:640px; margin:26px auto 0; color:var(--text-dim); font-size:17px; line-height:1.7;
    opacity:0; animation:fadeUp .8s var(--ease) .4s forwards;
  }
  .hero .sub b{ color:var(--text); }

  .hero-actions{
    margin-top:44px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
    opacity:0; animation:fadeUp .8s var(--ease) .55s forwards;
  }
  .btn-primary, .btn-ghost{
    padding:16px 32px; border-radius:999px; font-size:14px; font-weight:800;
    letter-spacing:0.5px; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .btn-primary{
    background:linear-gradient(120deg, var(--violet), var(--magenta));
    box-shadow:0 6px 28px rgba(139,47,255,0.45);
  }
  .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 36px rgba(255,63,160,0.5); }
  .btn-ghost{
    border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,0.02);
  }
  .btn-ghost:hover{ border-color:var(--violet-2); background:rgba(139,47,255,0.08); transform:translateY(-3px); }

  .stats-row{
    margin-top:80px; display:flex; gap:64px; flex-wrap:wrap; justify-content:center;
    opacity:0; animation:fadeUp .8s var(--ease) .7s forwards;
  }
  .stat{ text-align:center; }
  .stat .num{ font-family:'Anton'; font-size:40px; color:#fff; }
  .stat .lbl{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--text-faint); margin-top:4px; }

  .scroll-cue{
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    width:26px; height:42px; border:2px solid var(--text-faint); border-radius:14px;
    display:flex; justify-content:center; padding-top:8px;
  }
  .scroll-cue::before{
    content:''; width:4px; height:8px; border-radius:2px; background:var(--violet-2);
    animation:scrollDot 1.6s ease-in-out infinite;
  }
  @keyframes scrollDot{ 0%{opacity:1; transform:translateY(0);} 100%{opacity:0; transform:translateY(14px);} }

  /* ============ SECTION SHELL ============ */
  section{ position:relative; z-index:2; padding:120px 6vw; }
  .section-head{ max-width:720px; margin:0 auto 64px; text-align:center; }
  .section-head .tag{
    font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--violet-2); font-weight:700;
    margin-bottom:14px; display:block;
  }
  .section-head h2{ font-size:clamp(32px,5vw,54px); color:#fff; }
  .section-head p{ color:var(--text-dim); margin-top:16px; font-size:16px; line-height:1.7; }

  .reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ============ SERVICIOS ============ */
  .services-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:28px; max-width:1200px; margin:0 auto;
  }
  .service-card{
    background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px;
    position:relative; overflow:hidden; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  }
  .service-card::before{
    content:''; position:absolute; top:-40%; right:-30%; width:60%; height:60%; border-radius:50%;
    background:radial-gradient(circle, rgba(139,47,255,0.25), transparent 70%);
    opacity:0; transition:opacity .4s;
  }
  .service-card:hover{
    transform:translateY(-8px);
    border-color:rgba(178,131,255,0.45);
    box-shadow:0 24px 50px rgba(20,4,40,0.5);
  }
  .service-card:hover::before{ opacity:1; }
  .service-icon{
    width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:20px;
    background:linear-gradient(135deg, rgba(139,47,255,0.25), rgba(255,63,160,0.18));
    border:1px solid var(--line);
  }
  .service-card h3{ font-size:22px; color:#fff; margin-bottom:6px; }
  .service-card .kicker{ font-size:12px; letter-spacing:2px; color:var(--cyan); text-transform:uppercase; margin-bottom:14px; display:block; }
  .service-card .desc{ color:var(--text-dim); font-size:14.5px; line-height:1.65; margin-bottom:20px; }

  .price-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px; border-radius:12px; background:rgba(255,255,255,0.03);
    border:1px solid var(--line); margin-bottom:10px; font-size:14px;
  }
  .price-row .name{ color:var(--text); font-weight:600; }
  .price-row .price{ font-family:'Anton'; color:var(--violet-2); font-size:16px; white-space:nowrap; }
  .price-row .save{ color:var(--cyan); font-size:11px; margin-left:6px; }

  .how-to{
    margin-top:22px; padding-top:20px; border-top:1px dashed var(--line);
    font-size:13px; color:var(--text-faint); line-height:1.6;
  }
  .how-to b{ color:var(--violet-2); }

  .btn-buy{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:20px; padding:14px 20px; border-radius:999px;
    font-size:13px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase;
    color:#fff; background:linear-gradient(120deg, var(--violet), var(--magenta));
    background-size:200% 100%;
    box-shadow:0 8px 26px rgba(139,47,255,0.4);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-position .5s var(--ease);
    position:relative; overflow:hidden;
  }
  .btn-buy::before{
    content:'🛒'; font-size:14px;
  }
  .btn-buy:hover{
    transform:translateY(-3px); background-position:100% 0;
    box-shadow:0 14px 34px rgba(255,63,160,0.5);
  }

  .add-card-btn{
    border:1.5px dashed rgba(178,131,255,0.4); border-radius:var(--radius);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    min-height:260px; color:var(--text-dim); background:rgba(255,255,255,0.015);
    transition:all .3s var(--ease); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:13px;
  }
  .add-card-btn:hover{ border-color:var(--violet-2); color:#fff; background:rgba(139,47,255,0.08); transform:translateY(-6px); }
  .add-card-btn .plus{
    width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:24px; background:linear-gradient(120deg,var(--violet),var(--magenta)); color:#fff;
  }

  .custom-badge{
    position:absolute; top:16px; right:16px; font-size:10px; letter-spacing:1px; text-transform:uppercase;
    color:var(--cyan); border:1px solid rgba(63,255,224,0.35); padding:3px 10px; border-radius:999px;
  }

  /* ============ ADMIN DOCK FLOTANTE ============ */
  .admin-dock{
    position:fixed; right:26px; bottom:26px; z-index:200;
    display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  }
  .admin-fab{
    width:60px; height:60px; border-radius:50%; position:relative;
    background:linear-gradient(135deg, var(--violet), var(--magenta));
    display:flex; align-items:center; justify-content:center; font-size:24px;
    box-shadow:0 10px 34px rgba(139,47,255,0.55);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .admin-fab:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 16px 40px rgba(255,63,160,0.55); }
  .admin-fab.unlocked{ background:linear-gradient(135deg, var(--cyan), var(--violet-2)); }
  .fab-ring{
    position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(178,131,255,0.5);
    animation:ringPulse 2.6s ease-in-out infinite;
  }
  @keyframes ringPulse{
    0%,100%{ transform:scale(1); opacity:0.7; }
    50%{ transform:scale(1.15); opacity:0; }
  }
  .fab-icon{ position:relative; z-index:1; transition:transform .3s var(--ease); }
  .admin-fab.unlocked .fab-icon{ transform:rotate(-25deg); }

  .admin-dock-items{
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  }
  .dock-item{
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid rgba(178,131,255,0.35); color:var(--text);
    padding:12px 20px 12px 14px; border-radius:999px; font-size:13.5px; font-weight:700;
    box-shadow:0 12px 30px rgba(10,4,20,0.5);
    opacity:0; transform:translateY(14px) scale(0.9); pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .25s, background .25s;
  }
  .admin-dock.open .dock-item{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .admin-dock.open .dock-item:nth-child(1){ transition-delay:.05s; }
  .admin-dock.open .dock-item:nth-child(2){ transition-delay:.12s; }
  .admin-dock.open .dock-item:nth-child(3){ transition-delay:.19s; }
  .admin-dock.open .dock-item:nth-child(4){ transition-delay:.26s; }
  .dock-item:hover{ border-color:var(--violet-2); background:linear-gradient(160deg, #22123c, #2a1548); transform:translateY(-3px) !important; }
  .dock-ico{
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px;
    background:rgba(139,47,255,0.18); flex-shrink:0;
  }
  .dock-item.dock-lock{ border-color:rgba(255,63,160,0.3); color:var(--text-dim); }
  .dock-item.dock-lock .dock-ico{ background:rgba(255,63,160,0.15); }

  @media (max-width:600px){
    .admin-dock{ right:16px; bottom:16px; }
    .dock-item span:last-child{ display:none; }
    .dock-item{ padding:12px; }
    .dock-ico{ width:22px; height:22px; }
  }

  /* ============ RESEÑAS ============ */
  .reviews-wrap{ max-width:1200px; margin:0 auto; }
  .reviews-top{ display:flex; justify-content:center; margin-bottom:48px; }
  .reviews-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px;
  }
  .review-card{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; transition:transform .35s var(--ease), border-color .35s;
    animation:fadeUp .6s var(--ease) both;
  }
  .review-card:hover{ transform:translateY(-6px); border-color:rgba(178,131,255,0.4); }
  .review-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .avatar{
    width:48px; height:48px; border-radius:50%; object-fit:cover;
    border:2px solid var(--violet-2); flex-shrink:0;
    background:linear-gradient(135deg, var(--violet), var(--magenta));
    display:flex; align-items:center; justify-content:center; font-family:'Anton'; color:#fff; font-size:18px;
  }
  .review-name{ font-weight:800; color:#fff; font-size:15px; }
  .review-stars{ color:var(--cyan); font-size:12px; letter-spacing:2px; }
  .review-text{ color:var(--text-dim); font-size:14.5px; line-height:1.65; }
  .review-date{ margin-top:14px; font-size:11px; color:var(--text-faint); letter-spacing:1px; text-transform:uppercase; }
  .empty-state{
    text-align:center; padding:60px 20px; color:var(--text-faint); grid-column:1/-1;
    border:1px dashed var(--line); border-radius:var(--radius);
  }

  /* ============ PARTNERS ============ */
  .partners-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:22px; max-width:1100px; margin:0 auto;
  }
  .partner-card{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 20px; text-align:center; transition:transform .35s var(--ease), border-color .35s;
  }
  .partner-card:hover{ transform:translateY(-6px) scale(1.02); border-color:rgba(178,131,255,0.4); }
  .partner-logo{
    width:64px; height:64px; border-radius:16px; margin:0 auto 16px; object-fit:cover;
    border:1px solid var(--line); background:linear-gradient(135deg, rgba(139,47,255,0.25), rgba(255,63,160,0.18));
    display:flex; align-items:center; justify-content:center; font-family:'Anton'; font-size:22px; color:#fff;
  }
  .partner-card h4{ color:#fff; font-size:16px; margin-bottom:6px; }
  .partner-card p{ color:var(--text-faint); font-size:13px; line-height:1.5; }
  .partner-link{ display:inline-block; margin-top:14px; font-size:12px; color:var(--violet-2); font-weight:700; letter-spacing:1px; text-transform:uppercase; }

  /* ============ FOOTER / TICKET CTA ============ */
  .cta-band{
    max-width:1100px; margin:0 auto; text-align:center; padding:70px 40px; border-radius:28px;
    background:linear-gradient(135deg, rgba(139,47,255,0.18), rgba(255,63,160,0.12));
    border:1px solid var(--line); position:relative; overflow:hidden;
  }
  .cta-band::before{
    content:''; position:absolute; inset:-2px; border-radius:28px; padding:2px;
    background:linear-gradient(120deg, var(--violet), var(--magenta), var(--cyan), var(--violet));
    background-size:300% 300%; animation:sheen 6s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  }
  .cta-band h2{ font-size:clamp(28px,4.5vw,46px); color:#fff; margin-bottom:16px; }
  .cta-band p{ color:var(--text-dim); max-width:520px; margin:0 auto 34px; }

  footer{
    position:relative; z-index:2; padding:50px 6vw 30px; text-align:center;
    border-top:1px solid var(--line); color:var(--text-faint); font-size:13px;
  }
  footer .flogo{ font-family:'Anton'; font-size:20px; color:#fff; letter-spacing:1px; margin-bottom:10px; }

  /* ============ MODALS ============ */
  .modal-overlay{
    position:fixed; inset:0; z-index:1000; background:rgba(6,3,12,0.75); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal{
    width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
    background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--line); border-radius:22px; padding:34px;
    transform:translateY(24px) scale(0.97); transition:transform .35s var(--ease);
  }
  .modal-overlay.open .modal{ transform:translateY(0) scale(1); }
  .modal h3{ color:#fff; font-size:22px; margin-bottom:22px; }
  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; font-weight:700;}
  .field input, .field textarea, .field select{
    width:100%; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,0.04);
    border:1px solid var(--line); color:var(--text); font-family:inherit; font-size:14px; transition:border-color .25s;
  }
  .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--violet-2); }
  .field textarea{ resize:vertical; min-height:80px; }
  .star-pick{ display:flex; gap:8px; font-size:26px; }
  .star-pick span{ cursor:pointer; color:var(--text-faint); transition:color .2s, transform .2s;}
  .star-pick span.active{ color:var(--cyan); transform:scale(1.15); }
  .modal-actions{ display:flex; gap:12px; margin-top:24px; }
  .modal-actions button{ flex:1; padding:13px; border-radius:999px; font-weight:800; font-size:13px; letter-spacing:0.5px; text-transform:uppercase; }
  .btn-cancel{ background:rgba(255,255,255,0.05); color:var(--text-dim); border:1px solid var(--line); }
  .btn-cancel:hover{ background:rgba(255,255,255,0.09); }
  .btn-submit{ background:linear-gradient(120deg, var(--violet), var(--magenta)); color:#fff; }
  .btn-submit:hover{ transform:translateY(-2px); }
  .modal-close{ position:absolute; top:18px; right:18px; background:none; color:var(--text-faint); font-size:20px; }
  .field-hint{ font-size:11.5px; color:var(--text-faint); margin-top:6px; }

  .toast{
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(120%);
    background:linear-gradient(120deg, var(--violet), var(--magenta)); color:#fff; font-weight:700; font-size:14px;
    padding:14px 26px; border-radius:999px; z-index:1100; box-shadow:0 12px 30px rgba(139,47,255,0.5);
    transition:transform .4s var(--ease);
  }
  .toast.show{ transform:translateX(-50%) translateY(0); }

  /* ============ PRELOADER ============ */
  #preloader{
    position:fixed; inset:0; z-index:9999; background:var(--bg-void);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
    transition:opacity .6s var(--ease), visibility .6s var(--ease);
  }
  #preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .pre-logo{
    font-family:'Anton'; font-size:clamp(28px,6vw,44px); letter-spacing:2px; color:#fff;
    position:relative; overflow:hidden;
  }
  .pre-logo::after{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: preSweep 1.4s ease-in-out infinite;
  }
  @keyframes preSweep{ to{ left:140%; } }
  .pre-bar{ width:200px; height:3px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
  .pre-bar::after{
    content:''; display:block; height:100%; width:40%; border-radius:3px;
    background:linear-gradient(90deg, var(--violet), var(--magenta), var(--cyan));
    animation: preLoad 1.1s ease-in-out infinite;
  }
  @keyframes preLoad{
    0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); }
  }

  /* ============ CURSOR GLOW ============ */
  .cursor-glow{
    position:fixed; top:0; left:0; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(139,47,255,0.16), transparent 70%);
    pointer-events:none; z-index:3; transform:translate(-50%,-50%);
    transition:opacity .4s; opacity:0; will-change:transform;
  }
  .cursor-glow.active{ opacity:1; }
  @media (hover:none), (max-width:860px){ .cursor-glow{ display:none; } }

  /* ============ SCROLL PROGRESS ============ */
  .progress-bar{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
    background:linear-gradient(90deg, var(--violet), var(--magenta), var(--cyan));
    box-shadow:0 0 12px rgba(139,47,255,0.7);
    transition:width .1s linear;
  }

  /* ============ TILT CARDS ============ */
  .tilt{ transform-style:preserve-3d; will-change:transform; }

  /* ============ BORDE ANIMADO EN HOVER (cards) ============ */
  .service-card, .review-card, .partner-card, .work-card{ position:relative; }
  .service-card::after, .partner-card::after, .work-card::after{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
    background:conic-gradient(from var(--ang,0deg), var(--violet), var(--magenta), var(--cyan), var(--violet));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .4s; pointer-events:none;
    animation:spinBorder 4s linear infinite; animation-play-state:paused;
  }
  .service-card:hover::after, .partner-card:hover::after, .work-card:hover::after{ opacity:1; animation-play-state:running; }
  @keyframes spinBorder{ to{ --ang:360deg; } }
  @property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

  /* ============ RIPPLE ============ */
  .ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,0.5);
    transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none;
  }
  @keyframes rippleAnim{ to{ transform:scale(3.2); opacity:0; } }
  .btn-primary, .btn-ghost, .nav-cta, .dock-item, .admin-fab{ position:relative; overflow:hidden; }

  /* ============ CONTADORES ============ */
  .stat .num{ font-variant-numeric:tabular-nums; }

  /* ============ MARQUEE DE CONFIANZA ============ */
  .trust-marquee{
    width:100%; overflow:hidden; padding:18px 0; margin-top:70px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .trust-track{
    display:flex; gap:52px; white-space:nowrap; width:max-content;
    animation:marquee 22s linear infinite;
    font-family:'Anton'; font-size:15px; letter-spacing:2px; text-transform:uppercase; color:var(--text-faint);
  }
  .trust-track span{ display:flex; align-items:center; gap:12px; }
  .trust-track span::before{ content:'✦'; color:var(--violet-2); }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ============ TRABAJOS ============ */
  .works-grid{
    column-count:3; column-gap:26px; max-width:1200px; margin:0 auto;
  }
  .work-card{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
    display:inline-block; width:100%; break-inside:avoid; margin-bottom:26px;
  }
  .work-card:hover{ transform:translateY(-8px); border-color:rgba(178,131,255,0.4); box-shadow:0 24px 50px rgba(20,4,40,0.5); }
  .work-photo{
    width:100%; height:auto; display:block;
    background:linear-gradient(135deg, rgba(139,47,255,0.2), rgba(255,63,160,0.15));
  }
  .work-photo-fallback{
    width:100%; height:220px; display:flex; align-items:center; justify-content:center; font-size:34px;
    background:linear-gradient(135deg, rgba(139,47,255,0.2), rgba(255,63,160,0.15));
  }
  .work-body{ padding:22px 24px; }
  .work-body h4{ color:#fff; font-size:17px; margin-bottom:8px; font-family:'Anton'; letter-spacing:0.5px; text-transform:uppercase; }
  .work-body p{ color:var(--text-dim); font-size:14px; line-height:1.6; }
  .work-date{ margin-top:14px; font-size:11px; color:var(--text-faint); letter-spacing:1px; text-transform:uppercase; }

  @media (max-width:960px){
    .works-grid{ column-count:2; }
  }
  @media (max-width:620px){
    .works-grid{ column-count:1; }
  }

  @media (max-width:860px){
    nav ul{ display:none; }
    .nav-cta{ display:none; }
    .burger{ display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,0.03); flex-direction:column; gap:5px;}
    .burger span{ width:18px; height:2px; background:#fff; display:block; }
    .stats-row{ gap:32px; }
    section{ padding:80px 6vw; }
  }
  .mobile-menu{
    position:fixed; top:70px; left:6vw; right:6vw; z-index:99;
    background:var(--bg-panel); border:1px solid var(--line); border-radius:18px; padding:20px;
    display:flex; flex-direction:column; gap:6px;
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:all .3s var(--ease);
  }
  .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-menu a{ padding:12px 8px; font-weight:700; font-size:14px; border-bottom:1px solid var(--line); color:var(--text-dim); }
  .mobile-menu a:last-child{ border-bottom:none; }