/* CSS compartilhado: :where isola páginas sem aumentar a especificidade. */

/* 404.html */
*:where(html[data-pagina="404"], html[data-pagina="404"] *),
*:where(html[data-pagina="404"], html[data-pagina="404"] *)::before,
*:where(html[data-pagina="404"], html[data-pagina="404"] *)::after {
      box-sizing: border-box;
    }
:root:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      --cream: #FFFBF3;
      --cream-2: #FFF3DE;
      --sun: #F59E0B;
      --gold: #FBBF24;
      --ember: #EA580C;
      --rose: #FB7185;
      --ink: #221B12;
      --muted: #7C7268;
      --line: rgba(34, 27, 18, .09);
      --glass: rgba(255, 255, 255, .6);
      --glass-strong: rgba(255, 255, 255, .86);
      --shadow-sm: 0 10px 26px rgba(154, 88, 20, .10);
      --shadow-lg: 0 30px 64px rgba(154, 88, 20, .18);
      --radius-lg: 26px;
      --radius-md: 18px;
    }
html:where(html[data-pagina="404"], html[data-pagina="404"] *),
body:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      margin: 0;
      min-height: 100%;
    }
body:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--ink);
      background: var(--cream);
      min-height: 100vh;
      min-height: 100dvh;
      overflow-x: hidden;
      position: relative;
      -webkit-font-smoothing: antialiased;
      display: flex;
      align-items: center;
      justify-content: center;
    }
.aurora:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
.aurora:where(html[data-pagina="404"], html[data-pagina="404"] *)::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(1000px 640px at 8% -8%, rgba(251, 191, 36, .38), transparent 60%),
        radial-gradient(820px 620px at 102% 6%, rgba(245, 158, 11, .30), transparent 58%),
        radial-gradient(680px 560px at 34% 118%, rgba(251, 113, 133, .20), transparent 62%),
        linear-gradient(180deg, #fffefb 0%, var(--cream) 45%, var(--cream-2) 100%);
    }
.beam:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      top: -30%;
      right: -16%;
      width: 75%;
      height: 160%;
      background: linear-gradient(202deg, rgba(255, 253, 246, .85), rgba(255, 253, 246, 0) 55%);
      transform: rotate(14deg);
      filter: blur(6px);
      opacity: .75;
    }
.blob:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      border-radius: 50%;
      filter: blur(72px);
      opacity: .6;
      animation: pagina_404_drift 24s ease-in-out infinite;
    }
.blob--a:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 460px;
      height: 460px;
      left: -130px;
      top: -110px;
      background: radial-gradient(circle, var(--gold), transparent 70%);
    }
.blob--b:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 520px;
      height: 520px;
      right: -150px;
      top: -70px;
      background: radial-gradient(circle, var(--sun), transparent 70%);
      animation-delay: -8s;
    }
.blob--c:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 400px;
      height: 400px;
      left: 36%;
      bottom: -210px;
      background: radial-gradient(circle, var(--rose), transparent 72%);
      animation-delay: -15s;
    }
@keyframes pagina_404_drift {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(24px, -16px) scale(1.06);
      }
    }
.noise:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: .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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
.wrap:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 48px 32px calc(36px + env(safe-area-inset-bottom));
    }
.hub-header:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 40px;
      opacity: 0;
      animation: pagina_404_rise .7s .05s cubic-bezier(.22, 1, .36, 1) forwards;
    }
.logo-badge:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 76px;
      height: 76px;
      flex-shrink: 0;
      border-radius: 20px;
      background: var(--glass-strong);
      border: 1px solid rgba(255, 255, 255, .85);
      box-shadow: 0 12px 30px rgba(154, 88, 20, .14);
      display: grid;
      place-items: center;
      padding: 12px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
.logo-badge img:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
.logo-fallback:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      display: none;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 24px;
      color: var(--sun);
    }
.brand-lockup:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      display: flex;
      flex-direction: column;
      gap: 3px;
      text-align: left;
    }
.brand-name:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      margin: 0;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 24px;
      letter-spacing: -.3px;
    }
.brand-tag:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }
.card-404:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      display: grid;
      grid-template-columns: 1.2fr 0.9fr;
      gap: 2rem;
      padding: 2rem;
      background: var(--glass);
      border: 1px solid rgba(255, 255, 255, .75);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      opacity: 0;
      animation: pagina_404_rise .7s .18s cubic-bezier(.22, 1, .36, 1) forwards;
      transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .3s ease;
    }
.card-404:hover:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      box-shadow: var(--shadow-lg);
      border-color: rgba(255, 255, 255, .95);
    }
@media (max-width: 880px) {
.wrap:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        padding: 32px 22px;
      }
.card-404:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
      }

    }
@media (max-width: 480px) {
.wrap:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        padding: 24px 16px;
      }
.card-404:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        padding: 1.25rem;
      }

    }
.left:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.25rem;
    }
.badge-404:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 6px 16px 6px 12px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, .5);
      border: 1px solid rgba(255, 255, 255, .8);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--ember);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }
.badge-404 .dot:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 10px;
      height: 10px;
      border-radius: 9999px;
      background: var(--sun);
      box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    }
h1:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      margin: 0;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(2rem, 5vw, 2.8rem);
      letter-spacing: -1.2px;
      color: var(--ink);
    }
h1 .accent:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      color: var(--ember);
    }
p.description:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      margin: 0;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.55;
      max-width: 44ch;
    }
.actions:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 0.25rem;
    }
.btn:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      appearance: none;
      border: none;
      cursor: pointer;
      padding: 0.75rem 1.4rem;
      border-radius: 9999px;
      font-weight: 700;
      font-size: 0.9rem;
      transition: all .35s cubic-bezier(.22, 1, .36, 1);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      background: var(--glass-strong);
      color: var(--ink);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      text-decoration: none;
    }
.btn:hover:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(34, 27, 18, .16);
    }
.btn:active:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      transform: translateY(1px);
    }
.btn-primary:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      background: linear-gradient(135deg, var(--sun), var(--ember));
      border: none;
      color: #fff;
      box-shadow: 0 8px 20px rgba(245, 158, 11, .25);
    }
.btn-primary:hover:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      filter: brightness(1.05);
      box-shadow: 0 12px 28px rgba(245, 158, 11, .35);
    }
.btn-seller:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      background: linear-gradient(135deg, #059669, #047857);
      border: none;
      color: #fff;
      box-shadow: 0 8px 20px rgba(5, 150, 105, .25);
    }
.btn-seller:hover:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      filter: brightness(1.05);
      box-shadow: 0 12px 28px rgba(5, 150, 105, .35);
    }
.btn-moderator:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      background: linear-gradient(135deg, var(--ember), #b33a0b);
      border: none;
      color: #fff;
      box-shadow: 0 8px 20px rgba(234, 88, 12, .25);
    }
.btn-moderator:hover:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      filter: brightness(1.05);
      box-shadow: 0 12px 28px rgba(234, 88, 12, .35);
    }
.btn-ghost:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      background: transparent;
      border: 1px solid var(--line);
      color: var(--muted);
    }
.btn-ghost:hover:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      border-color: var(--sun);
      color: var(--ember);
    }
.hint:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      font-size: 0.75rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.25rem;
    }
.code-hint:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      font-size: 0.7rem;
      font-family: 'JetBrains Mono', 'SF Mono', monospace;
      background: rgba(255, 255, 255, .4);
      border: 1px solid var(--line);
      padding: 4px 12px;
      border-radius: 9999px;
      display: inline-block;
      color: var(--muted);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
.scene:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      min-height: 280px;
      background: rgba(255, 255, 255, .3);
      border: 1px solid rgba(255, 255, 255, .6);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), var(--shadow-sm);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: all .3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
.scene:where(html[data-pagina="404"], html[data-pagina="404"] *)::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(500px 300px at 50% 35%, rgba(251, 191, 36, .12), transparent 70%);
      pointer-events: none;
    }
.sun:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: relative;
      width: 140px;
      height: 140px;
      animation: pagina_404_float 3.8s ease-in-out infinite;
      filter: drop-shadow(0 18px 30px rgba(245, 158, 11, .20));
      z-index: 2;
      will-change: transform;
    }
.sun .core:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      inset: 18px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff3bf, var(--gold) 50%, var(--sun) 100%);
      box-shadow: 0 0 30px rgba(245, 158, 11, .3);
    }
.sun .rays:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      inset: 0;
      animation: pagina_404_spin 16s linear infinite;
    }
.ray:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 34px;
      border-radius: 20px;
      background: linear-gradient(180deg, var(--gold), var(--sun));
      transform-origin: 50% 78px;
      box-shadow: 0 0 10px rgba(245, 158, 11, .2);
    }
.sun .face:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      inset: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      pointer-events: none;
    }
.eye:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 10px;
      height: 18px;
      border-radius: 20px;
      background: rgba(60, 30, 0, .6);
      box-shadow: 0 0 0 3px rgba(255, 255, 200, .2) inset;
      transform: translateY(-2px);
    }
.mouth:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      bottom: 36px;
      left: 50%;
      width: 44px;
      height: 22px;
      transform: translateX(-50%);
      border-bottom: 6px solid rgba(60, 30, 0, .6);
      border-radius: 0 0 30px 30px;
      opacity: .8;
    }
.bubble:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .35);
      border: 1px solid rgba(255, 255, 255, .4);
      filter: blur(0.3px);
      animation: pagina_404_drift-bubble 6s ease-in-out infinite;
      z-index: 1;
    }
@keyframes pagina_404_drift-bubble {
      0%,
      100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.4;
      }
      50% {
        transform: translateY(-18px) translateX(12px);
        opacity: 0.8;
      }
    }
.wave:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      position: absolute;
      left: -20%;
      bottom: -35%;
      width: 140%;
      height: 65%;
      background: radial-gradient(closest-side at 50% 20%, rgba(59, 130, 246, .12), transparent 70%);
      transform: rotate(-2deg);
      opacity: .5;
      pointer-events: none;
    }
@keyframes pagina_404_float {
      0%,
      100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-12px);
      }
    }
@keyframes pagina_404_spin {
      to {
        transform: rotate(360deg);
      }
    }
@media (max-width: 580px) {
.sun:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        width: 110px;
        height: 110px;
      }
.ray:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        transform-origin: 50% 64px;
        height: 28px;
        width: 10px;
      }
.sun .face:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        inset: 30px;
      }
.mouth:where(html[data-pagina="404"], html[data-pagina="404"] *) {
        bottom: 28px;
        width: 34px;
      }

    }
.hub-footer:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      margin-top: 44px;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      color: var(--muted);
      opacity: 0;
      animation: pagina_404_rise .7s .42s cubic-bezier(.22, 1, .36, 1) forwards;
      justify-content: center;
    }
.hub-footer svg:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      width: 13px;
      height: 13px;
    }
.hub-footer .dot:where(html[data-pagina="404"], html[data-pagina="404"] *) {
      opacity: .55;
    }
@keyframes pagina_404_rise {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
@media (prefers-reduced-motion: reduce) {
*:where(html[data-pagina="404"], html[data-pagina="404"] *),
*:where(html[data-pagina="404"], html[data-pagina="404"] *)::before,
*:where(html[data-pagina="404"], html[data-pagina="404"] *)::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }

    }

  

/* home.html */
*:where(html[data-pagina="home"], html[data-pagina="home"] *),
*:where(html[data-pagina="home"], html[data-pagina="home"] *)::before,
*:where(html[data-pagina="home"], html[data-pagina="home"] *)::after { box-sizing: border-box; }
:root:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    --cream:#FFFBF3;
    --cream-2:#FFF3DE;
    --sun:#F59E0B;
    --gold:#FBBF24;
    --ember:#EA580C;
    --rose:#FB7185;
    --ink:#221B12;
    --muted:#7C7268;
    --line: rgba(34,27,18,.09);
    --glass: rgba(255,255,255,.6);
    --glass-strong: rgba(255,255,255,.86);
    --shadow-sm: 0 10px 26px rgba(154,88,20,.10);
    --shadow-lg: 0 30px 64px rgba(154,88,20,.18);
    --radius-lg: 26px;
    --radius-md: 18px;
  }
html:where(html[data-pagina="home"], html[data-pagina="home"] *),
body:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin:0; min-height:100%; }
body:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    font-family:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--cream);
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    position:relative;
    -webkit-font-smoothing:antialiased;
  }
a:where(html[data-pagina="home"], html[data-pagina="home"] *) { color:inherit; }
.aurora:where(html[data-pagina="home"], html[data-pagina="home"] *) { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora:where(html[data-pagina="home"], html[data-pagina="home"] *)::before {
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(1000px 640px at 8% -8%, rgba(251,191,36,.38), transparent 60%),
      radial-gradient(820px 620px at 102% 6%, rgba(245,158,11,.30), transparent 58%),
      radial-gradient(680px 560px at 34% 118%, rgba(251,113,133,.20), transparent 62%),
      linear-gradient(180deg, #fffefb 0%, var(--cream) 45%, var(--cream-2) 100%);
  }
.beam:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    position:absolute; top:-30%; right:-16%; width:75%; height:160%;
    background:linear-gradient(202deg, rgba(255,253,246,.85), rgba(255,253,246,0) 55%);
    transform:rotate(14deg);
    filter:blur(6px);
    opacity:.75;
  }
.blob:where(html[data-pagina="home"], html[data-pagina="home"] *) { position:absolute; border-radius:50%; filter:blur(72px); opacity:.6; animation:pagina_home_drift 24s ease-in-out infinite; }
.blob--a:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:460px; height:460px; left:-130px; top:-110px; background:radial-gradient(circle, var(--gold), transparent 70%); }
.blob--b:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:520px; height:520px; right:-150px; top:-70px; background:radial-gradient(circle, var(--sun), transparent 70%); animation-delay:-8s; }
.blob--c:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:400px; height:400px; left:36%; bottom:-210px; background:radial-gradient(circle, var(--rose), transparent 72%); animation-delay:-15s; }
@keyframes pagina_home_drift { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(24px,-16px) scale(1.06); } }
.noise:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
.hub:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    position:relative; z-index:1;
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:100%; max-width:1080px; margin:0 auto;
    padding: 56px 32px calc(36px + env(safe-area-inset-bottom));
  }
.hub-header:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    display:flex; align-items:center; gap:20px; margin-bottom:40px;
    opacity:0; animation: pagina_home_rise .7s .05s cubic-bezier(.22,1,.36,1) forwards;
  }
.logo-badge:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    width:76px; height:76px; flex-shrink:0; border-radius:20px;
    background:var(--glass-strong); border:1px solid rgba(255,255,255,.85);
    box-shadow:0 12px 30px rgba(154,88,20,.14); display:grid; place-items:center; padding:12px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
.logo-badge img:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:100%; height:100%; object-fit:contain; display:block; }
.logo-fallback:where(html[data-pagina="home"], html[data-pagina="home"] *) { display:none; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:24px; color:var(--sun); }
.brand-lockup:where(html[data-pagina="home"], html[data-pagina="home"] *) { display:flex; flex-direction:column; gap:3px; text-align:left; }
.brand-name:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin:0; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:24px; letter-spacing:-.3px; }
.brand-tag:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin:0; font-size:13px; color:var(--muted); }
.hero:where(html[data-pagina="home"], html[data-pagina="home"] *) { text-align:center; max-width:560px; margin-bottom:46px; opacity:0; animation: pagina_home_rise .7s .18s cubic-bezier(.22,1,.36,1) forwards; }
.greeting:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin:0 0 12px; font-size:12.5px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase; color:var(--ember); }
.headline:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin:0 0 14px; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:clamp(32px,5.6vw,56px); line-height:1.05; letter-spacing:-1.2px; color:var(--ink); }
.headline .accent:where(html[data-pagina="home"], html[data-pagina="home"] *) { color:var(--ember); }
.subhead:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin:0 auto; max-width:420px; color:var(--muted); font-size:15.5px; line-height:1.55; }
.portals:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px; width:100%;
    opacity:0; animation: pagina_home_rise .7s .3s cubic-bezier(.22,1,.36,1) forwards;
  }
.portal:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; align-items:flex-start; gap:16px;
    padding:28px 26px 26px; border-radius:var(--radius-lg);
    background:var(--glass); border:1px solid rgba(255,255,255,.75);
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    text-decoration:none; color:inherit;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
  }
.portal:hover:where(html[data-pagina="home"], html[data-pagina="home"] *) { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(255,255,255,.95); }
.portal:focus-visible:where(html[data-pagina="home"], html[data-pagina="home"] *) { outline:3px solid var(--sun); outline-offset:5px; }
.portal-sheen:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%);
    transform:translateX(-130%); transition: transform .7s ease;
  }
.portal:hover .portal-sheen:where(html[data-pagina="home"], html[data-pagina="home"] *) { transform:translateX(130%); }
.portal-icon:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    position:relative; z-index:1;
    width:50px; height:50px; border-radius:16px; display:grid; place-items:center;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 8px 18px rgba(154,88,20,.16);
  }
.portal:hover .portal-icon:where(html[data-pagina="home"], html[data-pagina="home"] *) { transform:scale(1.08) rotate(-4deg); }
.portal-icon svg:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:24px; height:24px; }
.portal--sales .portal-icon:where(html[data-pagina="home"], html[data-pagina="home"] *) { background:linear-gradient(135deg, var(--gold), var(--sun)); }
.portal--admin .portal-icon:where(html[data-pagina="home"], html[data-pagina="home"] *) { background:linear-gradient(135deg, var(--sun), var(--ember)); }
.portal--feedback .portal-icon:where(html[data-pagina="home"], html[data-pagina="home"] *) { background:linear-gradient(135deg, var(--rose), var(--gold)); }
.portal--eng .portal-icon:where(html[data-pagina="home"], html[data-pagina="home"] *) { background:linear-gradient(135deg, #3B82F6, #1D4ED8); }
.portal-copy:where(html[data-pagina="home"], html[data-pagina="home"] *) { position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.portal-label:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:11.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--ember); }
.portal-title:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:19px; letter-spacing:-.2px; color:var(--ink); }
.portal-desc:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:13.5px; color:var(--muted); line-height:1.45; }
.portal-arrow:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    position:relative; z-index:1; margin-top:auto; align-self:flex-end;
    width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
    display:grid; place-items:center; color:var(--ink); flex-shrink:0;
    transition: transform .35s ease, background .3s ease, border-color .3s ease;
  }
.portal:hover .portal-arrow:where(html[data-pagina="home"], html[data-pagina="home"] *) { transform:translateX(3px); background:rgba(255,255,255,.75); border-color:rgba(34,27,18,.16); }
.portal-arrow svg:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:16px; height:16px; }
.hub-footer:where(html[data-pagina="home"], html[data-pagina="home"] *) {
    margin-top:44px; display:flex; align-items:center; gap:9px;
    font-size:12px; color:var(--muted);
    opacity:0; animation: pagina_home_rise .7s .42s cubic-bezier(.22,1,.36,1) forwards;
  }
.hub-footer svg:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:13px; height:13px; }
.hub-footer .dot:where(html[data-pagina="home"], html[data-pagina="home"] *) { opacity:.55; }
@keyframes pagina_home_rise { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width: 880px) {
.hub:where(html[data-pagina="home"], html[data-pagina="home"] *) { padding:44px 22px 32px; }
.hub-header:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin-bottom:32px; gap:16px; }
.logo-badge:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:68px; height:68px; border-radius:18px; padding:11px; }
.brand-name:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:22px; }
.brand-tag:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:12.5px; }
.hero:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin-bottom:34px; }
.portals:where(html[data-pagina="home"], html[data-pagina="home"] *) { grid-template-columns:repeat(2,1fr); gap:14px; }
.portal:where(html[data-pagina="home"], html[data-pagina="home"] *) { flex-direction:row; align-items:center; gap:16px; padding:20px 20px; }
.portal-arrow:where(html[data-pagina="home"], html[data-pagina="home"] *) { margin-top:0; margin-left:auto; }
.blob--a:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:320px; height:320px; }
.blob--b:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:360px; height:360px; }
.blob--c:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:280px; height:280px; }

  }
@media (max-width: 480px) {
.hub:where(html[data-pagina="home"], html[data-pagina="home"] *) { padding:36px 18px 28px; }
.hub-header:where(html[data-pagina="home"], html[data-pagina="home"] *) { gap:14px; }
.logo-badge:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:60px; height:60px; border-radius:17px; padding:10px; }
.logo-fallback:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:21px; }
.brand-name:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:19px; }
.brand-tag:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:12px; }
.portals:where(html[data-pagina="home"], html[data-pagina="home"] *) { grid-template-columns:1fr; gap:12px; }
.portal:where(html[data-pagina="home"], html[data-pagina="home"] *) { padding:18px 16px; gap:14px; }
.portal-icon:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:44px; height:44px; }
.portal-icon svg:where(html[data-pagina="home"], html[data-pagina="home"] *) { width:21px; height:21px; }
.portal-title:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:17px; }
.portal-desc:where(html[data-pagina="home"], html[data-pagina="home"] *) { font-size:13px; }

  }
@media (prefers-reduced-motion: reduce) {
*:where(html[data-pagina="home"], html[data-pagina="home"] *),
*:where(html[data-pagina="home"], html[data-pagina="home"] *)::before,
*:where(html[data-pagina="home"], html[data-pagina="home"] *)::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }

  }



/* loginDashboard.html */
*:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
:root:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      --bg-void: #f5f7fa;
      --bg-panel: #ffffff;
      --bg-elevated: #f0f3f8;
      --bg-input: #f8fafc;

      --text-primary: #1a2634;
      --text-secondary: #3d4a5c;
      --text-tertiary: #6b7a8e;
      --text-muted: #9aa9bb;

      --accent-gold: #e8a730;
      --accent-amber: #d4921e;
      --accent-ember: #b56f0e;
      --accent-glow: rgba(232, 167, 48, 0.20);

      --border-line: rgba(0, 0, 0, 0.08);
      --border-line-strong: rgba(0, 0, 0, 0.14);

      --error-bg: rgba(239, 68, 68, 0.08);
      --error-text: #b91c1c;
      --error-border: rgba(239, 68, 68, 0.25);

      --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.18);
      --shadow-glow: 0 0 0 1px rgba(232, 167, 48, 0.12), 0 20px 50px -18px rgba(232, 167, 48, 0.20);

      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-xl: 28px;
      --radius-full: 9999px;

      --font-display: 'Fraunces', 'Iowan Old Style', serif;
      --font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
body:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      margin: 0;
      font-family: var(--font-sans);
      color: var(--text-primary);
      background:
        radial-gradient(900px 500px at 12% -6%, rgba(232, 167, 48, 0.10), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(181, 111, 14, 0.08), transparent 60%),
        linear-gradient(160deg, #f0f4fa 0%, #f5f7fa 60%, #eef2f7 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
    }
.container:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: min(1280px, 100%);
      border-radius: var(--radius-xl);
      background: var(--bg-panel);
      border: 1px solid var(--border-line);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      position: relative;
    }
.container:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
      opacity: 0.6;
      z-index: 1;
    }
.grid:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: grid;
      grid-template-columns: 1.15fr 0.95fr;
      min-height: 660px;
      position: relative;
    }
.left:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      padding: 60px 52px;
      background: var(--bg-panel);
      border-right: 1px solid var(--border-line);
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
.moderator-badge:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 7px 14px 7px 10px;
      background: rgba(232, 167, 48, 0.10);
      border: 1px solid rgba(232, 167, 48, 0.30);
      border-radius: var(--radius-full);
      margin-bottom: 36px;
    }
.moderator-badge svg:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 14px;
      height: 14px;
      color: var(--accent-gold);
    }
.moderator-badge span:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--accent-gold);
      text-transform: uppercase;
    }
.brand:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 44px;
    }
.logo:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: var(--bg-elevated);
      border: 1px solid var(--border-line-strong);
      overflow: hidden;
    }
.logo img:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.brand-text h1:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      margin: 0;
    }
.brand-text p:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      margin: 3px 0 0;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      color: var(--text-tertiary);
      text-transform: uppercase;
    }
.page-title:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      margin: 0 0 12px 0;
      font-family: var(--font-display);
      font-size: 2.7rem;
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.12;
      color: var(--text-primary);
    }
.page-title em:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      font-style: italic;
      color: var(--accent-gold);
    }
.page-subtitle:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      margin: 0 0 40px 0;
      color: var(--text-tertiary);
      font-size: 0.95rem;
      max-width: 40ch;
      line-height: 1.5;
    }
.login-card:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      max-width: 440px;
    }
.field:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 20px;
    }
label:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 6px;
    }
label svg:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 13px;
      height: 13px;
      color: var(--accent-gold);
    }
.input-wrapper:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: flex;
      align-items: center;
      border: 1px solid var(--border-line-strong);
      border-radius: var(--radius-md);
      padding: 4px 4px 4px 16px;
      transition: all var(--transition-base);
      background: var(--bg-input);
    }
.input-wrapper:focus-within:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      border-color: var(--accent-gold);
      box-shadow: 0 0 0 4px var(--accent-glow);
    }
input:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      border: 0;
      outline: 0;
      width: 100%;
      font-size: 0.95rem;
      font-family: var(--font-sans);
      background: transparent;
      color: var(--text-primary);
      padding: 15px 0;
    }
input:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::placeholder {
      color: var(--text-muted);
      font-size: 0.9rem;
    }
.toggle-pass:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      border: 0;
      background: transparent;
      cursor: pointer;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: var(--radius-sm);
      color: var(--text-tertiary);
      flex: 0 0 auto;
      transition: all var(--transition-fast);
    }
.toggle-pass:hover:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      color: var(--accent-gold);
      background: rgba(232, 167, 48, 0.08);
    }
.toggle-pass:focus-visible:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      outline: 2px solid var(--accent-gold);
      outline-offset: 2px;
    }
.toggle-pass svg:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 18px;
      height: 18px;
      display: block;
    }
.btn:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 100%;
      border: 0;
      border-radius: var(--radius-md);
      padding: 17px 20px;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      cursor: pointer;
      color: #1a1206;
      background: linear-gradient(135deg, var(--accent-gold), var(--accent-amber));
      box-shadow: 0 14px 28px -10px rgba(232, 167, 48, 0.45);
      transition: all var(--transition-base);
      text-transform: uppercase;
      margin-top: 14px;
      position: relative;
      overflow: hidden;
    }
.btn:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transition: left 0.5s ease;
    }
.btn:hover:not(:disabled):where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::before {
      left: 100%;
    }
.btn:hover:not(:disabled):where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px -10px rgba(232, 167, 48, 0.55);
    }
.btn:active:not(:disabled):where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      transform: translateY(0);
      box-shadow: 0 10px 20px -8px rgba(232, 167, 48, 0.40);
    }
.btn:disabled:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      opacity: 0.6;
      cursor: not-allowed;
      filter: grayscale(0.2);
    }
.btn-loading:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
.btn.is-loading .btn-text:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: none;
    }
.btn.is-loading .btn-loading:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: flex;
    }
.spinner:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 16px;
      height: 16px;
      border-radius: var(--radius-full);
      border: 2px solid rgba(26, 18, 6, 0.25);
      border-top-color: #1a1206;
      animation: pagina_loginDashboard_spin 0.8s linear infinite;
    }
@keyframes pagina_loginDashboard_spin {
      to { transform: rotate(360deg); }
    }
.error:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      margin: 16px 0 4px;
      padding: 14px 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--error-border);
      background: var(--error-bg);
      color: var(--error-text);
      font-weight: 500;
      font-size: 0.87rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }
.error svg:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
    }
.error[hidden]:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: none;
    }
.right:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      position: relative;
      background: #1a1a1a;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 52px;
      overflow: hidden;
    }
.right-bg-image:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      opacity: 1;
    }
.right-content:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      position: relative;
      z-index: 2;
      max-width: 380px;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(2px);
      padding: 32px 34px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      color: #ffffff;
    }
.right-content .eyebrow:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-gold);
      display: block;
      margin-bottom: 14px;
    }
.right-content h3:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      font-family: var(--font-display);
      font-size: 2.1rem;
      font-weight: 500;
      margin-bottom: 14px;
      line-height: 1.18;
      color: #ffffff;
    }
.right-content p:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 28px;
      line-height: 1.55;
    }
.feature-list:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
.feature-list li:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.92rem;
      color: rgba(255, 255, 255, 0.85);
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
.feature-list li:last-child:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      border-bottom: none;
      padding-bottom: 0;
    }
.feature-list li svg:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      width: 18px;
      height: 18px;
      color: var(--accent-gold);
      flex-shrink: 0;
    }
@media (max-width: 1000px) {
.grid:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
        grid-template-columns: 1fr;
      }
.right:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
        display: none;
      }
.left:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
        border-right: none;
      }

    }
@media (max-width: 600px) {
.left:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
        padding: 40px 26px;
      }
.page-title:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
        font-size: 2.1rem;
      }

    }
@keyframes pagina_loginDashboard_fadeInUp {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
.login-card:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
      animation: pagina_loginDashboard_fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
@media (prefers-reduced-motion: reduce) {
*:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *) {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }

    }
:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::-webkit-scrollbar-track {
      background: var(--bg-void);
    }
:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::-webkit-scrollbar-thumb {
      background: var(--border-line-strong);
      border-radius: var(--radius-full);
    }
:where(html[data-pagina="loginDashboard"], html[data-pagina="loginDashboard"] *)::-webkit-scrollbar-thumb:hover {
      background: var(--accent-gold);
    }

  

/* loginGeral.html */
*:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
:root:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            --bg-void: #f5f7fa;
            --bg-panel: #ffffff;
            --bg-elevated: #f0f3f8;
            --bg-input: #f8fafc;

            --text-primary: #1a2634;
            --text-secondary: #3d4a5c;
            --text-tertiary: #6b7a8e;
            --text-muted: #9aa9bb;

            --accent-gold: #e8a730;
            --accent-amber: #d4921e;
            --accent-ember: #b56f0e;
            --accent-glow: rgba(232, 167, 48, 0.20);

            --border-line: rgba(0, 0, 0, 0.08);
            --border-line-strong: rgba(0, 0, 0, 0.14);

            --error-bg: rgba(239, 68, 68, 0.08);
            --error-text: #b91c1c;
            --error-border: rgba(239, 68, 68, 0.25);

            --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.18);
            --shadow-glow: 0 0 0 1px rgba(232, 167, 48, 0.12), 0 20px 50px -18px rgba(232, 167, 48, 0.20);

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --radius-full: 9999px;

            --font-display: 'Fraunces', 'Iowan Old Style', serif;
            --font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
body:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            margin: 0;
            font-family: var(--font-sans);
            color: var(--text-primary);
            background:
                radial-gradient(900px 500px at 12% -6%, rgba(232, 167, 48, 0.10), transparent 60%),
                radial-gradient(700px 500px at 100% 100%, rgba(181, 111, 14, 0.08), transparent 60%),
                linear-gradient(160deg, #f0f4fa 0%, #f5f7fa 60%, #eef2f7 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
        }
.container:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: min(1280px, 100%);
            border-radius: var(--radius-xl);
            background: var(--bg-panel);
            border: 1px solid var(--border-line);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            position: relative;
        }
.container:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
            opacity: 0.6;
            z-index: 1;
        }
.grid:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: grid;
            grid-template-columns: 1.15fr 0.95fr;
            min-height: 660px;
            position: relative;
        }
.left:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            padding: 60px 52px;
            background: var(--bg-panel);
            border-right: 1px solid var(--border-line);
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
.profile-badge:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            padding: 7px 14px 7px 10px;
            background: rgba(232, 167, 48, 0.10);
            border: 1px solid rgba(232, 167, 48, 0.30);
            border-radius: var(--radius-full);
            margin-bottom: 36px;
        }
.profile-badge svg:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 14px;
            height: 14px;
            color: var(--accent-gold);
        }
.profile-badge span:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: var(--accent-gold);
            text-transform: uppercase;
        }
.brand:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 44px;
        }
.logo:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: var(--bg-elevated);
            border: 1px solid var(--border-line-strong);
            overflow: hidden;
        }
.logo img:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
.brand-text h1:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--text-primary);
            margin: 0;
        }
.brand-text p:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            margin: 3px 0 0;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            letter-spacing: 0.06em;
            color: var(--text-tertiary);
            text-transform: uppercase;
        }
.page-title:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            margin: 0 0 12px 0;
            font-family: var(--font-display);
            font-size: 2.7rem;
            font-weight: 500;
            letter-spacing: -0.02em;
            line-height: 1.12;
            color: var(--text-primary);
        }
.page-title em:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            font-style: italic;
            color: var(--accent-gold);
        }
.page-subtitle:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            margin: 0 0 40px 0;
            color: var(--text-tertiary);
            font-size: 0.95rem;
            max-width: 40ch;
            line-height: 1.5;
        }
.tabs:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: flex;
            gap: 6px;
            background: var(--bg-elevated);
            padding: 6px;
            border-radius: var(--radius-md);
            margin-bottom: 32px;
            max-width: 440px;
        }
.tab-btn:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            flex: 1;
            border: none;
            background: transparent;
            padding: 10px 14px;
            border-radius: var(--radius-sm);
            font-family: var(--font-sans);
            font-weight: 600;
            font-size: 0.8rem;
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-base);
            text-align: center;
        }
.tab-btn:hover:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.5);
        }
.tab-btn.active:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            background: var(--bg-panel);
            color: var(--text-primary);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
.tab-btn[data-profile="vendedor"].active:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            color: var(--accent-gold);
        }
.tab-btn[data-profile="admin"].active:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            color: var(--accent-amber);
        }
.tab-btn[data-profile="engenharia"].active:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            color: var(--accent-ember);
        }
.login-form:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: none;
            max-width: 440px;
            animation: pagina_loginGeral_fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
.login-form.active:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: block;
        }
.field:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin-bottom: 20px;
        }
label:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: var(--text-tertiary);
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }
label svg:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 13px;
            height: 13px;
            color: var(--accent-gold);
        }
.input-wrapper:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: flex;
            align-items: center;
            border: 1px solid var(--border-line-strong);
            border-radius: var(--radius-md);
            padding: 4px 4px 4px 16px;
            transition: all var(--transition-base);
            background: var(--bg-input);
        }
.input-wrapper:focus-within:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            border-color: var(--accent-gold);
            box-shadow: 0 0 0 4px var(--accent-glow);
        }
input:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            border: 0;
            outline: 0;
            width: 100%;
            font-size: 0.95rem;
            font-family: var(--font-sans);
            background: transparent;
            color: var(--text-primary);
            padding: 15px 0;
        }
input:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::placeholder {
            color: var(--text-muted);
            font-size: 0.9rem;
        }
.toggle-pass:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            border: 0;
            background: transparent;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
            flex: 0 0 auto;
            transition: all var(--transition-fast);
        }
.toggle-pass:hover:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            color: var(--accent-gold);
            background: rgba(232, 167, 48, 0.08);
        }
.toggle-pass:focus-visible:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }
.toggle-pass svg:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 18px;
            height: 18px;
            display: block;
        }
.btn:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 100%;
            border: 0;
            border-radius: var(--radius-md);
            padding: 17px 20px;
            font-family: var(--font-sans);
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 0.06em;
            cursor: pointer;
            color: #1a1206;
            background: linear-gradient(135deg, var(--accent-gold), var(--accent-amber));
            box-shadow: 0 14px 28px -10px rgba(232, 167, 48, 0.45);
            transition: all var(--transition-base);
            text-transform: uppercase;
            margin-top: 14px;
            position: relative;
            overflow: hidden;
        }
.btn:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transition: left 0.5s ease;
        }
.btn:hover:not(:disabled):where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::before {
            left: 100%;
        }
.btn:hover:not(:disabled):where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            transform: translateY(-2px);
            box-shadow: 0 18px 34px -10px rgba(232, 167, 48, 0.55);
        }
.btn:active:not(:disabled):where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            transform: translateY(0);
            box-shadow: 0 10px 20px -8px rgba(232, 167, 48, 0.40);
        }
.btn:disabled:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            opacity: 0.6;
            cursor: not-allowed;
            filter: grayscale(0.2);
        }
.btn-loading:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
.btn.is-loading .btn-text:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: none;
        }
.btn.is-loading .btn-loading:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: flex;
        }
.spinner:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 16px;
            height: 16px;
            border-radius: var(--radius-full);
            border: 2px solid rgba(26, 18, 6, 0.25);
            border-top-color: #1a1206;
            animation: pagina_loginGeral_spin 0.8s linear infinite;
        }
@keyframes pagina_loginGeral_spin {
            to {
                transform: rotate(360deg);
            }
        }
.error:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            margin: 16px 0 4px;
            padding: 14px 16px;
            border-radius: var(--radius-md);
            border: 1px solid var(--error-border);
            background: var(--error-bg);
            color: var(--error-text);
            font-weight: 500;
            font-size: 0.87rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
.error svg:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }
.error[hidden]:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: none;
        }
.right:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            position: relative;
            background: #1a1a1a;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            padding: 52px;
            overflow: hidden;
        }
.right-bg-image:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            opacity: 1;
        }
.right-content:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            position: relative;
            z-index: 2;
            max-width: 380px;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(2px);
            padding: 32px 34px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            color: #ffffff;
            transition: opacity 0.3s ease;
        }
.right-content .eyebrow:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--accent-gold);
            display: block;
            margin-bottom: 14px;
        }
.right-content h3:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            font-family: var(--font-display);
            font-size: 2.1rem;
            font-weight: 500;
            margin-bottom: 14px;
            line-height: 1.18;
            color: #ffffff;
        }
.right-content p:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 28px;
            line-height: 1.55;
        }
.feature-list:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
.feature-list li:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.92rem;
            color: rgba(255, 255, 255, 0.85);
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        }
.feature-list li:last-child:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            border-bottom: none;
            padding-bottom: 0;
        }
.feature-list li svg:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
            width: 18px;
            height: 18px;
            color: var(--accent-gold);
            flex-shrink: 0;
        }
@media (max-width: 1000px) {
.grid:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                grid-template-columns: 1fr;
            }
.right:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                display: none;
            }
.left:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                border-right: none;
            }

        }
@media (max-width: 600px) {
.left:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                padding: 40px 26px;
            }
.page-title:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                font-size: 2.1rem;
            }
.tabs:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                flex-wrap: wrap;
            }
.tab-btn:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                flex: 1 0 calc(33.33% - 6px);
                font-size: 0.7rem;
                padding: 8px 6px;
            }

        }
@keyframes pagina_loginGeral_fadeInUp {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
@media (prefers-reduced-motion: reduce) {
*:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *) {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }

        }
:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::-webkit-scrollbar-track {
            background: var(--bg-void);
        }
:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::-webkit-scrollbar-thumb {
            background: var(--border-line-strong);
            border-radius: var(--radius-full);
        }
:where(html[data-pagina="loginGeral"], html[data-pagina="loginGeral"] *)::-webkit-scrollbar-thumb:hover {
            background: var(--accent-gold);
        }

.tutorial-link:where(html[data-pagina="home"], html[data-pagina="home"] *) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 22px auto 0;
  color: #713f12;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tutorial-link:hover:where(html[data-pagina="home"], html[data-pagina="home"] *),
.tutorial-link:focus-visible:where(html[data-pagina="home"], html[data-pagina="home"] *) {
  color: #b45309;
}