/* ===================================================
   AIVACS — brilla.css
   Vitrine do Brilla na home com a identidade real do produto (papel
   #FAF8F4, teal #007563, âmbar, Fraunces/Fredoka). A hero animada do app
   roda dentro do card em um quadro "sticky" guiado pelo scroll
   (scripts/brilla-spotlight.js); no fim, esmaece enquanto o painel de
   informações sobe por cima dela.
   =================================================== */

.theme-brilla {
  --brilla-top: 72px; /* altura da navbar fixa; o JS ajusta ao valor real */
  --brilla-frame-h: calc(100vh - var(--brilla-top));
  --brilla-teal: #007563;
  --brilla-teal-dark: #005c4e;
  --brilla-ink: #1C2733;
  --brilla-muted: #5E6773;
  --brilla-line: #E6E1D8;
  --brilla-paper: #FAF8F4;
  --brilla-amber: #D9822B;
  background: linear-gradient(180deg, #F3F7F5 0%, var(--brilla-paper) 100%);
}
/* As seções do site usam overflow: hidden, que prende o sticky dentro da
   própria seção. clip corta igual, sem criar contêiner de rolagem. */
#brilla-spotlight { overflow: clip; }
@supports not (overflow: clip) {
  #brilla-spotlight { overflow: visible; }
}
@supports (height: 100svh) {
  .theme-brilla { --brilla-frame-h: calc(100svh - var(--brilla-top)); }
}

/* O card perde o padding: a hero ocupa a largura toda e o padding vai para
   o painel de informações. */
.theme-brilla .brilla-card {
  padding: 0;
  border-color: var(--brilla-line);
  box-shadow: 0 30px 70px -35px rgba(0, 92, 78, 0.3);
}
.theme-brilla .spotlight-live { border-color: var(--brilla-line); color: var(--brilla-ink); z-index: 5; }

/* Recorta a hero nos cantos arredondados. overflow: clip (e não hidden)
   para não quebrar o position: sticky do quadro. */
.brilla-clip { border-radius: 24px; overflow: clip; }
@supports not (overflow: clip) {
  .brilla-clip { overflow: visible; }
}

/* ---- Palco da hero: alto, com o quadro preso na tela enquanto rola ---- */
.brilla-stage { position: relative; height: calc(var(--brilla-frame-h) * 3); }
.brilla-frame {
  position: sticky; top: var(--brilla-top);
  height: var(--brilla-frame-h);
  overflow: hidden;
  background: #fff;
  z-index: 1;
}
.brilla-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(9% 11% round 28px);
  will-change: transform, clip-path;
}
.brilla-glow {
  position: absolute; left: 50%; top: 40%;
  width: clamp(11rem, 28vw, 20rem); height: clamp(11rem, 28vw, 20rem);
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 72%);
  filter: blur(6px);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.brilla-icon {
  position: absolute; left: 50%; top: 40%;
  width: clamp(5rem, 19vw, 11rem); height: clamp(5rem, 19vw, 11rem);
  color: var(--brilla-teal); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(255,255,255,1)) drop-shadow(0 0 42px rgba(255,255,255,0.95)) drop-shadow(0 0 95px rgba(255,255,255,0.8));
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.brilla-words {
  position: absolute; left: 0; right: 0; bottom: 6%;
  display: flex; align-items: baseline; justify-content: center; gap: clamp(0.6rem, 1.6vw, 1.25rem);
  pointer-events: none;
}
.brilla-word {
  font-family: 'Fredoka', 'DM Sans', sans-serif; font-weight: 700;
  font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: 1; color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  will-change: transform, opacity;
}
.brilla-hint {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--brilla-teal);
  font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.brilla-hint svg { animation: brilla-hint-bounce 1.6s ease-in-out infinite; }
@keyframes brilla-hint-bounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---- Painel de informações: sobe por cima do último quadro da hero ---- */
.brilla-info {
  position: relative; z-index: 2;
  margin-top: calc(var(--brilla-frame-h) * -1);
  min-height: var(--brilla-frame-h);
  display: flex; align-items: center;
  padding: 72px 56px 56px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 110px);
}
.brilla-info .spotlight-grid { width: 100%; }

/* Sem animação (acessibilidade) ou sem JS: só o painel, como nos outros apps. */
.theme-brilla.brilla-sem-animacao .brilla-stage { display: none; }
.theme-brilla.brilla-sem-animacao .brilla-info {
  margin-top: 0; min-height: 0; background: #fff; opacity: 1 !important; transform: none !important;
}

/* ---- Tipografia e cores do Brilla nos componentes .spotlight-* ---- */
.theme-brilla .spotlight-logo { background: #D5E5DF; } /* igual ao logo do produto */
.theme-brilla .spotlight-wordmark { font-family: 'Fraunces', serif; font-weight: 700; color: var(--brilla-ink); font-size: 1.3rem; }
.theme-brilla .spotlight-title { font-family: 'Fraunces', serif; font-weight: 600; color: var(--brilla-ink); letter-spacing: -0.01em; }
.theme-brilla .spotlight-tag { color: var(--brilla-teal); background: rgba(0,117,99,0.08); border-color: rgba(0,117,99,0.22); }
.theme-brilla .spotlight-accent-text,
.theme-brilla .spotlight-features li::before { color: var(--brilla-teal); }
.theme-brilla .spotlight-sub { color: var(--brilla-muted); font-family: 'DM Sans', sans-serif; }
.theme-brilla .spotlight-features li { color: var(--brilla-ink); font-family: 'DM Sans', sans-serif; }
.theme-brilla .spotlight-btn-primary { background: var(--brilla-teal); }
.theme-brilla .spotlight-btn-primary:hover { background: var(--brilla-teal-dark); box-shadow: 0 10px 24px -6px rgba(0,117,99,0.45); }
.theme-brilla .spotlight-mock { background: var(--brilla-paper); border-color: var(--brilla-line); }
.theme-brilla .spotlight-mock-bar { border-color: var(--brilla-line); }
.theme-brilla .spotlight-mock-row { border-color: var(--brilla-line); }
.theme-brilla .spotlight-mock-icon { background: rgba(0,117,99,0.1); color: var(--brilla-teal); }
.theme-brilla .spotlight-mock-icon-done { background: rgba(217,130,43,0.14); color: var(--brilla-amber); }
.theme-brilla .spotlight-mock-progress { background: #ECE8E0; }
.theme-brilla .spotlight-mock-progress-fill { background: var(--brilla-teal); }
.theme-brilla .spotlight-mock-progress-done { background: var(--brilla-amber); }
.theme-brilla .spotlight-mock-row-value { color: var(--brilla-ink); }
.theme-brilla .spotlight-mock-row-value-done { color: var(--brilla-amber); }

/* Dois botões de demo (cliente e profissional) */
.brilla-demos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; max-width: 520px; }
.brilla-demo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--brilla-line); background: #fff; color: var(--brilla-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.brilla-demo:hover { border-color: var(--brilla-teal); box-shadow: 0 10px 24px -14px rgba(0,117,99,0.5); transform: translateY(-2px); }
.brilla-demo-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,117,99,0.1); color: var(--brilla-teal);
}
.brilla-demo-text { display: flex; flex-direction: column; min-width: 0; font-family: 'DM Sans', sans-serif; }
.brilla-demo-text strong { font-size: 0.92rem; font-weight: 700; }
.brilla-demo-text small { font-size: 0.74rem; color: var(--brilla-muted); }

@media (max-width: 900px) {
  .brilla-info { padding: 64px 24px 40px; align-items: flex-start; }
}
@media (max-width: 520px) {
  .brilla-info { padding: 56px 18px 32px; }
  .brilla-demos { grid-template-columns: 1fr; }
  .brilla-hint { font-size: 0.72rem; padding: 7px 12px; }
  .brilla-word { font-size: clamp(2.1rem, 11vw, 3rem); }
  .brilla-words { bottom: 9%; }
}