/* Base visual "Pérola e tinta" compartilhada pelo app e pelo painel. */
:root {
  --perola: #F7F1EC;
  --blush: #EBD3CA;
  --champanhe: #E2C6A6;
  --lilas: #DCD3E3;
  --rose-gold: #B98B7A;
  --rose-gold-escuro: #9A6E5F;
  --tinta: #3A2A33;
  --tinta-suave: #6E5A63;
  --erro: #A04A4A;

  --serifa: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;

  --texto: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --miudo: 0.74rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lento: 900ms;
  --medio: 450ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  background: var(--perola);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Luz ambiente que flutua devagar */
.luz { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.luz span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; will-change: transform; }
.luz .a { width: 60vmax; height: 60vmax; background: var(--blush); top: -22vmax; left: -18vmax; animation: flutua-a 34s var(--ease) infinite alternate; }
.luz .b { width: 50vmax; height: 50vmax; background: var(--champanhe); bottom: -20vmax; right: -16vmax; animation: flutua-b 40s var(--ease) infinite alternate; }
.luz .c { width: 34vmax; height: 34vmax; background: var(--lilas); top: 38%; left: 52%; opacity: .55; animation: flutua-c 46s var(--ease) infinite alternate; }
@keyframes flutua-a { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes flutua-b { to { transform: translate(-7vmax, -5vmax) scale(1.06); } }
@keyframes flutua-c { to { transform: translate(-12vmax, 4vmax) scale(.92); } }

/* Grao sutil de papel */
.grao {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .18; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .35  0 0 0 0 .38  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.marca { font-family: var(--serifa); font-weight: 500; letter-spacing: .01em; line-height: 1.1; }
.marca em { font-style: italic; font-weight: 400; color: var(--rose-gold); }

/* Botao de vidro */
.vidro {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; color: var(--tinta); cursor: pointer; text-decoration: none;
  background: linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.16));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(185,139,122,.18),
    0 10px 24px -12px rgba(58,42,51,.3);
  transition: transform var(--medio) var(--ease), box-shadow var(--medio) var(--ease), opacity var(--medio) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.vidro::after {
  content: ""; position: absolute; inset: -40% -60%; z-index: -1;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
  transform: translateX(-70%);
  transition: transform var(--lento) var(--ease);
}
.vidro:hover::after, .vidro:focus-visible::after { transform: translateX(70%); }
.vidro:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(185,139,122,.2), 0 16px 30px -14px rgba(58,42,51,.35); }
.vidro:active { transform: scale(.96); transition-duration: 120ms; }
.vidro:focus-visible { outline: 1.5px solid var(--rose-gold); outline-offset: 3px; }
.vidro[aria-disabled="true"], .vidro:disabled { opacity: .45; pointer-events: none; }

.redondo { width: 3.25rem; height: 3.25rem; border-radius: 50%; }
.redondo svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pilula { min-height: 3.25rem; padding: 0 1.6rem; border-radius: 999px; font-size: var(--miudo); letter-spacing: .26em; text-transform: uppercase; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .luz span { animation: none; }
  .vidro, .vidro::after { transition: opacity 200ms linear; }
}