/* Lívia Fiorentino — widget app (estilos do bloco; a base está em lf-base.css) */
.lf-app { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; padding: clamp(90px, 11vw, 140px) var(--lf-margem); background: radial-gradient(50% 60% at 75% 50%, #fff 0%, transparent 70%), linear-gradient(135deg, var(--lf-rosa) 0%, var(--lf-azul) 100%); overflow: hidden; }
.lf-app__texto { max-width: 540px; justify-self: end; }
.lf-app__texto h2 { margin-bottom: 18px; }
.lf-app__texto > p:not(.lf-rotulo) { color: var(--lf-texto-2); margin: 0; }
.lf-app__lista { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; font-size: 14.5px; font-weight: 400; }
.lf-app__lista li { display: flex; align-items: center; gap: 12px; }
.lf-app__lista svg { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #fff; fill: none; stroke: var(--lf-verde-escuro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lf-app__lojas { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.lf-loja { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 14px; border-radius: 8px; background: var(--lf-tinta); color: #fff; }
.lf-loja svg { width: 22px; height: 22px; fill: currentColor; }
.lf-loja span { font-size: 15px; font-weight: 500; line-height: 1.1; }
.lf-loja small { display: block; font-size: 10px; font-weight: 400; opacity: .7; }
.lf-app__aparelho { position: relative; justify-self: start; padding: 20px 60px 20px 0; }
.lf-celular { width: 290px; aspect-ratio: 9 / 19; padding: 11px; border-radius: 46px; background: var(--lf-tinta); box-shadow: 0 50px 90px -30px rgba(42, 45, 42, .5), inset 0 0 0 2px #4a4f4b; transform: rotate(4deg); }
.lf-celular__tela { position: relative; height: 100%; border-radius: 36px; background: var(--lf-creme); padding: 50px 16px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.lf-celular__ilha { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; border-radius: 20px; background: var(--lf-tinta); }
.lf-celular__ola { margin: 0 0 4px; font-family: var(--lf-serifa); font-size: 1.7rem; font-weight: 500; }
.lf-celular__ola b { font-weight: 600; }
.lf-celular__ola span { color: var(--lf-rosa-forte); }
.lf-cartao { border-radius: 18px; padding: 14px 16px; display: grid; gap: 2px; }
.lf-cartao small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.lf-cartao b { font-family: var(--lf-serifa); font-weight: 600; font-size: 1.3rem; line-height: 1.1; }
.lf-cartao span { font-size: 12px; }
.lf-cartao--rosa { background: var(--lf-rosa); }
.lf-cartao--verde { background: var(--lf-verde-claro); }
.lf-cartao__acoes { display: flex; gap: 6px; margin-top: 8px; }
.lf-cartao__acoes i { font-style: normal; font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: 99px; background: var(--lf-tinta); color: #fff; }
.lf-cartao__acoes i + i { background: transparent; color: var(--lf-tinta); border: 1px solid rgba(42, 45, 42, .25); }
.lf-progresso { height: 5px; border-radius: 5px; background: #fff; margin-top: 8px; overflow: hidden; }
.lf-progresso span { display: block; height: 100%; background: var(--lf-verde); border-radius: 5px; }
.lf-celular__linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lf-celular__linha div { background: var(--lf-areia); border-radius: 14px; padding: 10px; text-align: center; }
.lf-celular__linha small { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-texto-2); }
.lf-celular__linha b { font-family: var(--lf-serifa); font-size: 1.4rem; font-weight: 600; }
.lf-celular__nav { margin-top: auto; display: flex; justify-content: space-around; padding: 12px; border-radius: 20px; background: #fff; }
.lf-celular__nav i { width: 22px; height: 22px; border-radius: 7px; background: var(--lf-areia); }
.lf-celular__nav i.on { background: var(--lf-rosa-forte); }
.lf-notificacao { position: absolute; right: -10px; top: 34%; width: 270px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -24px rgba(42, 45, 42, .4); font-size: 13px; font-weight: 400; line-height: 1.4; animation: lf-flutua 5s ease-in-out infinite; }
.lf-notificacao b { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }
.lf-notificacao b::before { content: ""; width: 18px; height: 18px; border-radius: 6px; background: #25D366; }
@keyframes lf-flutua {50% { transform: translateY(-10px); }}
@media (max-width: 860px) {
  .lf-app { grid-template-columns: 1fr; }
  .lf-app__texto, .lf-app__aparelho { justify-self: center; }
}
@media (max-width: 560px) {
  .lf-app__lista { grid-template-columns: 1fr; }
  .lf-app__aparelho { padding: 10px 0 30px; }
  .lf-celular { width: 260px; }
  .lf-notificacao { right: -20px; width: 220px; top: 55%; font-size: 12px; }
}