/* ============================================
   AVALIO — home.css
   CSS específico da Home (carregado via $extraHead no HomeController)
   ============================================ */

/* ---------- Seção: Aplicativo de coleta ---------- */
.av-app-section {
  background: linear-gradient(180deg, #fff 0%, #EBF8FA 100%);
  overflow: hidden;
}

.av-app-list { max-width: 520px; display: grid; gap: 16px; }
.av-app-list li { display: flex; gap: 14px; align-items: flex-start; }
.av-app-list strong { display: block; color: var(--av-dark); }
.av-app-list span:not(.av-app-list-icon) { display: block; color: var(--av-muted); font-size: .92rem; }

.av-app-list-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--av-radius-sm);
  background: var(--ic);
  color: var(--clr);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* Botões de loja */
.av-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  min-width: 190px;
  background: var(--av-dark);
  color: #fff;
  border: 2px solid var(--av-dark);
  border-radius: var(--av-radius-sm);
  text-decoration: none;
  text-align: left;
  transition: var(--av-transition);
}
.av-store-btn:hover,
.av-store-btn:focus-visible { background: #000; border-color: #000; color: #fff; transform: translateY(-2px); box-shadow: var(--av-shadow-md); }
.av-store-btn i { font-size: 1.6rem; line-height: 1; }
.av-store-btn span { display: flex; flex-direction: column; font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.av-store-btn small { font-weight: 500; font-size: .7rem; letter-spacing: .03em; opacity: .85; }

.av-store-btn--breve { background: #fff; color: var(--av-dark); }
.av-store-btn--breve:hover,
.av-store-btn--breve:focus-visible { background: var(--av-light-bg); border-color: var(--av-dark); color: var(--av-dark); }

/* Mockups dos celulares */
.av-app-phones {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 460 / 560;
}
.av-app-phone {
  position: absolute;
  width: 62%;
  height: auto;
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-lg);
}
.av-app-phone--back  { top: 0;   left: 0;  transform: rotate(-5deg); opacity: .92; }
.av-app-phone--front { bottom: 0; right: 0; transform: rotate(3deg); }

@media (max-width: 575.98px) {
  .av-store-btn { min-width: 0; flex: 1 1 100%; justify-content: center; }
}