:root { --p: hsl(245, 60%, 45%); --s: hsl(281, 40%, 85%); --t: #222; --bg: #fff; }
    body { font-family: sans-serif; color: var(--t); margin: 0; background: var(--bg); line-height: 1.4; }
    .container { max-width: 1000px; margin: 0 auto; padding: 1rem; }
    header { border-bottom: 3px solid var(--p); padding: 1rem; display: flex; justify-content: space-between; }
    .visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
    .v-box { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; text-align: center; background: #fafafa; }
    .v-img { width: 100%; height: auto; display: block; }
    .hero { position: relative; margin-bottom: 2rem; }
    .hero-text { position: absolute; bottom: 20px; left: 20px; background: rgba(255,255,255,0.9); padding: 1rem; border-left: 5px solid var(--p); }
    article { display: flex; flex-direction: column; gap: 1.5rem; }
    .gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
    .gallery img { width: 30%; border: 1px solid #eee; }
    footer { background: #111; color: #eee; padding: 2rem; margin-top: 3rem; font-size: 0.8rem; }
    nav a { margin-left: 1rem; text-decoration: none; color: var(--p); font-weight: bold; }