/* ═══════════════════════════════════════════════════════════════
   NewPDV — Página de grupo de funcionalidades (/funcionalidades/{grupo})
   Hero .fgh no DNA dos heróis da LP (atmosfera em camadas, régua de
   stats, pills, palco com tela real) + seções fixas .fgr/.fgt/.fgx.
   Acento por grupo via [data-group] (cores do CLAUDE.md).
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.fgh {
    --deep: #072F36; --mid: #0D4F58; --glow: #156872;
    --accent: #8FD0C5; --txt-soft: #BFE9D9;
    --green: #4E9E33; --green-hi: #7FD95A;
    --line: rgba(191,233,217,0.16);
    --grp: #8FD0C5; --grp-rgb: 143,208,197;
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(44px, 5.5vw, 68px) 0 clamp(76px, 9vw, 104px);
    color: rgba(255,255,255,0.92);
}
.fgh[data-group="estoque"]    { --grp: #A9DF7A; --grp-rgb: 169,223,122; }
.fgh[data-group="vendas"]     { --grp: #7CC7E0; --grp-rgb: 124,199,224; }
.fgh[data-group="financeira"] { --grp: #8ED9F0; --grp-rgb: 142,217,240; }
.fgh[data-group="fiscal"]     { --grp: #CDA9F0; --grp-rgb: 205,169,240; }

.fgh__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(140% 95% at 50% -10%, var(--glow) 0%, var(--mid) 38%, var(--deep) 82%); }
.fgh__gridlines {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(143,208,197,0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(143,208,197,0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 85% 62% at 50% 38%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 85% 62% at 50% 38%, #000 30%, transparent 80%);
    opacity: .75;
}
.fgh__orb { position: absolute; border-radius: 50%; pointer-events: none; }
.fgh__orb--1 { width: 680px; height: 680px; background: radial-gradient(circle, rgba(21,104,114,0.55) 0%, rgba(21,104,114,0.18) 40%, transparent 68%); top: -240px; left: -170px; animation: fghOrb1 22s ease-in-out infinite; }
.fgh__orb--2 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--grp-rgb), 0.16) 0%, rgba(var(--grp-rgb), 0.05) 42%, transparent 68%); bottom: -220px; right: -150px; animation: fghOrb2 26s ease-in-out infinite; }
@keyframes fghOrb1 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(40px,28px) } }
@keyframes fghOrb2 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-30px,-40px) } }
.fgh__noise {
    position: absolute; inset: 0; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}
.fgh__num {
    position: absolute; top: 50%; right: -3vw; transform: translateY(-50%);
    font-weight: 800; font-size: clamp(280px, 36vw, 560px); line-height: .8; letter-spacing: -0.05em;
    color: rgba(191,233,217,0.05); pointer-events: none; user-select: none; z-index: -1;
}

.fgh__container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.fgh__topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
.fgh__chip {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 999px;
    font-size: 12.5px; font-weight: 500; color: var(--txt-soft);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    max-width: 100%; overflow: hidden;
}
.fgh__chip a { color: var(--txt-soft); transition: color .2s; white-space: nowrap; }
.fgh__chip a:hover { color: #fff; }
.fgh__chip svg { flex: none; opacity: .5; }
.fgh__chip [aria-current] { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fgh__chip--eyebrow {
    background: linear-gradient(135deg, rgba(var(--grp-rgb), 0.16), rgba(var(--grp-rgb), 0.05));
    border-color: rgba(var(--grp-rgb), 0.32); color: var(--grp);
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px;
}
.fgh__chip-sep { opacity: .45; }
.fgh__chip-meta { color: var(--txt-soft); font-weight: 500; letter-spacing: .01em; text-transform: none; }
.fgh__pulse { position: relative; width: 10px; height: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fgh__pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grp); box-shadow: 0 0 10px rgba(var(--grp-rgb), 0.75); }
.fgh__pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--grp); animation: fghPulse 2s ease-out infinite; }
@keyframes fghPulse { 0% { transform: scale(1); opacity: .7 } 100% { transform: scale(3); opacity: 0 } }

.fgh__row { display: grid; grid-template-columns: 1.04fr .96fr; gap: 52px; align-items: center; }
.fgh__overline { font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; color: var(--grp); margin: 0 0 10px; line-height: 1.3; opacity: .95; }
.fgh__title {
    font-weight: 800; font-size: clamp(38px, 4.8vw, 62px); line-height: 1.03; letter-spacing: -0.03em;
    color: #fff; margin: 0 0 22px; text-wrap: balance;
}
.fgh__title-dot { color: var(--green-hi); }
.fgh__hl { color: var(--grp); }
.fgh__lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; color: var(--txt-soft); max-width: 500px; margin: 0 0 32px; text-wrap: pretty; }
.fgh__lede strong { color: #fff; font-weight: 600; }

.fgh__stats { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 34px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fgh__stat { display: flex; flex-direction: column; gap: 3px; }
.fgh__stat strong { font-size: clamp(22px, 1.8vw, 27px); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fgh__stat span { font-size: 12.5px; color: var(--txt-soft); font-weight: 500; }

.fgh__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.fgh__btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 14px 21px; border-radius: 999px;
    font-size: 14px; font-weight: 700; letter-spacing: .01em; max-width: 100%;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
}
.fgh__btn--primary { background: linear-gradient(135deg, #5CB33C, #3F8427); color: #fff; box-shadow: 0 14px 32px rgba(78,158,51,0.36), inset 0 1px 0 rgba(255,255,255,0.2); }
.fgh__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(78,158,51,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.fgh__btn--primary svg { transition: transform .25s; }
.fgh__btn--primary:hover svg { transform: translateX(4px); }
.fgh__btn--ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fgh__btn--ghost:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.38); transform: translateY(-2px); }
.fgh__trust { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; color: var(--txt-soft); margin: 0; }
.fgh__trust svg { color: var(--green-hi); margin-right: 2px; flex: none; }
.fgh__trust-dot { opacity: .4; margin: 0 4px; }

/* palco: janela com a tela real do sistema */
.fgh__stage { position: relative; }
.fgh__stage-glow { position: absolute; inset: -44px; background: radial-gradient(ellipse at center, rgba(21,104,114,0.55), transparent 62%); filter: blur(50px); z-index: 0; animation: fghGlow 5s ease-in-out infinite; }
@keyframes fghGlow { 0%,100% { opacity: .7; transform: scale(1) } 50% { opacity: 1; transform: scale(1.05) } }
.fgh__win {
    position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: 0 34px 84px rgba(0,0,0,0.5), 0 0 0 1px rgba(191,233,217,0.16), 0 0 60px rgba(21,104,114,0.25);
    transform: rotate(-1.2deg); transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.fgh.is-ready .fgh__win { transform: rotate(0); }
.fgh__win-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
    background: linear-gradient(90deg, var(--green-hi) 0%, var(--green) 35%, var(--grp) 70%, var(--glow) 100%);
    box-shadow: 0 1px 12px rgba(127,217,90,0.45);
}
.fgh__win-chrome { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 13px; background: #F0F4F3; border-bottom: 1px solid rgba(18,37,34,0.08); }
.fgh__win-dots { display: inline-flex; align-items: center; gap: 6px; }
.fgh__win-dots span { width: 8px; height: 8px; border-radius: 50%; background: #DDE5E3; }
.fgh__win-title { font-size: 11.5px; font-weight: 600; color: #46605B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fgh__win-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 10px; font-weight: 700; color: #2E6B1C; background: #E8F5DF; padding: 3px 9px; border-radius: 999px; }
.fgh__win-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: fghPulse 1.8s infinite; }
.fgh__win img { width: 100%; display: block; }

.fgh__float {
    position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 11px; padding: 12px 16px;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 14px; box-shadow: 0 18px 40px rgba(2,30,40,0.4), 0 0 0 1px rgba(255,255,255,0.25);
    color: #122522;
}
.fgh__float-icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: rgba(127,217,90,0.16); }
.fgh__float-icon--grp { background: rgba(13,79,88,0.1); color: #0D4F58; }
.fgh__float-body { display: flex; flex-direction: column; line-height: 1.2; }
.fgh__float-label { font-size: 10.5px; color: #64798A; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fgh__float-value { font-size: 17px; color: #0D4F58; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.fgh__float--a { top: 16%; left: -7%; animation: fghFloatA 8s ease-in-out infinite 1.6s; }
.fgh__float--b { bottom: -7%; right: -5%; animation: fghFloatB 7s ease-in-out infinite 1.9s; }
@keyframes fghFloatA { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes fghFloatB { 0%,100% { transform: translateY(0) } 50% { transform: translateY(9px) } }

/* entrada orquestrada com fallback CSS puro */
@keyframes fghFallback { to { opacity: 1; transform: none; } }
.fgh [data-anim] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
    animation: fghFallback .6s cubic-bezier(.2,.8,.2,1) 1.8s forwards;
}
.fgh.is-ready [data-anim] { opacity: 1; transform: translateY(0); animation: none; }
.fgh.is-ready [data-anim="1"] { transition-delay: .1s; }
.fgh.is-ready [data-anim="2"] { transition-delay: .2s; }
.fgh.is-ready [data-anim="3"] { transition-delay: .3s; }
.fgh.is-ready [data-anim="4"] { transition-delay: .45s; }
.fgh.is-ready [data-anim="5"] { transition-delay: .55s; }
.fgh.is-ready [data-anim="6"] { transition-delay: .65s; }
.fgh [data-anim="visual"] { transform: translateY(36px) scale(.97); }
.fgh.is-ready [data-anim="visual"] { opacity: 1; transform: translateY(0) scale(1); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1) .3s, transform 1.1s cubic-bezier(.2,.8,.2,1) .3s; }
.fgh [data-anim^="float"] { transform: scale(.7); }
.fgh.is-ready [data-anim="float-a"] { opacity: 1; transform: scale(1); transition: opacity .7s ease 1s, transform .7s cubic-bezier(.34,1.56,.64,1) 1s; }
.fgh.is-ready [data-anim="float-b"] { opacity: 1; transform: scale(1); transition: opacity .7s ease 1.15s, transform .7s cubic-bezier(.34,1.56,.64,1) 1.15s; }

@media (max-width: 991px) {
    .fgh { padding-bottom: 96px; }
    .fgh__num { font-size: 240px; right: -10vw; }
    .fgh__row { grid-template-columns: 1fr; gap: 44px; }
    .fgh__lede { max-width: 620px; }
    .fgh__stage { margin: 0 auto; max-width: 620px; }
    .fgh__float--a { left: -2%; top: -4%; }
    .fgh__float--b { right: -1%; bottom: -5%; }
}
@media (max-width: 575px) {
    .fgh__num { display: none; }
    .fgh__topbar { gap: 10px; margin-bottom: 28px; }
    .fgh__chip { font-size: 11px; padding: 6px 12px; gap: 7px; }
    .fgh__chip--eyebrow .fgh__chip-meta { display: none; }
    .fgh__title { font-size: clamp(31px, 9vw, 40px); }
    .fgh__stats { gap: 18px; padding: 15px 0; }
    .fgh__stat strong { font-size: 21px; }
    .fgh__btn { padding: 13px 18px; font-size: 13.5px; }
    .fgh__float { padding: 9px 12px; gap: 8px; border-radius: 11px; }
    .fgh__float-value { font-size: 14px; }
    .fgh__float-label { font-size: 9px; }
    .fgh__float-icon { width: 28px; height: 28px; }
    .fgh__float--a { top: -4%; left: 0; }
    .fgh__float--b { bottom: -5%; right: 0; }
}

/* ── ROTINA (seção fixa: como o módulo entra no dia a dia) ── */
.fgr { max-width: 1200px; margin: 0 auto; padding: 96px 28px 0; }
.fgr__head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.fgr__kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0D4F58; }
.fgr__title { font-size: 38px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; margin: 12px 0 0; color: #122522; text-wrap: balance; }
.fgr__sub { font-size: 17px; line-height: 1.6; color: #5A716C; margin: 14px 0 0; text-wrap: pretty; }
.fgr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
.fgr__step {
    position: relative; background: #fff; border: 1px solid rgba(18,37,34,0.08); border-radius: 18px;
    padding: 26px 24px; transition: transform .3s, box-shadow .3s;
}
.fgr__step:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(13,79,88,0.1); }
.fgr__step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600;
    background: #0D4F58; color: #fff; box-shadow: 0 8px 18px rgba(13,79,88,0.3);
}
.fgr__step-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 14px 0 0; color: #122522; }
.fgr__step-desc { font-size: 14px; color: #5A716C; line-height: 1.55; margin: 6px 0 0; }
.fgr__step-arrow { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); z-index: 1; color: #4E9E33; display: flex; }
@media (max-width: 960px) {
    .fgr__grid { grid-template-columns: 1fr; }
    .fgr__step-arrow { display: none; }
    .fgr__title { font-size: 30px; }
}
@media (max-width: 575px) { .fgr { padding: 72px 20px 0; } .fgr__title { font-size: 25px; } }

/* ── TELAS REAIS (seção fixa) ── */
.fgt { background: #EDF3F1; padding: 88px 0; margin-top: 96px; }
.fgt__in { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.fgt__head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.fgt__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fgt__win { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 22px 54px rgba(13,79,88,0.14); transition: transform .3s, box-shadow .3s; }
.fgt__win:hover { transform: translateY(-4px); box-shadow: 0 28px 64px rgba(13,79,88,0.2); }
.fgt__win img { width: 100%; display: block; }
.fgt__caption { padding: 14px 18px; font-size: 13.5px; color: #5A716C; border-top: 1px solid rgba(18,37,34,0.07); }
.fgt__caption strong { color: #122522; font-weight: 700; display: block; font-size: 14.5px; margin-bottom: 1px; }
@media (max-width: 960px) { .fgt__grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .fgt { padding: 64px 0; margin-top: 72px; } }

/* ── CROSS-SELL (funcionalidades de outras áreas, aleatórias) ── */
.fgx { max-width: 1200px; margin: 0 auto; padding: 96px 28px 10px; }
.fgx__head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.fgx__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fgx__card {
    display: flex; flex-direction: column; gap: 10px; background: #fff;
    border: 1px solid rgba(18,37,34,0.08); border-radius: 16px; padding: 22px;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.fgx__card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(13,79,88,0.12); border-color: rgba(13,79,88,0.25); }
.fgx__tag {
    align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--fgx-c, #87C437) 15%, white); color: color-mix(in srgb, var(--fgx-c, #87C437) 60%, #123);
}
.fgx__card[data-group="estoque"]    { --fgx-c: #87C437; }
.fgx__card[data-group="vendas"]     { --fgx-c: #368DA8; }
.fgx__card[data-group="financeira"] { --fgx-c: #6ec3df; }
.fgx__card[data-group="fiscal"]     { --fgx-c: #b885e6; }
.fgx__card-title { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: #122522; margin: 0; }
.fgx__card-desc { font-size: 13.5px; color: #5A716C; line-height: 1.55; margin: 0; flex: 1; }
.fgx__card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #4E9E33; }
@media (max-width: 960px) { .fgx__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .fgx { padding: 72px 20px 10px; } .fgx__grid { grid-template-columns: 1fr; } }