/* =========================================================
   Gerencie Software — páginas de Funcionalidades e Segmentos
   Mobile primeiro. Usa as variáveis e componentes de app.css e pages.css
   ========================================================= */

/* ---------- topo ---------- */
.sol-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 28px) 0 clamp(48px, 7vw, 90px);
  background: radial-gradient(90% 60% at 85% 10%, color-mix(in srgb, var(--c, #1f327e) 14%, transparent), transparent 70%), linear-gradient(180deg, #eef3ff 0%, #f7f9ff 72%, #fff 100%);
}
.sol-hero .hero-bg { position: absolute; inset: 0; pointer-events: none; }
.sol-hero .container { position: relative; }
.sol-hero-grid { display: grid; gap: 34px; align-items: center; }
.sol-h1 { font-size: clamp(2.1rem, 8.6vw, 3.7rem); }
.sol-hero .lead { margin-top: 18px; max-width: 620px; }
.sol-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.sol-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; font-weight: 600; color: var(--navy-2); }
.sol-facts i { color: var(--green); }
.sol-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sol-hero .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }

.sol-media { position: relative; }
.win-frame { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(24,40,72,.14), var(--shadow-lg); }
.win-frame img { display: block; width: 100%; height: auto; }
.win-frame .zoom-btn { z-index: 3; }
.sol-media .phone { position: absolute; right: -6px; bottom: -34px; --pw: min(32vw, 150px); z-index: 2; }
.sol-media .float-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 16px; font-size: .82rem; font-weight: 650; color: var(--navy-2); animation: chipFloat 6s ease-in-out infinite; }
.sol-media .float-chip .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--c2, #3d6fd8), var(--c, #1f327e)); }
.sol-media .float-chip small { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.sol-media .fc1 { left: -8px; bottom: -20px; }
.sol-media .fc2 { right: -8px; bottom: 26%; animation-delay: -3s; display: none; }
.sol-media.with-phone .fc1 { bottom: auto; top: -22px; }
@keyframes chipFloat { 50% { translate: 0 -8px; } }
.sol-badge { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; width: min(62%, 300px); z-index: 2; filter: drop-shadow(0 16px 24px rgba(15,25,70,.25)); }

/* ---------- seções ---------- */
.sol-sec { padding: clamp(56px, 8vw, 104px) 0; }
.sol-sec.alt { background: var(--bg-alt); }
.sol-sec .section-head .lead { margin-inline: auto; max-width: 680px; }

/* ---------- tour interativo (abas + destaque na tela) ---------- */
.tour { display: grid; gap: 18px; }
.tour-tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tab {
  position: relative; flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px; background: #fff; color: var(--navy-2); text-align: left;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, box-shadow .3s, color .3s; overflow: hidden;
}
.tour-tab i { font-size: 1.1rem; color: var(--c, var(--navy)); }
.tour-tab b { display: block; font-size: .92rem; font-weight: 700; white-space: nowrap; }
.tour-tab small { display: none; }
.tour-tab[aria-selected="true"] { background: var(--navy-2); color: #fff; box-shadow: 0 14px 30px -16px rgba(24,40,72,.7); }
.tour-tab[aria-selected="true"] i { color: #9fd2ff; }
.tour-tab .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sky), #fff); }
.tour-tab[aria-selected="true"] .prog { animation: tourProg var(--dur, 7s) linear forwards; }
.tour.paused .tour-tab .prog { animation-play-state: paused; }
@keyframes tourProg { to { transform: scaleX(1); } }

.tour-stage { display: grid; gap: 18px; }
.tour-media { position: relative; display: grid; }
.tour-fig { grid-area: 1 / 1; position: relative; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, transform .3s var(--ease), visibility .22s; align-self: center; }
.tour-fig.on { opacity: 1; visibility: visible; transform: none; }
.tour-fig .win-frame { border-radius: 12px; }
.tour-fig.is-phone { justify-self: center; }
.tour-fig.is-phone .phone { --pw: min(62vw, 260px); }
.tour-spot {
  position: absolute; z-index: 2; pointer-events: none;
  left: var(--x, 0%); top: var(--y, 0%); width: var(--w, 0%); height: var(--h, 0%);
  border-radius: 8px; box-shadow: 0 0 0 3px #ffb21a, 0 0 0 9999px rgba(10,18,48,.38);
  transition: left .6s var(--ease), top .6s var(--ease), width .6s var(--ease), height .6s var(--ease), opacity .4s;
}
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: 10px; box-shadow: 0 0 0 3px #ffb21a; animation: spotPulse 1.8s ease-out infinite; }
@keyframes spotPulse { from { opacity: .9; } to { opacity: 0; transform: scale(1.04); box-shadow: 0 0 0 10px rgba(255,178,26,0); } }
.tour-spot.off { opacity: 0; }
.tour-text { position: relative; padding: 20px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -30px rgba(31,50,126,.45); }
.tour-text .t-step { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--c, var(--navy)) 72%, #000); }
.tour-text h3 { margin: 8px 0 8px; font-size: clamp(1.2rem, 3.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--navy-2); }
.tour-text p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.tour-text .t-anim { animation: tText .25s var(--ease); }
@keyframes tText { from { opacity: 0; transform: translateY(10px); } }
.tour-nav { display: flex; gap: 8px; margin-top: 16px; }
.tour-nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-alt); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.tour-nav button:hover { background: var(--navy); color: #fff; }

/* ---------- cartões de recursos ---------- */
.sol-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sol-card {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sol-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(31,50,126,.18), 0 24px 44px -28px rgba(31,50,126,.5); }
.sol-card .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: linear-gradient(145deg, var(--c2, #3d6fd8), var(--c, #1f327e)); box-shadow: 0 10px 20px -10px var(--c, #1f327e); }
.sol-card h3 { margin: 2px 0 4px; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--navy-2); }
.sol-card p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- passos ---------- */
.sol-steps { position: relative; display: grid; gap: 14px; counter-reset: st; }
.sol-step { position: relative; padding: 20px 20px 20px 70px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sol-step::before { counter-increment: st; content: counter(st); position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--c2, #3d6fd8), var(--c, #1f327e)); }
.sol-step h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--navy-2); }
.sol-step p { margin: 0; font-size: .93rem; color: var(--ink-2); }

/* ---------- ligações ---------- */
.sol-links { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sol-link { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.sol-link:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(31,50,126,.2), 0 18px 36px -26px rgba(31,50,126,.5); }
.sol-link .ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; color: var(--navy); background: var(--tint); }
.sol-link b { display: block; font-size: 1rem; color: var(--navy-2); }
.sol-link small { display: block; font-size: .84rem; color: var(--ink-3); }
.sol-link .go { margin-left: auto; color: var(--navy); transition: transform .3s var(--ease); }
.sol-link:hover .go { transform: translateX(4px); }
.seg-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.seg-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 650; color: var(--navy-2); transition: background-color .25s, color .25s, transform .3s var(--ease); }
.seg-chips a:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.seg-chips a i { color: var(--navy); }
.seg-chips a:hover i { color: #fff; }

/* ---------- perguntas ---------- */
.sol-faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.sol-faq details { border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sol-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 700; color: var(--navy-2); }
.sol-faq summary::-webkit-details-marker { display: none; }
.sol-faq summary i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--navy); transition: transform .35s var(--ease); }
.sol-faq details[open] summary i { transform: rotate(45deg); }
.sol-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.sol-faq details[open]::details-content { block-size: auto; }
.sol-faq .a { padding: 0 20px 18px; color: var(--ink-2); line-height: 1.6; }

/* ---------- segmento: desafios (cartões que viram) ---------- */
.pains { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pain { position: relative; min-height: 196px; perspective: 1100px; cursor: pointer; }
.pain-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.pain.flip .pain-in { transform: rotateY(180deg); }
.pain-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pain-front { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(31,50,126,.5); }
.pain-back { transform: rotateY(180deg); background: linear-gradient(150deg, var(--navy-2), var(--navy) 60%, #2757d6); color: #fff; box-shadow: 0 24px 50px -28px rgba(24,40,72,.8); }
.pain-face .k { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pain-front .k { color: var(--red); }
.pain-back .k { color: #9fd2ff; }
.pain-face .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; }
.pain-front .ic { background: #fff0f2; color: var(--red); }
.pain-back .ic { background: rgba(255,255,255,.14); color: #fff; }
.pain-face h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
.pain-front h3 { color: var(--navy-2); }
.pain-back p { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.9); }
.pain-face .hint { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 650; }
.pain-front .hint { color: var(--navy); }
.pain-back .hint { color: rgba(255,255,255,.75); }

/* ---------- segmento: um dia na empresa ---------- */
.day { position: relative; display: grid; gap: 14px; padding-left: 34px; }
.day::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--tint); }
.day-line { position: absolute; left: 13px; top: 8px; width: 3px; height: calc(var(--p, 0) * (100% - 16px)); border-radius: 3px; background: linear-gradient(180deg, var(--sky), var(--navy)); }
.day-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .5s, transform .5s var(--ease); }
.day-item::before { content: ""; position: absolute; left: -27px; top: 50%; width: 15px; height: 15px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--tint); transition: box-shadow .4s, background-color .4s; }
.day-item.lit::before { background: var(--navy); box-shadow: 0 0 0 5px rgba(31,50,126,.15); }
.day-item.lit { box-shadow: inset 0 0 0 1px rgba(31,50,126,.2), 0 18px 40px -28px rgba(31,50,126,.55); }
.day-item .t { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--bg-alt); color: var(--navy); font-weight: 800; font-size: .95rem; text-align: center; line-height: 1.1; }
.day-item .t i { display: block; font-size: 1.15rem; margin-bottom: 2px; }
.day-item.lit .t { background: var(--navy); color: #fff; }
.day-item h3 { margin: 0; font-size: 1.02rem; color: var(--navy-2); }
.day-item p { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* ---------- segmento: monte o seu sistema ---------- */
.builder { display: grid; gap: 18px; padding: clamp(20px, 4vw, 34px); border-radius: var(--radius-xl); background: linear-gradient(160deg, #0b1640, var(--navy-2) 45%, var(--navy)); color: #fff; box-shadow: 0 40px 80px -40px rgba(11,22,64,.9); }
.builder h2 { color: #fff; }
.builder .lead { color: rgba(255,255,255,.8); }
.mods { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mod { position: relative; }
.mod input { position: absolute; opacity: 0; pointer-events: none; }
.mod label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); cursor: pointer; transition: background-color .25s, box-shadow .25s; font-weight: 600; }
.mod label .bx { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: transparent; transition: background-color .25s, color .25s, transform .3s var(--spring); }
.mod input:checked + label { background: rgba(79,179,255,.18); box-shadow: inset 0 0 0 1.5px rgba(159,210,255,.7); }
.mod input:checked + label .bx { background: #fff; color: var(--navy); transform: scale(1.08); }
.mod input:focus-visible + label { outline: 2px solid #9fd2ff; outline-offset: 2px; }
.mod label a { display: inline-flex; align-items: center; min-height: 40px; margin: -10px -8px -10px auto; padding: 0 8px; color: rgba(255,255,255,.8); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.mod label a:hover { color: #fff; text-decoration: underline; }
.builder-foot { display: grid; gap: 14px; align-items: center; }
.builder-count { display: flex; align-items: baseline; gap: 10px; font-size: .95rem; color: rgba(255,255,255,.8); }
.builder-count b { font-size: 2.4rem; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.builder-foot .btn { justify-content: center; }

/* ---------- capa dos hubs (lista de páginas) ---------- */
.hub-group { margin-top: 30px; }
.hub-group > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: clamp(1.25rem, 3vw, 1.7rem); letter-spacing: -0.02em; color: var(--navy-2); }
.hub-group > h2 i { color: var(--navy); }
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hub-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--ease), box-shadow .45s; }
.hub-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(31,50,126,.2), 0 30px 54px -32px rgba(31,50,126,.6); }
.hub-card .th { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(180deg, #eef3ff, #f7f9ff); }
.hub-card .th img { position: absolute; left: 6%; top: 10%; width: 112%; max-width: none; border-radius: 8px; box-shadow: 0 0 0 1px rgba(24,40,72,.12), 0 20px 40px -20px rgba(15,25,70,.5); transition: transform .8s var(--ease); }
.hub-card:hover .th img { transform: translate(-4%, -3%) scale(1.03); }
.hub-card .th.ph { display: grid; place-items: center; }
.hub-card .th.ph img { position: static; width: auto; height: 120%; margin-top: 18%; border-radius: 18px; }
.hub-card .bd { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px 18px; }
.hub-card .bd .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--navy); background: var(--tint); font-size: 1.1rem; }
.hub-card b { display: block; font-size: 1.04rem; color: var(--navy-2); }
.hub-card small { display: block; font-size: .87rem; color: var(--ink-2); }

/* ---------- chamada final ---------- */
.sol-final { padding: 0 0 var(--section-y); }

/* =========================================================
   TELAS MAIORES
   ========================================================= */
@media (min-width: 600px) {
  .sol-cards, .sol-links, .pains, .mods, .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-hero .hero-ctas .btn { flex: 0 0 auto; }
  .sol-media .fc2 { display: inline-flex; }
}
@media (min-width: 900px) {
  .sol-hero { padding-top: calc(var(--nav-h) + 56px); }
  .sol-hero-grid { grid-template-columns: 1fr 1.08fr; gap: clamp(34px, 5vw, 70px); }
  .sol-media .phone { --pw: 170px; right: -26px; bottom: -40px; }
  .tour { grid-template-columns: 300px 1fr; align-items: start; gap: 26px; }
  .tour-tabs { flex-direction: column; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; position: sticky; top: calc(var(--nav-h) + 20px); }
  .tour-tab { padding: 14px 16px; }
  .tour-tab small { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-3); white-space: normal; }
  .tour-tab[aria-selected="true"] small { color: rgba(255,255,255,.7); }
  .tour-stage { gap: 16px; }
  .tour-fig.is-phone .phone { --pw: 250px; }
  .sol-cards { grid-template-columns: repeat(3, 1fr); }
  .sol-steps { grid-template-columns: repeat(var(--n, 3), 1fr); }
  .sol-step { padding: 74px 22px 22px; }
  .sol-step::before { left: 22px; top: 22px; }
  .sol-links { grid-template-columns: repeat(4, 1fr); }
  .sol-link { flex-direction: column; align-items: flex-start; }
  .sol-link .go { margin-left: 0; }
  .pains { grid-template-columns: repeat(4, 1fr); }
  .pain { min-height: 250px; }
  .day { grid-template-columns: repeat(5, 1fr); padding: 34px 0 0; gap: 12px; }
  .day::before { left: 8px; right: 8px; top: 12px; bottom: auto; width: auto; height: 3px; }
  .day-line { left: 8px; top: 12px; height: 3px; width: calc(var(--p, 0) * (100% - 16px)); }
  .day-item { grid-template-columns: 1fr; align-content: start; padding: 18px; }
  .day-item::before { left: 50%; top: -30px; margin: 0 0 0 -8px; }
  .day-item .t { grid-row: auto; }
  .builder { grid-template-columns: 1fr 1.3fr; align-items: start; gap: 34px; }
  .builder-foot { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
  .hub-grid { grid-template-columns: repeat(3, 1fr); }
  .sol-badge { width: 260px; left: auto; right: -20px; translate: none; bottom: -30px; }
}
@media (min-width: 1101px) {
  .sol-cards.c4 { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-fig, .tour-spot, .pain-in, .sol-card, .hub-card { transition: none !important; }
  .tour-spot::after, .sol-media .float-chip { animation: none !important; }
  .tour-tab .prog { display: none; }
}

/* telas do celular que se alternam */
.sol-cycle { position: relative; aspect-ratio: 328 / 712; }
.sol-cycle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.sol-cycle img.on, .sol-cycle img:first-child:only-child { opacity: 1; }
html:not(.js) .sol-cycle img:first-child { opacity: 1; }

/* topo do Gerencie Cloud: celular grande */
.sol-cloud-hero { position: relative; display: grid; place-items: center; padding: 10px 0 20px; }
.sol-cloud-hero::before { content: ""; position: absolute; inset: 8% 4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(79,179,255,.35), transparent); filter: blur(10px); }
.sol-cloud-hero .phone.big { position: relative; right: auto; bottom: auto; --pw: min(64vw, 280px); }
.sol-cloud-hero .fc1 { left: 0; top: 18%; }
.sol-cloud-hero .fc2 { right: 0; top: auto; bottom: 16%; display: inline-flex; }
.sol-media.with-phone { padding-bottom: 30px; }
.sol-ideal { margin-top: 34px; }
.sol-ideal > p { margin: 0 0 12px; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 900px) {
  .sol-cloud-hero .phone.big { --pw: 290px; }
  .sol-cloud-hero .fc1 { left: 2%; }
  .sol-cloud-hero .fc2 { right: 2%; }
}

/* ajustes */
.sol-media.with-phone .win-frame .zoom-btn { right: auto; left: 12px; }
.builder h2 { font-size: clamp(1.7rem, 4.4vw, 2.7rem); }
@media (min-width: 1101px) { .hub-grid.f4 { grid-template-columns: repeat(4, 1fr); } }

/* depoimento */
.sol-quote-sec { padding-bottom: 0; }
.sol-quote { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(26px, 5vw, 48px); border-radius: var(--radius-xl); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(31,50,126,.5); text-align: center; }
.sol-quote > i { position: absolute; left: 50%; top: -22px; translate: -50% 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: linear-gradient(145deg, var(--c2, #3d6fd8), var(--c, #1f327e)); }
.sol-quote blockquote { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.55; letter-spacing: -0.01em; color: var(--navy-2); text-wrap: pretty; }
.sol-quote figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; text-align: left; }
.sol-quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.sol-quote b { display: block; color: var(--navy-2); }
.sol-quote small { display: block; font-size: .84rem; color: var(--ink-3); }
.hub-card .th { display: block; }
.sol-cloud-hero .fc1 { bottom: auto; }
.sol-media .sol-badge { left: auto; right: 8px; bottom: -34px; translate: none; width: min(46%, 220px); padding: 8px 12px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -18px rgba(15,25,70,.45), inset 0 0 0 1px var(--line); filter: none; }
.sol-media:has(.sol-badge) .fc2 { display: none; }
.sol-media .sol-badge { height: auto; }

/* miniaturas: recorte nítido da tela (não a tela inteira encolhida) */
.hub-card .th.crop { background: #fff; border-bottom: 1px solid var(--line); }
.hub-card .th.crop img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left top; border-radius: 0; box-shadow: none; transform: none; transition: none; }
.hub-card:hover .th.crop img { transform: none; }

/* =========================================================
   Certificado digital
   ========================================================= */
.cert-visual { position: relative; display: grid; place-items: center; min-height: 300px; padding: 30px 0; }
.cert-card {
  position: relative; width: min(100%, 400px); aspect-ratio: 1.586; padding: 22px 24px; border-radius: 22px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(79,179,255,.55), transparent 55%), linear-gradient(150deg, #2a44a0 0%, var(--navy) 55%, #121c4a 100%);
  box-shadow: 0 40px 70px -34px rgba(15,25,70,.75), inset 0 1px 0 rgba(255,255,255,.25);
  animation: certFloat 7s ease-in-out infinite;
}
.cert-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 60%); transform: translateX(-100%); animation: certShine 5s ease-in-out infinite 1s; }
@keyframes certFloat { 50% { transform: translateY(-8px) rotate(-.6deg); } }
@keyframes certShine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.cc-top { display: flex; align-items: center; gap: 12px; }
.cc-seal { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.16); font-size: 1.35rem; color: #9ff0b8; }
.cc-top b { display: block; font-size: 1.05rem; letter-spacing: -0.01em; }
.cc-top small { display: block; font-size: .78rem; color: rgba(255,255,255,.75); }
.cc-chip { position: absolute; right: 26px; top: 28px; width: 46px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #f5d27a, #d8a93f 60%, #f1cf73); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.cc-chip::before, .cc-chip::after { content: ""; position: absolute; left: 6px; right: 6px; height: 1px; background: rgba(90,60,0,.45); top: 12px; }
.cc-chip::after { top: 22px; }
.cc-name { position: absolute; left: 24px; bottom: 74px; margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; }
.cc-doc { position: absolute; left: 24px; bottom: 54px; margin: 0; font-size: .82rem; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.cc-foot { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: .74rem; color: rgba(255,255,255,.75); }
.cc-foot b { display: block; font-size: .92rem; color: #fff; }
.cc-foot .ok { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: rgba(52,199,89,.22); color: #b6f5c9; font-weight: 700; white-space: nowrap; }
.cert-float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; font-size: .82rem; color: var(--navy-2); animation: chipFloat 6s ease-in-out infinite; }
.cert-float .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3d6fd8, var(--navy)); }
.cert-float b { display: block; font-size: .86rem; }
.cert-float small { display: block; font-size: .75rem; color: var(--ink-3); }
.cert-float.c1 { left: 0; top: 4px; }
.cert-float.c2 { right: 0; bottom: 0; animation-delay: -3s; }
.cert-float.c2 .ic { background: linear-gradient(145deg, #34d96f, var(--wa)); }
.cert-sys { display: grid; gap: 30px; align-items: center; }
.cert-sys-shot { margin: 0; }
.cert-sys-shot figcaption { margin-top: 10px; font-size: .82rem; color: var(--ink-3); text-align: center; }
.cert-models { display: grid; gap: 12px; margin-top: 18px; }
.cert-models article { padding: 20px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cert-models .tag { display: inline-block; padding: 4px 12px; border-radius: 99px; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.cert-models h3 { margin: 12px 0 4px; font-size: 1.05rem; color: var(--navy-2); }
.cert-models p { margin: 0; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 600px) { .cert-card { padding: 18px 18px; } .cc-name { left: 18px; bottom: 66px; font-size: 1rem; } .cc-doc { left: 18px; bottom: 48px; } .cc-foot { left: 18px; right: 18px; bottom: 14px; } .cert-float.c1 { top: -6px; } }
@media (min-width: 900px) { .cert-sys { grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 70px); } .cert-models { grid-template-columns: repeat(3, 1fr); margin-top: 26px; } }
@media (prefers-reduced-motion: reduce) { .cert-card, .cert-card::after, .cert-float { animation: none; } }

/* =========================================================
   Filiais: a matriz no controle de todas as lojas (diagrama animado)
   ========================================================= */
.net-box { container-type: inline-size; width: 100%; }
.net { position: relative; aspect-ratio: 100 / 64; border-radius: 22px; background: radial-gradient(60% 60% at 50% 50%, rgba(79,179,255,.16), transparent 70%), linear-gradient(180deg, #f7f9ff, #eef3ff); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
@container (max-width: 520px) { .net { aspect-ratio: 100 / 112; } }
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.net-lines line { stroke: #c9d3ea; stroke-width: 2; stroke-dasharray: 4 7; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.net:is([data-step="0"], [data-step="1"], [data-step="2"]) :is(.l1, .l2, .l3),
.net[data-step="3"] .l4, .net[data-step="all"] line { stroke: var(--blue); stroke-dasharray: 7 7; animation: netdash .9s linear infinite; }
@keyframes netdash { to { stroke-dashoffset: -14; } }
.net-pk { position: absolute; z-index: 1; display: none; width: 11px; height: 11px; border-radius: 50%; translate: -50% -50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(13,131,253,.2), 0 0 12px rgba(13,131,253,.8); animation: netpk 1.7s linear infinite; animation-delay: var(--d, 0s); }
.net[data-step="0"] .net-pk.s0, .net[data-step="1"] .net-pk.s1, .net[data-step="2"] .net-pk.s2, .net[data-step="3"] .net-pk.s3, .net[data-step="all"] .net-pk.sa { display: block; }
@keyframes netpk { 0% { left: var(--x0); top: var(--y0); opacity: 0; } 12%, 85% { opacity: 1; } 100% { left: var(--x1); top: var(--y1); opacity: 0; } }
.net-node {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 9px;
  width: clamp(118px, 26cqw, 200px); padding: clamp(8px, 1.6cqw, 12px) clamp(9px, 1.8cqw, 13px);
  border-radius: clamp(12px, 2.2cqw, 16px); background: #fff; box-shadow: 0 14px 30px -18px rgba(31,50,126,.55), inset 0 0 0 1px var(--line);
  transition: box-shadow .35s, transform .35s var(--spring);
}
.nn-ic { grid-row: span 2; display: grid; place-items: center; width: clamp(28px, 5.4cqw, 40px); height: clamp(28px, 5.4cqw, 40px); border-radius: 10px; background: var(--tint); color: var(--navy); font-size: clamp(.9rem, 2.4cqw, 1.2rem); }
.nn-ic img { width: 100%; height: 100%; object-fit: contain; }
.nn-tx { min-width: 0; grid-row: span 2; }
.nn-tx b { display: block; font-size: clamp(11.5px, 2.2cqw, 15px); line-height: 1.2; color: var(--navy-2); }
.nn-tx small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(9.5px, 1.6cqw, 12px); color: var(--ink-3); }
.nn-st { grid-column: 1 / -1; min-height: 2.5em; margin-top: 4px; padding-top: 5px; border-top: 1px dashed rgba(31,50,126,.18); font-size: clamp(9.5px, 1.75cqw, 13px); line-height: 1.25; font-weight: 650; color: var(--ink-2); }
.nn-st em { display: none; font-style: normal; animation: nnin .35s var(--ease); }
.net[data-step="0"] .nn-st .s0, .net[data-step="1"] .nn-st .s1, .net[data-step="2"] .nn-st .s2, .net[data-step="3"] .nn-st .s3, .net[data-step="all"] .nn-st .sa { display: block; }
@keyframes nnin { from { opacity: 0; transform: translateY(3px); } }
.net-node.mz { width: clamp(138px, 30cqw, 230px); background: linear-gradient(150deg, #2a44a0, var(--navy) 60%, #18286a); box-shadow: 0 0 0 6px rgba(13,131,253,.12), 0 22px 40px -20px rgba(31,50,126,.8); }
.net-node.mz .nn-ic { background: #fff; }
.net-node.mz b { color: #fff; }
.net-node.mz small { color: rgba(255,255,255,.75); }
.net-node.mz .nn-st { color: #b6f5c9; border-top-color: rgba(255,255,255,.2); }
.net[data-step="1"] .f1, .net[data-step="2"] .f2, .net[data-step="3"] .cl { transform: scale(1.06); box-shadow: 0 0 0 3px #ffb21a, 0 18px 36px -16px rgba(31,50,126,.6); }
.net-hero { width: 100%; }
.tour-fig.is-net { width: 100%; }
@media (prefers-reduced-motion: reduce) { .net-pk { display: none !important; } .net-lines line { animation: none !important; } }

/* =========================================================
   Permissões e auditoria: "Você permite ou nega" — central "Autorizações de hoje" do Gerencie Cloud
   ========================================================= */
.sol-authz { background: var(--bg-alt); }
.sol-authz .authz-steps li { background: #fff; }
@media (min-width: 901px) { .sol-authz .authz-steps li:not(.is-on) { background: none; } .sol-authz .authz-steps li.is-on { background: #fff; } }
.scr-b.cz { background: #f3f5fb; }
.cz-top { padding: 3.2cqw 5cqw 3.6cqw; background: linear-gradient(135deg, #0e142c, #1f327e); color: #fff; }
.cz-top b { display: block; font-size: 4.7cqw; font-weight: 800; line-height: 1.2; }
.cz-top small { display: block; margin-top: .6cqw; font-size: 3.3cqw; font-weight: 700; color: #ffc107; }
.cz-top small .d { display: none; }
.cz-body { padding: 3.4cqw 3.4cqw 0; }
.cz-dica { display: flex; justify-content: center; align-items: center; gap: 2.4cqw; margin: 0 0 3cqw; font-size: 3cqw; font-weight: 800; }
.cz-dica span { display: inline-flex; align-items: center; gap: .8cqw; padding: .5cqw 2.4cqw; border-radius: 99px; }
.cz-dica .sim { background: rgba(46,125,50,.12); color: #1b5e20; }
.cz-dica .nao { background: rgba(198,40,40,.1); color: #b71c1c; }
.cz-emp { display: flex; align-items: center; gap: 1.8cqw; margin: 0 1cqw 2.4cqw; color: #1c2440; font-size: 3.5cqw; }
.cz-emp > i { color: #6a7593; font-size: 3.8cqw; }
.cz-emp .atual { padding: .3cqw 2cqw; border-radius: 99px; background: rgba(31,50,126,.1); color: var(--navy); font-size: 2.7cqw; font-weight: 800; }
.cz-emp .qtd { margin-left: auto; min-width: 5.4cqw; padding: .3cqw 1.6cqw; border-radius: 99px; background: #ff3b30; color: #fff; font-size: 2.6cqw; font-weight: 800; text-align: center; transition: scale .4s var(--spring), opacity .3s; }
.cz-ped { position: relative; overflow: hidden; max-height: 70cqw; padding: 3.4cqw 3.4cqw 3cqw 3.8cqw; border-left: 1.1cqw solid #ff8f00; border-radius: 4.4cqw; background: #fff; box-shadow: 0 1.5cqw 4.4cqw rgba(24,40,72,.08); transition: max-height .6s var(--ease), opacity .35s, padding .6s var(--ease), margin .6s var(--ease); }
.cz-ped .l1 { display: flex; justify-content: space-between; align-items: center; }
.cz-ped .l1 > span:first-child { color: #8a93ab; font-size: 2.9cqw; font-weight: 800; letter-spacing: .1cqw; }
.cz-ped .h { display: inline-flex; align-items: center; gap: .7cqw; color: #b34700; font-size: 3.1cqw; font-weight: 800; }
.cz-ped p { margin-top: 1.6cqw; color: #1c2440; font-size: 3.6cqw; font-weight: 700; line-height: 1.4; }
.cz-ped p.det { margin-top: .4cqw; color: #34405c; font-size: 3cqw; font-weight: 600; }
.cz-acoes { display: flex; gap: 2cqw; margin-top: 3cqw; }
.cz-acoes > span { position: relative; flex: 1 1 0; display: inline-grid; place-items: center; min-height: 11.5cqw; border-radius: 3cqw; font-size: 3.7cqw; font-weight: 800; }
.cz-acoes > span > * { grid-area: 1 / 1; }
.cz-neg { box-shadow: inset 0 0 0 .3cqw #ef9a9a; background: #fff; color: #c62828; }
.cz-aut { flex-grow: 1.6 !important; background: linear-gradient(135deg, #2e7d32, #43a047); color: #fff; box-shadow: 0 1cqw 3cqw rgba(46,125,50,.3); transition: scale .25s var(--spring); }
.cz-aut .lbl { display: inline-flex; align-items: center; gap: 1cqw; }
.cz-aut .spin { display: none; width: 5cqw; height: 5cqw; border-width: .8cqw; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.cz-ped .tap { right: 16cqw; bottom: 1.5cqw; }
.cz-rt { margin: 4cqw 1cqw 2cqw; color: #6a7593; font-size: 2.9cqw; font-weight: 800; letter-spacing: .15cqw; text-transform: uppercase; }
.cz-resp { margin: 0; padding: 0; list-style: none; border-radius: 4cqw; background: #fff; box-shadow: 0 1cqw 3.5cqw rgba(24,40,72,.05); }
.cz-resp li { display: flex; align-items: flex-start; gap: 2.4cqw; padding: 2.6cqw 3.4cqw; }
.cz-resp li + li { border-top: .25cqw solid #eef1f6; }
.cz-resp li > i { flex: none; margin-top: .3cqw; font-size: 4.8cqw; line-height: 1; color: #90a4ae; }
.cz-resp li.sim > i { color: #2e7d32; }
.cz-resp li.neg > i { color: #c62828; }
.cz-resp li > span { display: grid; min-width: 0; }
.cz-resp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34405c; font-size: 3.3cqw; font-weight: 600; }
.cz-resp small { color: #6a7593; font-size: 2.9cqw; font-weight: 600; }
.cz-resp li.novo { display: none; }
.cz-mais { display: flex; justify-content: flex-end; align-items: center; gap: .6cqw; margin: 2.4cqw 1cqw 0; color: var(--navy); font-size: 3.3cqw; font-weight: 700; }
/* fases: 5 = toque em Autorizar · 6+ = respondido (sai de "aguardando" e entra em "Respondidos hoje") */
.authz-scene[data-phase="5"] .cz-aut { scale: .95; }
.authz-scene[data-phase="5"] .cz-aut .lbl { visibility: hidden; }
.authz-scene[data-phase="5"] .cz-aut .spin { display: block; }
.authz-scene:is([data-phase="6"],[data-phase="7"],[data-phase="8"],[data-phase="9"]) .cz-ped { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.authz-scene:is([data-phase="6"],[data-phase="7"],[data-phase="8"],[data-phase="9"]) .cz-rt { margin-top: 1cqw; }
.authz-scene:is([data-phase="6"],[data-phase="7"],[data-phase="8"],[data-phase="9"]) .cz-resp li.novo { display: flex; background: #f3fbf5; animation: pop .5s var(--spring); }
.authz-scene:is([data-phase="6"],[data-phase="7"],[data-phase="8"],[data-phase="9"]) .cz-top .w { display: none; }
.authz-scene:is([data-phase="6"],[data-phase="7"],[data-phase="8"],[data-phase="9"]) .cz-top .d { display: inline; }
.authz-scene:is([data-phase="6"],[data-phase="7"],[data-phase="8"],[data-phase="9"]) .cz-emp .qtd { scale: 0; opacity: 0; }