:root{
    --bg:#08080a;
    --bg-1:#0d0d10;
    --bg-2:#131318;
    --bg-card:#111116;
    --ink:#f4f2ec;
    --ink-dim:#b9b6ac;
    --muted:#7c7a74;
    --gold:#f6c445;
    --gold-2:#ffe28a;
    --gold-dark:#c9931a;
    --gold-soft:rgba(246,196,69,0.12);
    --ember:#ff6a3d;
    --ember-soft:rgba(255,106,61,0.14);
    --line:rgba(246,196,69,0.16);
    --line-soft:rgba(255,255,255,0.08);
    --whatsapp:#1fa855;
    --whatsapp-dark:#188a45;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--gold); color:#0a0a0a;}
  .font-display{font-family:'Fraunces',serif; font-optical-sizing:auto;}
  .font-mono{font-family:'JetBrains Mono',monospace;}

  .text-gold{color:var(--gold);}
  .grad-text{
    background:linear-gradient(100deg, var(--gold-2) 0%, var(--gold) 35%, #fff 60%, var(--gold) 85%, var(--gold-2) 100%);
    background-size:300% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shimmer 9s linear infinite;
  }
  @keyframes shimmer{ to{ background-position:300% center; } }

  /* ---------- Blueprint / grid texture ---------- */
  .grid-tex{
    background-image:
      linear-gradient(rgba(246,196,69,0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(246,196,69,0.09) 1px, transparent 1px);
    background-size:44px 44px;
  }
  .noise::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- Scanline sweep ---------- */
  .scan{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
  .scan::before{
    content:""; position:absolute; left:0; right:0; height:140px; top:-140px;
    background:linear-gradient(180deg, transparent, rgba(246,196,69,0.10), transparent);
    animation:scan-move 7s ease-in-out infinite;
  }
  @keyframes scan-move{ 0%{ top:-140px; } 55%{ top:100%; } 100%{ top:100%; } }

  /* ---------- Corner brackets ---------- */
  .brackets{position:relative;}
  .brackets .bk-tr, .brackets .bk-bl{
    content:""; position:absolute; width:18px; height:18px; border-color:var(--gold);
    opacity:0; transition:opacity .35s ease, transform .35s ease;
  }
  .brackets .bk-tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid;transform:translate(-4px,4px);}
  .brackets .bk-bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid;transform:translate(4px,-4px);}
  .brackets:hover .bk-tr, .brackets:hover .bk-bl{opacity:1;transform:translate(0,0);}

  /* ---------- Nav ---------- */
  #navbar{transition:background-color .4s ease, backdrop-filter .4s ease, box-shadow .4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;}
  #navbar.scrolled{
    background-color:rgba(8,8,10,0.86);
    backdrop-filter:blur(16px);
    border-color:var(--line-soft);
  }

  /* ---------- Reveal animations ---------- */
  .reveal{opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-delay-1.in{transition-delay:.08s;}
  .reveal-delay-2.in{transition-delay:.16s;}
  .reveal-delay-3.in{transition-delay:.24s;}
  .reveal-delay-4.in{transition-delay:.32s;}
  .reveal-scale{opacity:0; transform:scale(.92); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);}
  .reveal-scale.in{opacity:1; transform:scale(1);}
  
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-scale{opacity:1 !important; transform:none !important; transition:none !important;}
    .grad-text{animation:none;}
    .scan::before{animation:none;}
  }

  /* ---------- Dimension divider ---------- */
  .dim-divider{display:flex;align-items:center;gap:10px;color:var(--muted);}
  .dim-divider .line{flex:1;height:1px;background:repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 10px);}
  .dim-divider .tick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;}

  /* ---------- Buttons ---------- */
  .btn-wa{
    background:var(--whatsapp); color:#fff; position:relative; overflow:hidden;
    transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
    box-shadow:0 8px 26px -8px rgba(31,168,85,0.6);
  }
  .btn-wa:hover{background:var(--whatsapp-dark); transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(31,168,85,0.7);}
  .btn-gold{
    background:linear-gradient(100deg, var(--gold), var(--gold-2)); color:#0a0a0a; position:relative; overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:0 8px 26px -8px rgba(246,196,69,0.5);
  }
  .btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(246,196,69,0.6);}
  .btn-outline{
    border:1.5px solid rgba(255,255,255,0.22); color:#fff;
    transition:border-color .25s ease, background-color .25s ease, transform .25s ease;
  }
  .btn-outline:hover{background:rgba(255,255,255,0.06); border-color:var(--gold); transform:translateY(-2px);}
  .shine{position:relative; overflow:hidden;}
  .shine::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-20deg); transition:left .7s ease;
  }
  .shine:hover::after{left:130%;}

  /* Floating WhatsApp */
  #wa-float{ box-shadow:0 10px 32px -6px rgba(31,168,85,0.6); animation:wa-pulse 2.6s ease-in-out infinite; }
  @keyframes wa-pulse{
    0%,100%{box-shadow:0 10px 32px -6px rgba(31,168,85,0.6);}
    50%{box-shadow:0 10px 44px -2px rgba(31,168,85,0.85);}
  }

  /* Card hover lift */
  .card-lift{transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;}
  .card-lift:hover{transform:translateY(-7px); box-shadow:0 28px 55px -18px rgba(0,0,0,0.6); border-color:rgba(246,196,69,0.45);}

  .card-num{
    position:absolute; top:6px; right:16px; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:74px; line-height:1; color:rgba(255,255,255,0.035); pointer-events:none;
  }

  /* Hero parallax bg */
  #hero-bg{transition:transform .1s linear;}

  /* Glass */
  .glass{background:rgba(255,255,255,0.05); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.10);}

  /* mobile menu */
  #mobile-menu{transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;}
  #mobile-menu.open{transform:translateY(0); opacity:1; pointer-events:auto;}

  .num-tag{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em;}

  .gallery-img{transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;}
  .gallery-item:hover .gallery-img{transform:scale(1.07);}
  .gallery-caption{transition:opacity .4s ease, transform .4s ease;}

  /* ---------- Marquee ---------- */
  .marquee-track{display:flex; width:max-content; animation:marquee 32s linear infinite;}
  .marquee-track:hover{animation-play-state:paused;}
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* spotlight cursor glow in hero */
  #spotlight{
    position:absolute; width:640px; height:640px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(246,196,69,0.10), transparent 70%);
    transform:translate(-50%,-50%); left:50%; top:35%; transition:opacity .3s ease; will-change:left, top;
  }

  .tag-pill{
    transition:border-color .25s ease, color .25s ease, background-color .25s ease;
  }
  .tag-pill:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); }

  /* ---------- Bento service cards ---------- */
  .svc-card{
    position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line-soft);
    transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease;
  }
  .svc-card.gold-wash{background:radial-gradient(140% 140% at 100% 0%, var(--gold-soft), var(--bg-card) 60%);}
  .svc-card.ember-wash{background:radial-gradient(140% 140% at 100% 0%, var(--ember-soft), var(--bg-card) 60%);}
  .svc-card::before{content:""; position:absolute; top:0; left:28px; right:28px; height:2px; opacity:.85;}
  .svc-card.gold-wash::before{background:linear-gradient(90deg, transparent, var(--gold), transparent);}
  .svc-card.ember-wash::before{background:linear-gradient(90deg, transparent, var(--ember), transparent);}
  .svc-card:nth-child(odd){transform:rotate(-0.4deg);}
  .svc-card:nth-child(even){transform:rotate(0.4deg);}
  .svc-card:hover{transform:rotate(0deg) translateY(-9px); box-shadow:0 32px 60px -20px rgba(0,0,0,0.65);}
  .svc-card.gold-wash:hover{border-color:rgba(246,196,69,0.45);}
  .svc-card.ember-wash:hover{border-color:rgba(255,106,61,0.45);}
  .svc-icon{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid; transition:transform .5s cubic-bezier(.16,1,.3,1);
  }
  .svc-card:hover .svc-icon{transform:rotate(14deg) scale(1.08);}
  @media (prefers-reduced-motion: reduce){
    .svc-card, .svc-card:nth-child(odd), .svc-card:nth-child(even){transform:none !important;}
  }

  /* ================================================================
     UPGRADE PACK — cursor, preloader, progreso, tilt 3D, magnetismo,
     glow dinámico, texto cinético, partículas, scrollspy
     ================================================================ */

  /* ---------- Scrollbar a tono ---------- */
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-dark), var(--gold)); border-radius:10px; border:2px solid var(--bg);}
  html{scrollbar-color: var(--gold-dark) var(--bg); scrollbar-width:thin;}

  /* ---------- Barra de progreso de scroll ---------- */
  #progress-bar{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:70;
    background:linear-gradient(90deg, var(--ember), var(--gold), var(--gold-2));
    box-shadow:0 0 14px rgba(246,196,69,0.7);
    transition:width .08s linear;
  }

  /* ---------- Preloader ---------- */
  #preloader{
    position:fixed; inset:0; z-index:100; background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    transition:opacity .7s cubic-bezier(.16,1,.3,1), visibility .7s;
  }
  #preloader.done{opacity:0; visibility:hidden; pointer-events:none;}
  #preloader .pl-mark{
    width:180px; max-width:55vw; opacity:0; transform:scale(.94);
    animation:pl-logo-in 1s cubic-bezier(.16,1,.3,1) forwards .1s;
    filter:drop-shadow(0 0 22px rgba(246,196,69,0.25));
  }
  @keyframes pl-logo-in{ to{ opacity:1; transform:scale(1); } }
  #preloader .pl-bar{width:200px; height:2px; background:rgba(255,255,255,0.1); position:relative; overflow:hidden; border-radius:2px;}
  #preloader .pl-bar::after{
    content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--gold), var(--gold-2));
    transform:translateX(-100%); animation:pl-bar 1.7s cubic-bezier(.65,0,.35,1) forwards .1s;
  }
  @keyframes pl-bar{ to{ transform:translateX(0%); } }
  #preloader .pl-tag{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.3em; color:var(--muted); text-transform:uppercase; opacity:0; animation:pl-tag-in .6s ease forwards 1.6s;}
  @keyframes pl-tag-in{ to{opacity:1;} }
  body.loading{overflow:hidden; height:100vh;}

  /* ---------- Texto cinético (headings) ---------- */
  .kinetic-word{display:inline-block; overflow:hidden; vertical-align:top;}
  .kinetic-word span{
    display:inline-block; transform:translateY(115%) rotate(4deg); opacity:0;
    transition:transform .95s cubic-bezier(.16,1,.3,1), opacity .8s ease;
  }
  .kinetic-word.in span{transform:translateY(0) rotate(0); opacity:1;}

  /* ---------- Reveal mejorado: blur + profundidad ---------- */
  .reveal{
    opacity:0; transform:translateY(34px) scale(.985); filter:blur(6px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1);
  }
  .reveal.in{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}
  .reveal-scale{
    opacity:0; transform:scale(.9) rotate(-1deg); filter:blur(8px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1);
  }
  .reveal-scale.in{opacity:1; transform:scale(1) rotate(0); filter:blur(0);}

  /* ---------- Tilt 3D para tarjetas de servicio ---------- */
  .svc-card{
    --mx:50%; --my:50%;
    transform-style:preserve-3d; perspective:900px;
  }
  .svc-card::after{
    content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
    background:radial-gradient(360px circle at var(--mx) var(--my), rgba(246,196,69,0.16), transparent 55%);
    transition:opacity .4s ease;
  }
  .svc-card:hover::after{opacity:1;}
  .svc-card .svc-inner{transform-style:preserve-3d; transition:transform .15s ease-out;}

  /* ---------- Tilt para galería / equipo ---------- */
  .gallery-item{transform-style:preserve-3d; perspective:800px;}
  .gallery-item .tilt-inner{transition:transform .15s ease-out;}

  /* ---------- Botones magnéticos ---------- */
  .magnetic{will-change:transform;}

  /* ---------- Subrayado deslizante del nav ---------- */
  #nav-links{position:relative;}
  #nav-indicator{
    position:absolute; bottom:-6px; height:2px; background:linear-gradient(90deg, var(--gold), var(--gold-2));
    border-radius:2px; opacity:0; transition:left .45s cubic-bezier(.16,1,.3,1), width .45s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    box-shadow:0 0 8px rgba(246,196,69,0.7);
  }
  #nav-links a{position:relative; padding-bottom:4px;}
  #nav-links a.active{color:var(--gold) !important;}

  /* ---------- Micro-brillo en títulos al hacer hover ---------- */
  .flicker-hover{position:relative; transition:text-shadow .3s ease;}
  .flicker-hover:hover{text-shadow:0 0 18px rgba(246,196,69,0.55);}

  /* ---------- Números de sección con contador de línea ---------- */
  .tick{position:relative; display:inline-flex; align-items:center; gap:8px;}
  .tick::before{
    content:""; width:5px; height:5px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 8px 2px rgba(246,196,69,0.8); animation:tick-pulse 2.2s ease-in-out infinite;
  }
  @keyframes tick-pulse{ 0%,100%{opacity:.4; transform:scale(.8);} 50%{opacity:1; transform:scale(1.15);} }

  /* ---------- Botones: onda al presionar ---------- */
  .ripple-btn{position:relative; overflow:hidden;}
  .ripple-ink{position:absolute; border-radius:50%; background:rgba(255,255,255,0.5); transform:scale(0); pointer-events:none; animation:ripple-anim .65s ease-out forwards;}
  @keyframes ripple-anim{ to{ transform:scale(1); opacity:0; } }

  /* ---------- Marquee: profundidad extra ---------- */
  .marquee-track span{transition:color .3s ease, text-shadow .3s ease;}
  .marquee-track span:hover{color:var(--gold); text-shadow:0 0 16px rgba(246,196,69,0.6);}

  /* ---------- Fade-in de imágenes al cargar ---------- */
  img{opacity:0; animation:img-in .9s ease forwards;}
  @keyframes img-in{ to{opacity:1;} }

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-scale, .kinetic-word span{opacity:1 !important; transform:none !important; filter:none !important;}
    #preloader{display:none !important;}
    img{animation:none; opacity:1;}
  }