/* Exemplo editorial local: clichês de IA exagerados intencionalmente. */
@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/inter-latin-variable.woff2') format('woff2');
}
:root {
  color-scheme:dark;
  --slop-bg:#050307;
  --slop-ink:#fff;
  --slop-muted:#d4c8e8;
  --slop-purple:#a855f7;
  --slop-line:#b080f04d;
  --slop-radius:24px;
  --slop-glow:0 0 40px #a02bff66;
  --slop-motion:240ms ease;
}
*,*::before,*::after { box-sizing:border-box }
body { margin:0; background:var(--slop-bg); color:var(--slop-ink); font:16px/1.6 Inter,Arial,sans-serif }
a { color:inherit; text-decoration:none }
img,svg { display:block; max-width:100% }
button,input,textarea,select { font:inherit }
.content-wrapper { width:min(1248px,calc(100% - 64px)); margin-inline:auto }
a:focus-visible { outline:3px solid #f0baff; outline-offset:6px }
.slop-header { position:relative; z-index:2; min-height:104px; display:flex; justify-content:space-between; align-items:center; gap:32px; border-bottom:1px solid #ffffff14 }
.slop-brand { display:flex; align-items:center; gap:12px; font-size:24px; font-weight:700; letter-spacing:-.03em; line-height:1.15 }
.slop-brand__symbol { display:grid; place-items:center; width:44px; height:44px; border:1px solid #e1b6ff66; border-radius:12px; font-size:36px; background:linear-gradient(135deg,#7c3aed,#c026d3); box-shadow:var(--slop-glow) }
.slop-brand__suffix { display:block; font-size:12px; font-weight:400; letter-spacing:.16em; color:var(--slop-muted); margin-top:4px }
.slop-nav { display:flex; gap:32px; color:var(--slop-muted); font-size:14px }
.slop-nav a { transition:color var(--slop-motion),text-shadow var(--slop-motion) }
.slop-nav a:hover { color:#fff; text-shadow:0 0 16px #cd84ff }
.slop-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:16px 28px; border:1px solid #e2afff66; border-radius:999px; background:linear-gradient(110deg,#7928ee,#b923eb 65%,#db37bb); box-shadow:0 0 28px #962cff66,inset 0 1px #ffffff40; font-size:14px; font-weight:700; white-space:nowrap; transition:transform var(--slop-motion),box-shadow var(--slop-motion) }
.slop-button:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 0 52px #b32fffaa,inset 0 1px #ffffff70 }
.slop-button--small { padding:12px 24px; font-size:12px }
.slop-button--secondary { background:#21102f99; border-color:#d09dff55; box-shadow:inset 0 1px #ffffff18; backdrop-filter:blur(16px) }
.slop-hero { position:relative; isolation:isolate; overflow:hidden; min-height:calc(100svh - 104px); background:radial-gradient(ellipse at 50% 86%,#a100e5a6 0%,#7515d75c 24%,transparent 62%),radial-gradient(ellipse at 12% 36%,#671cf24d,transparent 43%),radial-gradient(ellipse at 90% 25%,#c51ba42b,transparent 40%),#050307 }
.slop-hero__grid { position:absolute; inset:0; z-index:-1; opacity:.25; background-image:linear-gradient(#c079ff26 1px,transparent 1px),linear-gradient(90deg,#c079ff26 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(transparent,#000 50%,transparent) }
.slop-hero__content { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:48px; min-height:calc(100svh - 104px); padding-block:72px; text-align:left }
.slop-hero__copy { min-width:0 }
.slop-pill { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:8px 16px; border:1px solid var(--slop-line); border-radius:999px; background:#9f56d51a; color:#eddaff; font-size:12px; backdrop-filter:blur(12px); box-shadow:inset 0 1px #ffffff0f; transition:transform var(--slop-motion),background var(--slop-motion),box-shadow var(--slop-motion) }
.slop-pill:hover { transform:translateY(-8px) scale(1.08) rotate(-2deg); background:#9c3fea55; box-shadow:0 0 32px #b62dff80 }
.slop-kicker { letter-spacing:.2em; font-size:10px; font-weight:700 }
.slop-dot { width:8px; height:8px; border-radius:50%; background:#d5a2ff; box-shadow:0 0 12px #d5a2ff }
h1 { margin:28px auto 24px; max-width:1100px; font-size:clamp(40px,4.5vw,64px); line-height:1.08; font-weight:700; letter-spacing:-.04em; text-wrap:balance }
h1 span { color:#dfadff; background:linear-gradient(90deg,#c29aff,#ee88f8 55%,#a774ff); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 24px #b13dff4d) }
.slop-lead { max-width:696px; margin:0 auto; color:var(--slop-muted); font-size:16px; line-height:1.8; text-wrap:pretty }
.slop-tags { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; margin:24px 0 28px }
.slop-actions { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:16px }
.slop-caption { margin:20px 0 0; color:var(--slop-muted); font-size:12px }
.slop-caption span { color:#d6a3ff; margin-right:8px }
.slop-star { position:absolute; color:#d4a2ff; text-shadow:0 0 24px #c73cff; transition:transform var(--slop-motion),filter var(--slop-motion) }
.slop-star:hover { transform:rotate(90deg) scale(1.8); filter:drop-shadow(0 0 16px #fff) }
.slop-star--one { top:12%; left:9%; font-size:32px }
.slop-star--two { top:36%; right:7%; font-size:52px }
.slop-star--three { top:57%; left:18%; font-size:20px }
.slop-showcase { position:relative; width:100%; height:480px; min-width:0; margin:0 }
.slop-orb { position:absolute; left:50%; top:140px; width:224px; aspect-ratio:1; transform:translateX(-50%); display:grid; place-items:center; border-radius:50%; border:1px solid #f2c3ff99; background:radial-gradient(circle at 30% 25%,#f5c4ff,#b14ffa 28%,#7716e2 52%,#260843 80%); box-shadow:inset -20px -16px 32px #180031,0 0 64px #b42bffaa,0 0 140px #9824ff66; transition:filter var(--slop-motion) }
.slop-orb span { font-size:116px; text-shadow:0 0 24px #fff8; line-height:1 }
.slop-orb:hover { filter:hue-rotate(40deg) brightness(1.4) }
.slop-orbit { position:absolute; width:440px; height:144px; left:50%; top:176px; border:1px solid #d1a0ff66; border-radius:50%; transform:translateX(-50%) rotate(-20deg); box-shadow:0 0 20px #a73aff33 }
.slop-orbit--two { transform:translateX(-50%) rotate(20deg); width:400px }
.slop-float { position:absolute; z-index:1; display:flex; align-items:center; gap:16px; padding:20px; border:1px solid #d09aff55; border-radius:var(--slop-radius); background:linear-gradient(125deg,#4c256799,#180d2ecc); box-shadow:0 16px 48px #0005,inset 0 1px #fff2; backdrop-filter:blur(20px); text-align:left; transition:transform var(--slop-motion),box-shadow var(--slop-motion),border-color var(--slop-motion) }
.slop-float:hover { transform:translateY(-16px) rotate(-4deg) scale(1.08); box-shadow:0 0 56px #c031ff88; border-color:#ecb5ff }
.slop-float--left { left:0; top:24px; transform:rotate(-5deg) }
.slop-float--right { right:0; top:344px; transform:rotate(5deg) }
.slop-float__icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid #f0c0ff55; border-radius:12px; background:linear-gradient(135deg,#a334f5,#d65cf23d); font-size:28px }
.slop-float small { display:block; color:#e6c9ff; font-size:8px; letter-spacing:.16em }
.slop-float strong { display:block; margin:4px 0; font-size:14px }
.slop-float div>span { color:var(--slop-muted); font-size:10px }
.slop-float__arrow { color:#e2b1ff }
.slop-showcase__label { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:8px; letter-spacing:.16em; white-space:nowrap }
.slop-showcase__label:hover { transform:translateX(-50%) translateY(-8px) scale(1.08) }
@media(max-width:991px) {
  .slop-hero__content { grid-template-columns:minmax(0,1fr); gap:32px; padding-block:48px 24px; text-align:center }
  .slop-hero__copy { max-width:720px; margin-inline:auto }
  .slop-tags,.slop-actions { justify-content:center }
  .slop-showcase { max-width:640px; height:400px; margin-inline:auto }
  .slop-orb { top:104px }
  .slop-orbit { top:144px }
  .slop-nav { gap:20px; font-size:12px }
  .slop-float { padding:16px; gap:12px }
  .slop-float__icon { display:none }
  .slop-float--left { left:0; top:36px }
  .slop-float--right { top:260px }
}
@media(max-width:767px) {
  .content-wrapper { width:calc(100% - 40px) }
  .slop-header { min-height:88px; gap:12px }
  .slop-brand { font-size:20px; gap:8px }
  .slop-brand__symbol { width:36px; height:36px; font-size:28px }
  .slop-brand__suffix { font-size:8px }
  .slop-nav { display:none }
  .slop-button--small { padding:12px 16px; font-size:10px; gap:8px }
  .slop-hero { min-height:calc(100svh - 88px) }
  .slop-hero__content { padding-block:40px 16px; gap:0 }
  .slop-kicker { font-size:8px; letter-spacing:.12em }
  h1 { font-size:clamp(36px,8.4vw,60px); margin:24px auto }
  .slop-lead { font-size:14px; max-width:480px }
  .slop-tags { gap:8px; margin:24px 0 }
  .slop-tags .slop-pill { font-size:10px; padding:8px 12px; gap:8px }
  .slop-actions { gap:12px }
  .slop-button { padding:16px 20px; font-size:12px; gap:12px }
  .slop-button--small { padding:12px 16px; font-size:10px }
  .slop-caption { font-size:10px }
  .slop-showcase { height:344px; margin-top:32px }
  .slop-orb { top:64px; width:156px }
  .slop-orb span { font-size:96px }
  .slop-orbit { width:280px; height:112px; top:84px }
  .slop-orbit--two { width:260px }
  .slop-float--left { top:0; left:0 }
  .slop-float--right { top:220px; right:0 }
  .slop-float strong { font-size:12px }
  .slop-star--one { top:32%; left:3%; font-size:20px }
  .slop-star--two { top:48%; right:2%; font-size:28px }
  .slop-star--three { display:none }
  .slop-showcase__label { bottom:0 }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important }
  .slop-pill:hover,.slop-button:hover,.slop-float:hover,.slop-star:hover { transform:none }
  .slop-showcase__label:hover { transform:translateX(-50%) }
  .slop-orb:hover { filter:none }
}