/* =============================================================================
   Flavio Seguros — CSS compartilhado do site (reveal, blobs, responsivo).
   Complementa o styles.css do design system. Linkado por todas as páginas.
   ============================================================================= */
html, body { margin: 0; }
body { background: var(--surface-page); scroll-behavior: smooth; }
:root { --header-h: 92px; }
a { color: var(--text-link); }
a:hover { color: var(--blue-800); }
.fcs-flink { color: var(--blue-200); transition: color .2s var(--ease-standard); }
.fcs-flink:hover { color: var(--gold-300); }
.fcs-flink--muted { color: var(--neutral-400); }

/* =============================================================================
   LIQUID GLASS — material de vidro multicamadas (refração + edge light +
   especular + espessura + ruído). Inspirado na linguagem da Apple.
   Uso: <div class="fcs-glass is-light|is-dark"> [5 spans de camada] conteúdo </div>
   ============================================================================= */
.fcs-glass { position: relative; overflow: hidden; isolation: isolate; transition: box-shadow var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.fcs-glass > .glassL { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* 1. Refração: desloca e borra o conteúdo atrás (lente de vidro) */
.fcs-glass-refract { backdrop-filter: blur(14px) saturate(1.8) brightness(1.02) url(#fcs-glass-distort); -webkit-backdrop-filter: blur(14px) saturate(1.8); }
/* 2. Corpo translúcido + espessura (inner shadow) */
.fcs-glass-tint { transition: background var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard); }
/* 3. Borda lapidada (anel de luz de 1.25px via máscara) */
.fcs-glass-edge { padding: 1.25px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: background var(--dur-slow) var(--ease-standard); }
/* 4. Brilho especular (desloca com o scroll via --spec-x) */
.fcs-glass-spec { background: radial-gradient(130% 95% at var(--spec-x, 28%) -35%, rgba(255,255,255,0.55), rgba(255,255,255,0.14) 30%, rgba(255,255,255,0) 58%); mix-blend-mode: screen; transition: opacity var(--dur-slow) var(--ease-standard); }
/* 5. Ruído extremamente sutil (quebra o aspecto plástico) */
.fcs-glass-noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 150px 150px; opacity: 0.045; mix-blend-mode: overlay; }

/* --- Estado claro (rolado, sobre conteúdo claro) --- */
.fcs-glass.is-light { box-shadow: 0 12px 36px rgba(8,36,62,0.16), 0 3px 10px rgba(8,36,62,0.08); }
.fcs-glass.is-light .fcs-glass-tint { background: linear-gradient(177deg, rgba(255,255,255,0.42), rgba(255,255,255,0.24)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -11px 22px rgba(8,36,62,0.09), inset 0 0 0 0.5px rgba(255,255,255,0.4); }
.fcs-glass.is-light .fcs-glass-edge { background: linear-gradient(140deg, rgba(255,255,255,0.98), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.6)); }
.fcs-glass.is-light .fcs-glass-spec { opacity: 0.8; }

/* --- Topo: mesmo vidro, porém mais transparente (deixa o fundo aparecer) --- */
.fcs-glass.is-top { box-shadow: 0 10px 30px rgba(8,36,62,0.10); }
.fcs-glass.is-top .fcs-glass-tint { background: linear-gradient(177deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -11px 22px rgba(8,36,62,0.06), inset 0 0 0 0.5px rgba(255,255,255,0.22); }

/* --- Estado escuro (topo, sobre a hero escura) --- */
.fcs-glass.is-dark { box-shadow: 0 16px 46px rgba(0,0,0,0.36), 0 4px 12px rgba(0,0,0,0.24); }
.fcs-glass.is-dark .fcs-glass-tint { background: linear-gradient(177deg, rgba(28,52,84,0.32), rgba(8,20,38,0.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -13px 24px rgba(0,0,0,0.30), inset 0 0 0 0.5px rgba(255,255,255,0.14); }
.fcs-glass.is-dark .fcs-glass-edge { background: linear-gradient(140deg, rgba(255,255,255,0.72), rgba(255,255,255,0.06) 42%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.34)); }
.fcs-glass.is-dark .fcs-glass-spec { opacity: 0.55; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fcs-glass.is-light .fcs-glass-tint { background: rgba(255,255,255,0.92); }
  .fcs-glass.is-dark .fcs-glass-tint { background: rgba(14,32,56,0.86); }
}

/* Reveal ao rolar (transform + opacity, GPU) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* Blobs orgânicos — deriva lenta */
@keyframes fcsFloatA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(28px,34px,0) scale(1.08); } }
@keyframes fcsFloatB { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-32px,22px,0) scale(1.1); } }
@keyframes fcsFloatC { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(24px,-30px,0) scale(0.94); } }
.fcs-blob-a { animation: fcsFloatA 30s ease-in-out infinite; }
.fcs-blob-b { animation: fcsFloatB 38s ease-in-out infinite; }
.fcs-blob-c { animation: fcsFloatC 26s ease-in-out infinite; }

.fcs-burger { display: none; }

/* Utilitário: par de campos/opções que encolhe e empilha em telas estreitas */
.fcs-2col > * { min-width: 0; }
@media (max-width: 560px) { .fcs-2col { grid-template-columns: 1fr !important; } }

/* --- Responsivo --------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1180px) {
  .fcs-seg-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .fcs-part-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 980px) {
  .fcs-desknav, .fcs-deskcta { display: none !important; }
  .fcs-burger { display: inline-flex !important; }
  .fcs-hero-grid, .fcs-about-grid, .fcs-faq-grid, .fcs-contato-grid,
  .fcs-prod-grid, .fcs-support-grid, .fcs-quote-grid { grid-template-columns: 1fr !important; }
  .fcs-hero-grid > *, .fcs-about-grid > *, .fcs-faq-grid > *, .fcs-contato-grid > *,
  .fcs-prod-grid > *, .fcs-support-grid > *, .fcs-quote-grid > * { min-width: 0 !important; }
  .fcs-stats-grid { grid-template-columns: repeat(2, 1fr) !important; row-gap: 28px !important; }
  .fcs-stats-grid > div { border-left: none !important; padding: 4px 12px !important; }
  .fcs-seg-grid-3, .fcs-seg-grid-4, .fcs-steps-grid, .fcs-dep-grid, .fcs-modlist,
  .fcs-blog-grid, .fcs-values-grid { grid-template-columns: 1fr !important; }
  .fcs-tl-row { grid-template-columns: 76px 1fr !important; gap: 16px !important; }
  .fcs-tl-line { left: 92px !important; }
  .fcs-part-grid .fcs-logoplate { flex: 0 0 calc((100% - 32px) / 3) !important; min-width: 0 !important; }
  .fcs-part-grid .fcs-mlogo { max-width: 100% !important; }
  .fcs-footer-grid { grid-template-columns: 1fr 1fr !important; }
  .fcs-footer-grid > * { min-width: 0 !important; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  .fcs-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .fcs-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; }
  .fcs-footer-grid > * { min-width: 0 !important; overflow-wrap: anywhere; }
  .fcs-footer-grid > *:first-child { grid-column: 1 / -1 !important; max-width: none !important; }
  .fcs-part-grid .fcs-logoplate { flex: 0 0 calc((100% - 16px) / 2) !important; min-width: 0 !important; padding: 0 14px !important; }
  .fcs-part-grid .fcs-mlogo { max-width: 100% !important; }
  .fcs-seg-grid-3, .fcs-seg-grid-4, .fcs-steps-grid { grid-template-columns: 1fr !important; }
}

/* =============================================================================
   Camada cinematográfica (GSAP/Lenis) — usada na Home evoluída.
   Progressive enhancement: estados escondidos só existem sob html.fcs-motion.
   ============================================================================= */
/* Rise — entrada discreta (fade + subida + leve blur). */
html.fcs-motion .rise { opacity: 0; transform: translateY(26px); filter: blur(6px); will-change: opacity, transform, filter; }

/* Máscara de headline — linhas reveladas de baixo para cima. */
[data-mask] .ml { display: block; overflow: hidden; padding-bottom: 0.04em; }
html.fcs-motion [data-mask] .ml > span { display: block; transform: translateY(112%); will-change: transform; }

/* Intro do herói — garante aparição mesmo acima da dobra. */
@keyframes fcsHin { to { opacity: 1; transform: none; } }
html.fcs-motion .fcs-hin { opacity: 0; transform: translateY(18px); animation: fcsHin 0.85s var(--ease-out) forwards; }

/* Cursor discreto (só desktop; anel que segue o ponteiro). */
.fcs-cursor-ring { position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1.5px solid var(--ring-c, #fff); border-radius: 50%; pointer-events: none; z-index: 9999; box-shadow: 0 0 0 1px rgba(10,25,45,0.14); transition: width .28s var(--ease-out), height .28s var(--ease-out), border-color .25s var(--ease-out); }
.fcs-cursor-ring.is-hover { width: 58px; height: 58px; }

/* Fade suave para conteúdo remontado (depoimento rotativo). */
@keyframes fcsFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fcs-fade { animation: fcsFade 0.7s var(--ease-out) both; }

/* Linhas de seguros (editorial). */
.fcs-segrow { transition: background var(--dur-normal) var(--ease-standard); }
.fcs-segrow:hover { background: var(--surface-subtle); }
.fcs-segrow-ic { transition: background var(--dur-normal) var(--ease-standard), border-color var(--dur-normal), color var(--dur-normal), transform var(--dur-normal); }
.fcs-segrow:hover .fcs-segrow-ic { background: var(--blue-800); border-color: var(--blue-800); color: var(--neutral-0); }
.fcs-segrow-ic svg { stroke: var(--blue-700); transition: stroke var(--dur-normal) var(--ease-standard); }
.fcs-segrow:hover .fcs-segrow-ic svg { stroke: var(--neutral-0); }
.fcs-segrow:hover .fcs-segrow-title { color: var(--blue-800); }
.fcs-segrow-arw { transition: transform var(--dur-normal) var(--ease-standard); }
.fcs-segrow:hover .fcs-segrow-arw { transform: translateX(5px); }

/* Card em destaque (featured). */
.fcs-feat { display: block; }
.fcs-feat .fcs-feat-img { transition: transform 0.9s var(--ease-out); will-change: transform; }
.fcs-feat:hover .fcs-feat-img { transform: scale(1.04); }
.fcs-feat .fcs-feat-arw { transition: transform var(--dur-normal) var(--ease-standard); }
.fcs-feat:hover .fcs-feat-arw { transform: translateX(5px); }

/* Marquee de seguradoras. */
.fcs-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fcs-marquee-track { display: flex; gap: 18px; width: max-content; animation: fcsMarquee 42s linear infinite; }
.fcs-marquee:hover .fcs-marquee-track { animation-play-state: paused; }
@keyframes fcsMarquee { to { transform: translateX(-50%); } }
.fcs-mchip { display: inline-flex; align-items: center; justify-content: center; height: 66px; padding: 0 30px; white-space: nowrap; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--neutral-500); font-family: var(--font-sans); font-weight: 600; font-size: 16px; letter-spacing: 0.01em; }
.fcs-mlogo { height: 34px; width: auto; max-width: 158px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter .35s var(--ease-standard), opacity .35s var(--ease-standard); }
.fcs-mchip:hover .fcs-mlogo { filter: none; opacity: 1; }
a.fcs-mchip { text-decoration: none; cursor: pointer; }
.fcs-logoplate { flex: 0 0 calc((100% - 48px) / 4); display: flex; align-items: center; justify-content: center; height: 96px; padding: 0 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
a.fcs-logoplate { text-decoration: none; cursor: pointer; }
.fcs-logoplate:hover .fcs-mlogo { filter: none; opacity: 1; }
.fcs-tl-line { position: absolute; left: 148px; top: 12px; bottom: 12px; width: 2px; }

.fcs-scrollcue { position: absolute; left: var(--gutter); bottom: 22px; display: inline-flex; align-items: center; gap: 12px; color: var(--blue-300); font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.fcs-scrollcue span.bar { position: relative; width: 42px; height: 1px; background: rgba(255,255,255,0.22); overflow: hidden; }
.fcs-scrollcue span.bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--gold-400, var(--gold-500)); animation: fcsCue 2.4s var(--ease-standard) infinite; }
@keyframes fcsCue { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(260%); } }

@media (max-width: 980px) {
  .fcs-seg-ed, .fcs-cf-grid { grid-template-columns: 1fr !important; }
  .fcs-cf-grid > div:first-child { position: static !important; }
  .fcs-nums { grid-template-columns: repeat(2, 1fr) !important; row-gap: 34px !important; }
  .fcs-nums > div { border-left: none !important; padding: 4px 12px !important; }
  .fcs-scrollcue { display: none; }
}
@media (max-width: 600px) {
  .fcs-nums { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fcs-blob-a, .fcs-blob-b, .fcs-blob-c { animation: none !important; }
  .fcs-marquee-track, .fcs-scrollcue span.bar::after { animation: none !important; }
  .fcs-depo-col { animation: none !important; }
  html, body { scroll-behavior: auto; }
}

@keyframes fcsWhatsPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.fcs-whats-row:hover { border-color: #1EA952 !important; background: rgba(255,255,255,0.8) !important; }
.fcs-depo-vp { position: relative; height: 560px; margin: 52px auto 0; overflow: hidden; perspective: 1500px; perspective-origin: center 32%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 120px), transparent 100%); }
.fcs-depo-stage { position: absolute; top: 0; left: 11%; right: 11%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; transform: rotateX(18deg); transform-origin: center top; transform-style: preserve-3d; }
.fcs-depo-col { display: flex; flex-direction: column; gap: 22px; will-change: transform; }
.fcs-depo-col.up { animation: fcsDepoUp 36s linear infinite; }
.fcs-depo-col.down { animation: fcsDepoDown 44s linear infinite; }
.fcs-depo-col.slow { animation-duration: 40s; }
.fcs-depo-vp.is-paused .fcs-depo-col { animation-play-state: paused; }
@keyframes fcsDepoUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes fcsDepoDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (max-width: 860px) {
  .fcs-depo-vp { height: 500px; perspective: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); }
  .fcs-depo-stage { grid-template-columns: repeat(2, 1fr); transform: none; left: 0; right: 0; }
  .fcs-depo-stage > .fcs-depo-col:nth-child(3) { display: none; }
}
@media (max-width: 560px) {
  .fcs-depo-stage { grid-template-columns: 1fr; }
  .fcs-depo-stage > .fcs-depo-col:nth-child(2) { display: none; }
}

/* =============================================================================
   AUDITORIA DE RESPONSIVIDADE — degradação graciosa fina (mantém identidade)
   Hero3D, safe areas (notch/Dynamic Island/home indicator) e ritmo em phones.
   ============================================================================= */

/* Hero3D: a pilha de cartões de vidro tem dimensões fixas em px. Em telas
   menores, escalamos o palco inteiro (preservando blur, profundidade,
   reflexos e transparência) em vez de deixar os cartões serem cortados. */
.fcs-hero3d-stage { transform-origin: top center; will-change: transform; }
@media (max-width: 1180px) { .fcs-hero3d-stage { transform: scale(0.9); min-height: 0 !important; height: 428px; align-items: flex-start !important; } }
@media (max-width: 980px) {
  /* já em coluna única — encosta no topo e colapsa a altura para o tamanho escalado */
  .fcs-hero-visual { display: flex; justify-content: center; }
  .fcs-hero3d-stage { transform: scale(0.9); min-height: 0 !important; height: 428px; align-items: flex-start !important; }
}
@media (max-width: 700px) { .fcs-hero3d-stage { transform: translateX(-8px) scale(0.86); height: 398px; } }
@media (max-width: 480px) { .fcs-hero3d-stage { transform: translateX(-8px) scale(0.82); height: 380px; } }
@media (max-width: 380px) { .fcs-hero3d-stage { transform: translateX(-6px) scale(0.74); height: 342px; } }
@media (max-width: 340px) { .fcs-hero3d-stage { transform: translateX(-6px) scale(0.64); height: 296px; } }

/* Ritmo vertical do herói em phones — altura pelo conteúdo, sem vão morto */
@media (max-width: 700px) {
  .fcs-hero-grid { gap: 20px !important; }
  .fcs-hero-inner { padding-bottom: 2rem !important; }
  section[data-parallax-scope] { min-height: 0 !important; }
}

/* Safe areas iOS: FAB do WhatsApp respeita a home indicator e a borda direita */
.fcs-fab { right: max(24px, env(safe-area-inset-right)) !important; bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)) !important; }
/* Em telas estreitas o rótulo some para não competir com o conteúdo/scroll */
@media (max-width: 440px) {
  .fcs-fab { padding: 14px !important; gap: 0 !important; font-size: 0 !important; border-radius: 50% !important; }
}

/* Cabeçalho em vidro respeita o notch/Dynamic Island sem virar sólido */
@supports (padding: max(0px)) {
  body > header, #root header { padding-top: max(14px, env(safe-area-inset-top)) !important; }
}

/* Menu mobile em Liquid Glass: rola internamente se ultrapassar a viewport
   (muitos itens em telas baixas), preservando o efeito de vidro */
.fcs-mobmenu { max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Área mínima de toque (>=44px) para linhas de navegação/produto no mobile */
@media (max-width: 980px) {
  .fcs-mobmenu a[href], .fcs-mobmenu button { min-height: 44px; }
}