/* Aplicativo no portal: uma seção que alterna "Para quem procura trabalho" e "Para empresas",
   com telas reais do app sobre fotos de fundo (IA local). Sem degradê: a foto ganha um véu de cor sólida. */
.app-vitrine { position:relative; padding:56px 0 90px; margin-bottom:90px; overflow:hidden; background:#0F2747; isolation:isolate; }
.app-vitrine__fundo { position:absolute; inset:0; z-index:-2; background:center/cover no-repeat; opacity:0; transform:scale(1.04);
  transition:opacity .9s ease, transform 6s ease; }
.app-vitrine::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(15, 39, 71, .24); pointer-events:none; }
.app-vitrine[data-ativo="trabalhador"] .app-vitrine__fundo[data-painel="trabalhador"],
.app-vitrine[data-ativo="empresa"] .app-vitrine__fundo[data-painel="empresa"] { opacity:1; transform:scale(1); }

/* seletor */
.app-vitrine__alternar { display:flex; justify-content:center; gap:6px; width:max-content; max-width:100%; margin:0 auto 34px; padding:6px;
  border-radius:99px; background:rgba(255, 255, 255, .9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(15, 23, 42, .18); }
.app-vitrine__alternar button { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  padding:11px 22px; border-radius:99px; background:transparent; color:#334155; font-size:15px; font-weight:600; transition:background .25s, color .25s; }
.app-vitrine__alternar button i { font-size:20px; }
.app-vitrine__alternar button { line-height:1.2; white-space:nowrap; }
.app-vitrine__rot-curto { display:none; }
.app-vitrine__alternar button[aria-selected="true"] { background:var(--c-primaria, #2264D1); color:#fff; }
.app-vitrine__alternar button:focus-visible { outline:3px solid var(--c-primaria-clara, #9DBCF0); outline-offset:2px; }
/* barrinha do tempo até a próxima troca (só com a troca automática ligada) */
.app-vitrine__tempo { position:absolute; left:18px; right:18px; bottom:5px; height:2px; border-radius:2px; background:rgba(255, 255, 255, .85);
  transform:scaleX(0); transform-origin:left; opacity:0; }
.app-vitrine--auto button[aria-selected="true"] .app-vitrine__tempo { opacity:1; animation:app-tempo 8s linear forwards; }
.app-vitrine--pausa button[aria-selected="true"] .app-vitrine__tempo { animation-play-state:paused; }
@keyframes app-tempo { to { transform:scaleX(1); } }

/* os dois painéis ocupam o mesmo lugar: a altura é a do maior, e a troca é um esmaecer */
.app-vitrine__palco { display:grid; }
.app-vitrine__grade { grid-area:1 / 1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center;
  transition:opacity .6s ease, transform .6s ease, visibility 0s linear 0s; }
.app-vitrine__grade[aria-hidden="true"] { opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }

.app-vitrine__texto { background:rgba(255, 255, 255, .95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:24px; padding:38px 40px 32px; box-shadow:0 24px 60px rgba(15, 23, 42, .22); }
.app-vitrine__selo { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.02em; padding:6px 14px; border-radius:99px;
  background:var(--c-primaria-fraca, #E3ECFB); color:var(--c-primaria-escura, #1A4FA8); margin-bottom:14px; }
.app-vitrine__texto h2 { font-size:36px; line-height:1.15; font-weight:700; color:#0F172A; margin:0 0 12px; letter-spacing:-.02em; }
.app-vitrine__texto > p { font-size:16px; line-height:1.65; color:#475569; margin:0 0 22px; }

.app-vitrine__itens { list-style:none; padding:0; margin:0 0 26px; display:grid; gap:14px; }
.app-vitrine__itens li { display:flex; gap:14px; align-items:flex-start; }
.app-vitrine__ico { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--c-primaria-fraca, #E3ECFB); color:var(--c-primaria, #2264D1); font-size:22px; }
.app-vitrine__itens strong { display:block; font-size:15.5px; color:#0F172A; line-height:1.35; }
.app-vitrine__itens li span:not(.app-vitrine__ico) { display:block; font-size:14px; color:#64748B; line-height:1.5; margin-top:2px; }

.app-vitrine__lojas { display:flex; gap:12px; flex-wrap:wrap; }
.app-vitrine__lojas img { height:46px; width:auto; display:block; }
.app-vitrine__breve { display:inline-flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:600; color:#334155;
  background:#F1F5F9; border-radius:99px; padding:9px 16px; }
.app-vitrine__breve i { font-size:20px; color:var(--c-primaria, #2264D1); }

/* celulares: moldura escura, o da frente maior e o de trás inclinado */
.app-vitrine__telas { position:relative; height:600px; }
.app-celular { position:absolute; margin:0; width:262px; padding:9px; background:#0B0F19; border-radius:40px;
  box-shadow:0 30px 70px rgba(2, 6, 23, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.app-celular img { display:block; width:100%; border-radius:31px; }
.app-celular--frente { z-index:2; top:0; right:210px; transform:rotate(-4deg); }
.app-celular--tras { z-index:1; top:70px; right:0; width:238px; transform:rotate(6deg); }

@media (max-width: 1199px) {
  .app-vitrine__grade { gap:36px; }
  .app-vitrine__texto h2 { font-size:30px; }
  .app-celular--frente { right:150px; }
}
@media (max-width: 991px) {
  .app-vitrine { padding:36px 0 56px; margin-bottom:60px; }
  .app-vitrine__alternar { margin-bottom:22px; }
  .app-vitrine__alternar button { padding:10px 14px; font-size:13.5px; gap:6px; }
  .app-vitrine__alternar button i { font-size:18px; }
  .app-vitrine__rot { display:none; }
  .app-vitrine__rot-curto { display:inline; }
  .app-vitrine__grade { grid-template-columns:1fr; gap:28px; }
  .app-vitrine__texto { padding:26px 22px 22px; border-radius:20px; }
  .app-vitrine__texto h2 { font-size:26px; }
  .app-vitrine__telas { height:470px; max-width:400px; width:100%; margin:0 auto; }
  .app-celular { width:196px; padding:7px; border-radius:32px; }
  .app-celular img { border-radius:25px; }
  .app-celular--frente { left:50%; right:auto; margin-left:-172px; }
  .app-celular--tras { width:172px; top:56px; left:50%; right:auto; margin-left:-12px; }
}
@media (max-width: 380px) {
  .app-vitrine__alternar button { padding:9px 11px; font-size:12.5px; }
  .app-vitrine__telas { height:420px; }
  .app-celular { width:176px; }
  .app-celular--tras { width:156px; margin-left:-14px; }
  .app-celular--frente { margin-left:-158px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-vitrine__fundo, .app-vitrine__grade { transition:none; transform:none; }
}