/* PRAESIUM_EXPERIENCE_SYSTEM_V12_CSS */
@layer praesium-reset, praesium-foundation, praesium-components, praesium-motion, praesium-accessibility;

@layer praesium-foundation{
  :root{
    --px12-bg-1000:#02050a;
    --px12-bg-950:#05090f;
    --px12-bg-900:#09111a;
    --px12-surface:rgba(9,17,26,.78);
    --px12-surface-strong:rgba(7,13,21,.94);
    --px12-line:rgba(222,179,76,.32);
    --px12-line-strong:rgba(235,197,99,.64);
    --px12-gold-200:#f5dea0;
    --px12-gold-300:#ebca78;
    --px12-gold-400:#dcb050;
    --px12-gold-500:#bd8d2d;
    --px12-ivory:#f7f0df;
    --px12-muted:rgba(247,240,223,.68);
    --px12-success:#63d99a;
    --px12-danger:#ff7e88;
    --px12-info:#7ac4ff;
    --px12-radius-sm:10px;
    --px12-radius-md:16px;
    --px12-radius-lg:24px;
    --px12-shadow-soft:0 18px 50px rgba(0,0,0,.24);
    --px12-shadow-premium:0 30px 80px rgba(0,0,0,.34),0 0 0 1px rgba(222,179,76,.07);
    --px12-ease:cubic-bezier(.22,.61,.36,1);
    --px12-spring:cubic-bezier(.2,.86,.25,1.12);
    --px12-fast:160ms;
    --px12-normal:280ms;
    --px12-slow:620ms;
    --px12-scroll:0%;
    color-scheme:dark;
  }

  html{
    scroll-behavior:smooth;
    scrollbar-color:var(--px12-gold-500) var(--px12-bg-1000);
  }

  body{
    min-height:100vh;
    background:
      radial-gradient(900px circle at 8% -10%,rgba(216,172,70,.08),transparent 52%),
      radial-gradient(700px circle at 92% 18%,rgba(79,140,193,.05),transparent 54%),
      var(--px12-bg-950);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.18;
    background-image:
      linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,black,transparent 78%);
  }

  ::selection{
    color:#080b10;
    background:var(--px12-gold-300);
  }

  img,
  svg,
  video{
    max-width:100%;
  }

  img:not([loading]){
    content-visibility:auto;
  }
}

@layer praesium-components{
  .px12-skip-link{
    position:fixed;
    top:12px;
    left:12px;
    z-index:100000;
    padding:10px 14px;
    border-radius:10px;
    color:#070a0f;
    background:var(--px12-gold-300);
    font-weight:800;
    transform:translateY(-180%);
    transition:transform var(--px12-fast) ease;
  }

  .px12-skip-link:focus{
    transform:translateY(0);
  }

  .px12-scroll-progress{
    position:fixed;
    inset:0 0 auto 0;
    z-index:99999;
    height:3px;
    pointer-events:none;
    background:linear-gradient(
      90deg,
      var(--px12-gold-500),
      var(--px12-gold-200),
      var(--px12-info)
    );
    transform-origin:left center;
    transform:scaleX(var(--px12-scroll-ratio,0));
    box-shadow:0 0 16px rgba(231,193,97,.36);
  }

  .px12-page-transition{
    position:fixed;
    inset:0;
    z-index:99998;
    display:grid;
    place-items:center;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    background:
      radial-gradient(circle at center,rgba(218,175,73,.10),transparent 34%),
      rgba(2,5,10,.96);
    transition:
      opacity 260ms ease,
      visibility 260ms ease;
  }

  .px12-page-transition.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .px12-page-transition-mark{
    width:54px;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(231,196,105,.25);
    border-top-color:var(--px12-gold-300);
    animation:px12Spin 780ms linear infinite;
    box-shadow:0 0 28px rgba(220,176,76,.16);
  }

  @keyframes px12Spin{
    to{ transform:rotate(360deg); }
  }

  header,
  nav{
    transition:
      background-color var(--px12-normal) ease,
      border-color var(--px12-normal) ease,
      box-shadow var(--px12-normal) ease,
      transform var(--px12-normal) var(--px12-ease),
      backdrop-filter var(--px12-normal) ease;
  }

  header.px12-header-scrolled,
  nav.px12-header-scrolled{
    background:rgba(3,8,13,.82) !important;
    border-color:rgba(222,179,76,.22) !important;
    box-shadow:0 12px 36px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  }

  a[aria-current="page"]{
    color:var(--px12-gold-200) !important;
    text-shadow:0 0 18px rgba(235,202,120,.18);
  }

  a[aria-current="page"]::after{
    transform:scaleX(1) !important;
    opacity:1 !important;
  }

  .px12-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    transform-style:preserve-3d;
    transition:
      transform var(--px12-normal) var(--px12-spring),
      border-color var(--px12-normal) ease,
      box-shadow var(--px12-normal) ease,
      background-color var(--px12-normal) ease !important;
  }

  .px12-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:0;
    background:
      radial-gradient(
        360px circle at var(--px12-card-x,50%) var(--px12-card-y,50%),
        rgba(235,202,120,.12),
        transparent 58%
      );
    transition:opacity var(--px12-normal) ease;
  }

  .px12-card:hover,
  .px12-card:focus-within{
    border-color:var(--px12-line-strong) !important;
    box-shadow:var(--px12-shadow-premium) !important;
  }

  .px12-card:hover::before,
  .px12-card:focus-within::before{
    opacity:1;
  }

  .px12-button{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate;
    transition:
      transform var(--px12-fast) var(--px12-spring),
      box-shadow var(--px12-normal) ease,
      filter var(--px12-normal) ease !important;
  }

  .px12-button::before{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;
    background:linear-gradient(
      115deg,
      transparent 10%,
      rgba(255,255,255,.34) 46%,
      transparent 74%
    );
    transform:translateX(-120%);
    transition:transform 680ms var(--px12-ease);
  }

  .px12-button:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 20px rgba(222,179,76,.14) !important;
  }

  .px12-button:hover::before{
    transform:translateX(120%);
  }

  .px12-button:active{
    transform:translateY(0) scale(.985);
  }

  .px12-ripple{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    pointer-events:none;
    background:rgba(255,255,255,.52);
    transform:translate(-50%,-50%) scale(0);
    animation:px12Ripple 620ms ease-out forwards;
  }

  @keyframes px12Ripple{
    to{
      opacity:0;
      transform:translate(-50%,-50%) scale(30);
    }
  }

  .px12-reveal{
    opacity:0;
    transform:translateY(22px) scale(.992);
    transition:
      opacity var(--px12-slow) ease,
      transform var(--px12-slow) var(--px12-spring);
    transition-delay:var(--px12-delay,0ms);
  }

  .px12-reveal.is-visible{
    opacity:1;
    transform:none;
  }

  .px12-media{
    overflow:hidden;
  }

  .px12-media img,
  img.px12-media{
    transition:
      transform 720ms var(--px12-ease),
      filter 420ms ease;
  }

  .px12-media:hover img,
  img.px12-media:hover{
    transform:scale(1.025);
    filter:saturate(1.04) contrast(1.02);
  }

  .px12-whatsapp{
    position:relative !important;
    z-index:90 !important;
    transform:translateY(-28px) !important;
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.42)) !important;
    animation:px12WhatsappFloat 3.5s ease-in-out infinite !important;
  }

  .px12-whatsapp::after{
    content:"";
    position:absolute;
    inset:-8px;
    z-index:-1;
    border:1px solid rgba(76,218,123,.34);
    border-radius:50%;
    animation:px12WhatsappRing 2.6s ease-out infinite;
  }

  @keyframes px12WhatsappFloat{
    0%,100%{ transform:translateY(-28px); }
    50%{ transform:translateY(-36px); }
  }

  @keyframes px12WhatsappRing{
    0%{ opacity:.65; transform:scale(.82); }
    100%{ opacity:0; transform:scale(1.34); }
  }

  .px12-toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:100001;
    max-width:min(380px,calc(100vw - 32px));
    padding:13px 15px;
    border:1px solid var(--px12-line);
    border-radius:var(--px12-radius-sm);
    background:rgba(4,9,14,.94);
    color:var(--px12-ivory);
    box-shadow:var(--px12-shadow-premium);
    backdrop-filter:blur(16px);
    opacity:0;
    transform:translateY(16px) scale(.98);
    transition:
      opacity var(--px12-normal) ease,
      transform var(--px12-normal) var(--px12-spring);
  }

  .px12-toast.is-visible{
    opacity:1;
    transform:none;
  }
}

@layer praesium-motion{
  html.px12-js body{
    opacity:0;
    transform:translateY(5px);
  }

  html.px12-js.px12-ready body{
    opacity:1;
    transform:none;
    transition:
      opacity 420ms ease,
      transform 520ms var(--px12-ease);
  }
}

@layer praesium-accessibility{
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible{
    outline:3px solid var(--px12-gold-300) !important;
    outline-offset:3px !important;
    box-shadow:0 0 0 2px var(--px12-bg-1000) !important;
  }

  @media (prefers-reduced-motion:reduce){
    html{
      scroll-behavior:auto !important;
    }

    html.px12-js body,
    .px12-reveal{
      opacity:1 !important;
      transform:none !important;
    }

    .px12-page-transition-mark,
    .px12-whatsapp,
    .px12-whatsapp::after{
      animation:none !important;
    }

    *,
    *::before,
    *::after{
      scroll-behavior:auto !important;
      transition-duration:.01ms !important;
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
    }
  }

  @media (prefers-contrast:more){
    :root{
      --px12-line:rgba(245,222,160,.72);
      --px12-line-strong:#f5dea0;
      --px12-muted:#f7f0df;
    }
  }

  @media (max-width:780px){
    .px12-toast{
      right:16px;
      bottom:16px;
    }

    .px12-whatsapp{
      transform:translateY(-16px) !important;
      animation:none !important;
    }
  }
}