/* Calculadora do Storymaker: identidade do IA no Real Time (cores e fontes da LP) */
@font-face { font-family: "Beni"; src: url("/assets/fonts/beni-black-completa.woff2") format("woff2"); font-weight: 900; font-display: swap }
@font-face { font-family: "Clash Grotesk"; src: url("/assets/fonts/clash-grotesk-medium-completa.woff2") format("woff2"); font-weight: 500; font-display: swap }
@font-face { font-family: "Clash Grotesk"; src: url("/assets/fonts/clash-grotesk-bold-completa.woff2") format("woff2"); font-weight: 700; font-display: swap }

:root {
  color-scheme: light;
  --bg: #FFF8F6;
  --surface: #FFFFFF;
  --ink: #2A1420;
  --muted: #7A5C69;
  --line: #F2D5E2;
  --rosa: #DB3C8A;
  --rosa-claro: #F29EBD;
  --rosa-soft: #FCE4EF;
  --verde: #00522D;
  --verde-escuro: #003A20;
  --field: #FFF3F7;
  --c-rem: #F29EBD;
  --c-desp: #FFC56E;
  --c-custo: #9FD8B8;
  --c-marg: #FFF8F6;
  --c-imp: #5E8B74;
  --display: "Beni", "Arial Narrow", Impact, sans-serif;
  --body: "Clash Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 500 15px/1.5 var(--body);
  background:
    radial-gradient(60vw 50vw at -10% -10%, #FBD3E3 0%, rgba(251, 211, 227, 0) 60%),
    radial-gradient(50vw 45vw at 110% 105%, #FBD3E3 0%, rgba(251, 211, 227, 0) 60%),
    var(--bg);
  background-attachment: fixed;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100% }
button { font: inherit; cursor: pointer }
a { color: var(--rosa) }

.eyebrow { font-weight: 700; color: var(--verde); font-size: 14px; letter-spacing: -.01em }
.display { font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--rosa); line-height: .9; letter-spacing: .01em; margin: 0 }
.display em { font-style: normal; color: var(--rosa-claro) }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rosa); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 22px; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(219, 60, 138, .7); transition: transform .15s, filter .15s;
}
.pill:hover { filter: brightness(1.06); transform: translateY(-1px) }
.pill:disabled { opacity: .55; cursor: default; transform: none }
.pill.light { background: var(--rosa-claro); color: var(--ink) }
.link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-weight: 500 }
.link:hover { color: var(--rosa) }

.in { display: flex; align-items: center; background: var(--field); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .15s, box-shadow .15s }
.in:focus-within { border-color: var(--rosa); box-shadow: 0 0 0 4px var(--rosa-soft) }
.in span { padding: 0 12px; color: var(--muted); font-weight: 700; font-size: 13px; white-space: nowrap }
.in input, .in select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 700 16px var(--body); padding: 12px; outline: none; font-variant-numeric: tabular-nums }
.in span + input { padding-left: 0 }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }