/* =========================================================
   KIT VISUAL LIRA — VIDRO (fundo branco)
   Extraído do site www.escritoriolira.com.br (outubro/2026).
   Todas as classes começam com "lv-" para não conflitar com
   estilos que já existem no app.
   ========================================================= */

:root {
  --lv-bg: #FFFFFF;
  --lv-soft: #F3F7FB;
  --lv-ink: #0F2A40;        /* títulos */
  --lv-text: #3E4F5E;       /* texto corrido */
  --lv-muted: #5E6E7E;      /* texto secundário */
  --lv-accent: #0068A8;     /* links e rótulos */
  --lv-blue: #0075BD;       /* azul oficial da marca */
  --lv-blue-lit: #2E9BE6;   /* azul de brilho */
  --lv-sky: #9ACAEE;        /* azul-claro da marca */
  --lv-night: #06111C;      /* blocos escuros */
  --lv-glass: rgba(255,255,255,.62);
  --lv-edge: rgba(0,117,189,.14);
  --lv-edge-strong: rgba(0,117,189,.30);
  --lv-shadow: 0 18px 44px rgba(18,51,74,.10);
  --lv-grad: linear-gradient(100deg, #0F2A40 0%, #0075BD 55%, #2E9BE6 100%);
  --lv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, Arial, Helvetica, sans-serif;
  --lv-r: 24px;
}

/* Fundo com brilhos azuis suaves (aplicar no body ou num container) */
.lv-fundo { background: radial-gradient(60% 40% at 85% 10%, rgba(0,117,189,.08), transparent 70%), radial-gradient(50% 40% at 0% 70%, rgba(46,155,230,.07), transparent 70%), var(--lv-bg); color: var(--lv-text); font-family: var(--lv-font); }

/* 1) Vidro translúcido + luz que segue o mouse (precisa do lira-vidro.js) */
.lv-vidro { position: relative; background: var(--lv-glass); border: 1px solid var(--lv-edge); border-radius: var(--lv-r); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--lv-shadow); }
.lv-vidro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(46,155,230,.14), transparent 45%); }
.lv-vidro:hover::after { opacity: 1; }

/* 2) Botões */
.lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 0; font: 600 15px/1.2 var(--lv-font); text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.lv-btn-brilho { background: linear-gradient(180deg, #2E9BE6, #0075BD); color: #FFFFFF; box-shadow: 0 0 0 1px rgba(154,202,238,.35) inset, 0 10px 30px rgba(0,117,189,.35), 0 0 40px rgba(46,155,230,.18); }
.lv-btn-brilho:hover { transform: translateY(-2px); color: #FFFFFF; box-shadow: 0 0 0 1px rgba(154,202,238,.5) inset, 0 14px 36px rgba(0,117,189,.45), 0 0 60px rgba(46,155,230,.28); }
.lv-btn-vidro { background: rgba(255,255,255,.7); border: 1px solid var(--lv-edge-strong); color: var(--lv-ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lv-btn-vidro:hover { border-color: var(--lv-blue-lit); }
.lv-btn svg { transition: transform .2s ease; }
.lv-btn:hover svg { transform: translateX(3px); }

/* 3) Título com degradê azul (o padding evita cortar g, ç, j, p) */
.lv-grad { background: var(--lv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .2em; margin-bottom: -.2em; }

/* 4) Etiqueta com ponto de luz */
.lv-rotulo { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--lv-accent); }
.lv-rotulo i { width: 8px; height: 8px; border-radius: 50%; background: #2E9BE6; box-shadow: 0 0 12px #2E9BE6; }

/* 5) Ícone em círculo de vidro com anel girando, flutuação e brilho
      Uso: <span class="lv-icone"><svg ...></svg></span>
      Importante: nenhuma regra "span { display:block }" pode pegar este elemento. */
.lv-icone { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--lv-blue); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(154,202,238,.45) 55%, rgba(46,155,230,.25)); border: 1px solid rgba(0,117,189,.22); box-shadow: 0 8px 22px rgba(0,117,189,.18), 0 0 0 6px rgba(46,155,230,.06); transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease, box-shadow .3s ease; animation: lv-pulsar 3.2s ease-in-out infinite; }
.lv-icone::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(46,155,230,0) 0deg, #2E9BE6 70deg, rgba(154,202,238,.6) 110deg, rgba(46,155,230,0) 180deg, rgba(46,155,230,0) 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: lv-girar 4.5s linear infinite; }
.lv-icone svg { width: 30px; height: 30px; animation: lv-flutuar 3.6s ease-in-out infinite; }
.lv-icone:hover { transform: scale(1.12); }
.lv-icone:hover::before { animation-duration: 1.4s; }
.lv-icone-p { width: 44px; height: 44px; }           /* versão pequena */
.lv-icone-p svg { width: 22px; height: 22px; }
/* Defasagem: deixe cada ícone num tempo diferente */
.lv-atraso-1, .lv-atraso-1 svg { animation-delay: -.9s; }
.lv-atraso-2, .lv-atraso-2 svg { animation-delay: -1.8s; }
.lv-atraso-3, .lv-atraso-3 svg { animation-delay: -2.7s; }

/* 6) Cartão que inclina em 3D (precisa do lira-vidro.js; use em cartões clicáveis) */
.lv-inclina { transition: transform .25s ease, box-shadow .3s ease; transform-style: preserve-3d; }
.lv-inclina:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--lv-shadow), 0 0 50px rgba(0,117,189,.14); }

/* 7) Entrada ao rolar: visível por padrão; o script esconde só se puder animar */
.lv-surge { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.lv-surge.lv-antes { opacity: 0; transform: translateY(28px); }

/* 8) Bloco escuro de destaque */
.lv-bloco-escuro { position: relative; border-radius: 28px; overflow: hidden; background: var(--lv-night); color: #C9D6E0; box-shadow: 0 30px 70px rgba(6,17,28,.25); }
.lv-bloco-escuro h2, .lv-bloco-escuro h3 { color: #FFFFFF; }
.lv-pilula { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(154,202,238,.35); background: rgba(255,255,255,.06); color: #F2F7FB; font-size: 15px; }

@keyframes lv-girar { to { transform: rotate(360deg); } }
@keyframes lv-flutuar { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-2.5px); } }
@keyframes lv-pulsar { 0%, 100% { box-shadow: 0 8px 22px rgba(0,117,189,.18), 0 0 0 6px rgba(46,155,230,.06); } 50% { box-shadow: 0 8px 26px rgba(0,117,189,.26), 0 0 0 10px rgba(46,155,230,.09); } }

/* Quem desativa animações no sistema vê tudo parado */
@media (prefers-reduced-motion: reduce) {
  .lv-icone, .lv-icone::before, .lv-icone svg { animation: none; }
  .lv-surge, .lv-inclina, .lv-btn, .lv-btn svg, .lv-icone { transition: none; }
  .lv-surge.lv-antes { opacity: 1; transform: none; }
}