/* ======================
   PRELOADER (v2)
   ====================== */

.preloader {
   position: fixed;
   inset: 0;
   background: #0a0a0a;
   display: grid;
   place-items: center;
   z-index: 999999;
   transition:
      opacity 50ms ease,
      visibility 50ms ease;
}

.preloader.is-hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

/* Card */
.preloader__card {
   width: min(380px, 88vw);
   border-radius: 18px;
   padding: 22px 22px 18px;
   background: rgba(12, 14, 14, 0.7);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(8px);
   transform: translateY(0);
   opacity: 1;
   transition:
      transform 50ms ease,
      opacity 50ms ease;
}

.preloader.is-done .preloader__card {
   /* se “desarma” suave cuando termina */
   transform: translateY(8px) scale(0.98);
   opacity: 0.35;
}

/* Top row */
.preloader__top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
}

.preloader__title {
   display: flex;
   align-items: center;
   line-height: 1;
}

/* Ring */
.preloader__ring {
   position: relative;
   width: 104px;
   height: 104px;
   flex: 0 0 auto;
   display: grid;
   place-items: center;
}

.preloader__ring svg {
   width: 104px;
   height: 104px;
   transform: rotate(-90deg);
}

.ring__track {
   fill: none;
   stroke: rgba(255, 255, 255, 0.1);
   stroke-width: 10;
}

.ring__bar {
   fill: none;
   stroke: #F0A830;
   stroke-width: 10;
   stroke-linecap: round;
   stroke-dasharray: 270;
   stroke-dashoffset: 270;
   transition: stroke-dashoffset 240ms ease;
}

/* Glow circular — aplicado al wrapper, no al SVG rotado */
.preloader__ring::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   box-shadow: 0 0 18px 4px rgba(240, 168, 48, 0.22);
   pointer-events: none;
}

.preloader__pct {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-weight: 900;
   font-size: 18px;
   color: rgba(255, 255, 255, 0.94);
   letter-spacing: -0.02em;
   line-height: 1;
   pointer-events: none;
}

/* Status lines */
.preloader__status {
   margin-top: 14px;
   display: grid;
   gap: 6px;
}

.pl-line {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.58);
   display: flex;
   align-items: center;
   gap: 10px;
   transition: color 240ms ease;
}

.pl-line::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.16);
   box-shadow: 0 0 0 rgba(255, 255, 255, 0);
   transition: 240ms ease;
}

.pl-line.is-active {
   color: rgba(255, 255, 255, 0.88);
}
.pl-line.is-active::before {
   background: rgba(255, 255, 255, 0.88);
   box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}
.pl-line.is-complete {
   color: rgba(240, 168, 48, 0.80);
}
.pl-line.is-complete::before {
   background: rgba(240, 168, 48, 0.90);
   box-shadow: 0 0 12px rgba(240, 168, 48, 0.25);
}

/* DONE state: deja SOLO el listo + check (centrado y grande) */
.preloader__done {
   display: none;
}

.preloader.is-done .preloader__top,
.preloader.is-done .preloader__status {
   display: none;
}

.preloader.is-done .preloader__card {
   width: min(420px, 92vw);
   padding: 26px 22px;
   display: grid;
   place-items: center;
   opacity: 1;
   transform: translateY(0) scale(1);
}

.preloader.is-done .preloader__done {
   display: grid;
   place-items: center;
   gap: 10px;
   text-align: center;
}

.preloader__done .check {
   width: 64px;
   height: 64px;
   border-radius: 999px;
   display: grid;
   place-items: center;

   border: 1px solid rgba(240, 168, 48, 0.40);
   background: rgba(240, 168, 48, 0.10);
   color: rgba(240, 168, 48, 0.95);
   text-shadow: 0 0 14px rgba(240, 168, 48, 0.30);
   box-shadow: 0 0 28px rgba(240, 168, 48, 0.18);

   font-size: 34px;
   font-weight: 900;
   animation: plPop 650ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.preloader__done .done-text {
   font-size: 26px;
   font-weight: 900;
   letter-spacing: -0.02em;
   color: rgba(240, 168, 48, 0.95);
   text-shadow: 0 0 18px rgba(240, 168, 48, 0.30);
   animation: plFadeUp 700ms ease both;
}

@keyframes plPop {
   0% {
      transform: scale(0.75);
      opacity: 0;
   }
   60% {
      transform: scale(1.08);
      opacity: 1;
   }
   100% {
      transform: scale(1);
      opacity: 1;
   }
}
@keyframes plFadeUp {
   0% {
      transform: translateY(10px);
      opacity: 0;
   }
   100% {
      transform: translateY(0);
      opacity: 1;
   }
}
/* ==========================
   RESPONSIVE — Móvil pequeño
   ========================== */
@media (max-width: 480px) {
   .preloader__card {
      width: min(320px, 86vw);
      padding: 14px 14px 12px;
      border-radius: 14px;
   }
   .preloader__top {
      gap: 12px;
   }
   .preloader__title {
      font-size: 17px;
   }
   .preloader__ring,
   .preloader__ring svg {
      width: 56px;
      height: 56px;
   }
   .preloader__pct {
      font-size: 12px;
   }
   .preloader__status {
      margin-top: 10px;
      gap: 5px;
   }
   .pl-line {
      font-size: 11px;
      gap: 7px;
   }
   .pl-line::before {
      width: 6px;
      height: 6px;
   }
   .preloader.is-done .preloader__card {
      width: min(280px, 80vw);
      padding: 18px 14px;
   }
   .preloader__done .check {
      width: 44px;
      height: 44px;
      font-size: 22px;
   }
   .preloader__done .done-text {
      font-size: 17px;
   }
}

/* ==========================
   HARD GATE (cero “preview”)
   ========================== */

/* Oculta la página POR DEFECTO. Solo se muestra cuando marcamos app-ready */
#page-scroll,
nav,
.side-rails,
.cursor-spotlight,
.cursor-dot {
   visibility: hidden;
}

body.app-ready #page-scroll,
body.app-ready nav,
body.app-ready .side-rails,
body.app-ready .cursor-spotlight,
body.app-ready .cursor-dot {
   visibility: visible;
}

/* Evita scroll mientras no esté lista */
body.app-preloading {
   overflow: hidden;
}

/* Pausa animaciones POR DEFECTO (así no “corren” detrás del preloader) */
#page-scroll *,
nav *,
.side-rails * {
   animation-play-state: paused !important;
}

/* Reanuda SOLO cuando esté lista */
body.app-ready #page-scroll *,
body.app-ready nav *,
body.app-ready .side-rails * {
   animation-play-state: running !important;
}

/* El preloader siempre puede animar */
#preloader,
#preloader * {
   animation-play-state: running !important;
}