/* ================================================================ BLOCO 1.5 – UNIDADES (Bela Vista & Brooklin) Arquivo: style-unidades.css Importar após stylemb.css no do index.html: ================================================================ */ /* ── Container principal da seção ──────────────────────────── */ #unidades { background: #f5f0ec; display: flex; flex-direction: row; /* lado a lado no desktop */ align-items: stretch; width: 100%; } /* ── Cada bloco de unidade ──────────────────────────────────── */ .unidade-bloco { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 64px 5%; text-align: center; } /* ── Área do logo (imagem PNG transparente) ─────────────────── */ .unidade-logo { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 340px; } .unidade-logo-img { width: 100%; height: auto; display: block; /* Garante que o PNG transparente não ganhe fundo branco */ background: transparent; } /* ── Grupo de botões ────────────────────────────────────────── */ .unidade-botoes { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 320px; } /* Botões herdam 100% do padrão .btn de stylemb.css */ /* Apenas ajustamos para ocupar largura total do bloco */ .unidade-botoes .btn { width: 100%; text-align: center; font-size: 0.9rem; padding: 16px 24px; } /* ── Separador vertical (desktop) ──────────────────────────── */ .unidade-separador { width: 1px; background: #1a1a1a; /* mesma cor do texto escuro do site */ opacity: 0.25; align-self: stretch; flex-shrink: 0; margin: 40px 0; /* recua levemente nas bordas top/bottom */ } /* ================================================================ RESPONSIVIDADE ================================================================ */ /* Tablet – mantém lado a lado até 600 px */ @media (max-width: 900px) { .unidade-logo { max-width: 260px; } .unidade-botoes { max-width: 280px; } } /* Mobile – empilha verticalmente */ @media (max-width: 600px) { #unidades { flex-direction: column; /* empilha verticalmente */ } .unidade-bloco { padding: 50px 8%; gap: 24px; } .unidade-logo { max-width: 280px; } .unidade-botoes { max-width: 100%; } .unidade-botoes .btn { font-size: 0.85rem; padding: 14px 20px; } /* No mobile o separador vira uma linha horizontal */ .unidade-separador { width: auto; height: 1px; margin: 0 8%; align-self: auto; } }