:root{
  --mint:#88D2B0;
  --lilac:#BFA8E7;
  --babyblue:#AEE4F8;
  --accent:#6B4DD6;
}

body{
  font-family:'Inter',sans-serif;
  background:#f0f4f8;
  color:#222;
}

.text-brand-accent{
  color:var(--accent);
}

.bg-brand-accent{
  background-color:var(--accent);
}

.colecao-topo {
    padding: 80px 20px 30px;
    text-align: center;
}

.colecao-topo h1 {
    font-size: 48px;
    margin-bottom: 12px;
}

.colecao-topo p {
    max-width: 720px;
    margin: auto;
    opacity: .75;
}

.filtro-categorias {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px 0 40px;
}

.filtro-categorias button {
    border: none;
    background: #f2f2f2;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
}

.filtro-categorias button.ativo {
    background: #111;
    color: white;
}

.grid-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap: 24px;
}

.produto-card {
    background: white;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: .2s ease;
}

.produto-card:hover {
    transform: translateY(-4px);
}

.produto-imagem img {
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.produto-info {
    text-align: center;
    margin-top: 16px;
}

.produto-info span {
    opacity: .6;
    font-size: 14px;
}

.vasos-section {
    padding: 80px 0;
}

.narrow{
    max-width: 860px;
    margin: 0 auto;
}

.lead{
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.plantoides-texto{
    max-width: 760px;
    margin: 0 auto;
}

.plantoides-texto p{
    margin-bottom: 18px;
    line-height: 1.8;
    opacity: .9;
}

.como-funciona{
    padding: 40px 0 70px;
}

.como-funciona h2{
    text-align:center;
    margin-bottom:40px;
}

.passos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:24px;
}

.passo-card{
    background:#fff;
    border-radius:18px;
    padding:28px;
    text-align:center;
}

.passo-card span{
    display:inline-flex;
    width:42px;
    height:42px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    background:#111;
    color:#fff;
    font-weight:700;
    margin-bottom:14px;
}

.intro-catalogo{
    padding: 30px 0;
    text-align:center;
}

.intro-catalogo p{
    margin-bottom:14px;
    line-height:1.8;
    opacity:.85;
}