/* ==========================================================
   Portal UPS — mesma estética do site (site-ups.onrender.com)
   Preto + granulado, Anton nos títulos, Barlow Condensed nos rótulos,
   Inter Tight no texto, laranja UPS nos detalhes.
   ========================================================== */
:root {
  --bg: #0B0B0C; --panel: #141416; --panel-2: #1B1B1E; --chip: #222226;
  --ink: #F2F2F2; --muted: #8C8C92; --line: rgba(242, 242, 242, .12); --line-2: rgba(242, 242, 242, .22);
  --ups: #FF6600; --ups-ink: #FF8A3D; --on-ups: #0B0B0C;
  --ok: #6AD69A; --ok-bg: rgba(106, 214, 154, .12); --no: #FF8A7A; --no-bg: rgba(255, 138, 122, .12);
  --wait: #F2CC5A; --wait-bg: rgba(242, 204, 90, .12); --info: #C9C9CF; --info-bg: rgba(255, 255, 255, .06);
  --f-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: transparent; /* o fundo fica no html, senão cobre a luz e o texto fantasma */ color: var(--ink); font: 400 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--ups); color: var(--on-ups); }
:focus-visible { outline: 2px solid var(--ups); outline-offset: 3px; }

/* granulado de filme por cima de tudo */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-6%,-2%)} 80%{transform:translate(5%,4%)} 100%{transform:translate(0,0)} }

/* luz laranja de fundo (lembra o hero do site) */
.glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glow::before, .glow::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); }
.glow::before { width: 70vmax; height: 70vmax; right: -25vmax; bottom: -35vmax; background: radial-gradient(closest-side, rgba(255, 102, 0, .55), rgba(255, 102, 0, 0)); animation: drift 18s ease-in-out infinite alternate; }
.glow::after { width: 50vmax; height: 50vmax; left: -20vmax; top: -25vmax; background: radial-gradient(closest-side, rgba(255, 102, 0, .18), rgba(255, 102, 0, 0)); animation: drift 24s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-6vmax, -4vmax) scale(1.08); } }

/* rótulos e títulos */
.label { font: 600 14px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: .7em; align-items: center; }
.label b { color: var(--ups); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ups); box-shadow: 0 0 0 0 rgba(255, 102, 0, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 102, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0); } }
.display { font: 400 clamp(56px, 9vw, 140px)/.88 var(--f-display); text-transform: uppercase; margin: 0; letter-spacing: -.005em; }
.display mark { background: none; color: var(--ups); }
.display .outline { color: transparent; -webkit-text-stroke: max(1.5px, .018em) var(--ink); }

/* pílula da marca: "entrar ↗" */
.pill-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
  padding: 6px 6px 6px 26px; font: 600 24px var(--f-cond); cursor: pointer;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.pill-btn .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--ups); display: grid; place-items: center; transition: background .35s, color .35s, transform .6s var(--ease-out); }
.pill-btn .ico svg { width: 22px; height: 22px; }
.pill-btn:hover { background: var(--ink); color: var(--on-ups); }
.pill-btn:hover .ico { background: var(--ups); color: var(--ink); transform: rotate(45deg); }
.pill-btn:disabled { opacity: .5; cursor: progress; }

/* campos */
.field { display: grid; gap: 8px; }
.field span { font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.input {
  width: 100%; font: 400 17px var(--f-body); padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--ink);
  transition: border-color .25s, background .25s;
}
.input::placeholder { color: rgba(242, 242, 242, .35); }
.input:focus { outline: none; border-color: var(--ups); background: rgba(255, 102, 0, .06); }

.logo-ups { display: block; height: 30px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* rodapé com identidade da agência (links oficiais) */
.foot a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.foot a:hover { color: var(--ups); }