/* ============================================================
   SistemaKlaro — Capa cinematográfica v3
   Scroll por secciones (pantallas), cursor brutal, fondo animado,
   reveals y scrub con GSAP/ScrollTrigger.
   ============================================================ */

/* ============================================================
   1) FONDO ANIMADO (aurora de blobs naranjas)
   ============================================================ */
.sk-bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:#09090b; pointer-events:none;
}
.sk-bg-blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:0.30; will-change:transform;
}
.sk-bg-blob.b1{
  width:55vw; height:55vw; top:-12%; left:-10%;
  background:radial-gradient(circle, #FF6B1A 0%, transparent 70%);
  animation:skBlob1 26s ease-in-out infinite;
}
.sk-bg-blob.b2{
  width:48vw; height:48vw; bottom:-15%; right:-12%;
  background:radial-gradient(circle, #FF8C3D 0%, transparent 70%);
  opacity:0.22; animation:skBlob2 32s ease-in-out infinite;
}
.sk-bg-blob.b3{
  width:40vw; height:40vw; top:35%; left:45%;
  background:radial-gradient(circle, #7a3410 0%, transparent 70%);
  opacity:0.35; animation:skBlob3 38s ease-in-out infinite;
}
@keyframes skBlob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22vw,18vh) scale(1.25)}}
@keyframes skBlob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20vw,-14vh) scale(1.15)}}
@keyframes skBlob3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-16vw,12vh) scale(1.2)}66%{transform:translate(14vw,-10vh) scale(0.9)}}

/* Para que el fondo se vea: secciones transparentes (las tarjetas
   mantienen su propio fondo). */
.sk-fx-on .ast-container > section{ background:transparent !important; }

/* ============================================================
   2) SCROLL POR SECCIONES (pantallas)  — solo escritorio
   ============================================================ */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  html.sk-snap{ scroll-snap-type:y proximity; }
  html.sk-snap .ast-container > section{
    scroll-snap-align:start;
    scroll-snap-stop:always;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  /* indicador de "sigue bajando" en el hero */
  .sk-scroll-hint{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
    width:26px; height:42px; border:2px solid var(--sk-accent-line,#FF6B1A);
    border-radius:14px; z-index:99998; pointer-events:none; opacity:0.8;
    transition:opacity .4s;
  }
  .sk-scroll-hint::before{
    content:""; position:absolute; left:50%; top:8px; transform:translateX(-50%);
    width:4px; height:8px; border-radius:2px; background:var(--sk-accent,#FF6B1A);
    animation:skWheel 1.6s ease-in-out infinite;
  }
  @keyframes skWheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}
  .sk-scroll-hint.is-hidden{opacity:0}
}

/* ============================================================
   3) CURSOR BRUTAL  — solo dispositivos con ratón
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  html.sk-cursor, html.sk-cursor *{ cursor:none !important; }
  .sk-cursor-dot,.sk-cursor-ring{
    position:fixed; top:0; left:0; z-index:100000; pointer-events:none;
    border-radius:50%; transform:translate(-50%,-50%);
  }
  .sk-cursor-dot{
    width:7px; height:7px; background:var(--sk-accent,#FF6B1A);
    box-shadow:0 0 10px rgba(255,107,26,0.8);
  }
  .sk-cursor-ring{
    width:38px; height:38px;
    border:1.5px solid rgba(255,255,255,0.85);
    mix-blend-mode:difference;
    transition:width .25s var(--sk-ease,cubic-bezier(.22,1,.36,1)),
               height .25s var(--sk-ease,cubic-bezier(.22,1,.36,1)),
               background .25s, border-color .25s, opacity .25s;
  }
  .sk-cursor-ring.is-hover{
    width:66px; height:66px;
    background:rgba(255,107,26,0.18);
    border-color:var(--sk-accent,#FF6B1A);
    mix-blend-mode:normal;
  }
  .sk-cursor-ring.is-down{ width:30px; height:30px; }
}

/* ============================================================
   4) Barra de progreso
   ============================================================ */
.sk-scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--sk-accent,#FF6B1A),var(--sk-accent-3,#FFB37A));
  box-shadow:0 0 16px rgba(255,107,26,0.6);
  z-index:99999; pointer-events:none; will-change:transform;
}

/* GSAP controla opacidad/transform; will-change para rendimiento */
.sk-fade-in{ will-change:opacity,transform,filter; }
.sk-fx-init .sk-hero h1,
.sk-fx-init .sk-hero .hero-badge,
.sk-fx-init .sk-hero .sk-hero-lead,
.sk-fx-init .sk-hero .hero-buttons,
.sk-fx-init .sk-hero .sk-hero-meta,
.sk-fx-init .sk-hero-card{ opacity:0; }

.sk-manifesto-text,.sk-manifesto-mark,
.sk-handover-quote,.sk-final-cta-inner h2{ will-change:transform,opacity; }
.servicio-card-new .card-content{ will-change:transform; }

/* ---------- Red de seguridad: si GSAP no carga ---------- */
.sk-fx-fallback .sk-fade-in,
.sk-fx-fallback .sk-hero h1,
.sk-fx-fallback .sk-hero .hero-badge,
.sk-fx-fallback .sk-hero .sk-hero-lead,
.sk-fx-fallback .sk-hero .hero-buttons,
.sk-fx-fallback .sk-hero .sk-hero-meta,
.sk-fx-fallback .sk-hero-card{
  opacity:1 !important; transform:none !important; filter:none !important;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .sk-fade-in,
  .sk-hero h1,.sk-hero .hero-badge,.sk-hero .sk-hero-lead,
  .sk-hero .hero-buttons,.sk-hero .sk-hero-meta,.sk-hero-card{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  .sk-scroll-progress,.sk-bg-blob{ animation:none !important; }
  .sk-scroll-progress{ display:none !important; }
}