/* A home usa o hero, o painel e os icones do proprio style.css do produto.
   Este arquivo so compoe a capa, sem criar outro vocabulario visual. */

.design-hero{
  min-height:calc(100vh - 132px);
  gap:26px;
}

.design-mark{
  width:44px;height:44px;color:#fff;
  filter:drop-shadow(0 2px 6px #0b2a6f33);
}

.design-hero .hero-heading{display:grid;gap:6px;text-align:center}
.design-hero .hero-heading p{font-size:14px;letter-spacing:.02em;opacity:.9}
.design-hero h1{font-size:32px;font-weight:700;letter-spacing:-.02em}

.design-actions{
  width:100%;max-width:660px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:8px;
}

.design-card{
  display:flex;flex-direction:column;align-items:flex-start;
  margin:0;padding:20px;text-align:left;color:inherit;text-decoration:none;
  transition:box-shadow .15s,transform .15s;
}

.design-card .quick-icon{color:#2563eb;margin-bottom:14px}
.material-svg{width:24px;height:24px;fill:currentColor;display:block}

.design-card h2{font-size:15px;color:#0f172a}
.design-card p{flex:1;font-size:12px;line-height:1.5;margin-top:6px;color:#64748b}
.design-card .text-btn{margin-top:16px;font-size:12px}

a.design-card:hover{box-shadow:0 6px 16px #0b2a6f33}
a.design-card:focus-visible{outline:3px solid #fff;outline-offset:2px}

.design-card.is-disabled{background:#f1f3f7;color:#5b6b82;cursor:not-allowed;box-shadow:none}
.design-card.is-disabled h2{color:#475569}
.design-card.is-disabled .quick-icon{color:#94a3b8;background:#e6eaf1;border-color:#d7dde7}
.design-card.is-disabled .text-btn{color:#94a3b8}

.design-note{text-align:center;color:#64748b;font-size:12px;margin-top:22px}

@media(max-width:700px){
  .design-hero{min-height:auto;padding:44px 20px;gap:22px}
  .design-hero h1{font-size:26px}
  .design-actions{grid-template-columns:1fr}
}