Instructions

Baseando-me nessas referências de alta qualidade, vou reformular completamente as diretrizes visuais para o site da Casa Flora:

## 📐 **Diretrizes Visuais Reformuladas - Casa Flora**

### 1. **Princípios de Design**

#### **Minimalismo Sofisticado**
- Espaço negativo generoso como elemento de design
- Tipografia como protagonista visual
- Layouts assimétricos mas equilibrados
- Menos elementos, mais impacto

#### **Grid System**
```css
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 24px;
  }
}
```

### 2. **Tipografia Refinada**

```css
:root {
  /* Sistema tipográfico */
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Escala modular */
  --text-xs: clamp(0.75rem, 1vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.2vw, 1rem);
  --text-base: clamp(1rem, 1.5vw, 1.125rem);
  --text-lg: clamp(1.25rem, 2vw, 1.5rem);
  --text-xl: clamp(2rem, 4vw, 3rem);
  --text-2xl: clamp(3rem, 6vw, 5rem);
  --text-hero: clamp(4rem, 10vw, 8rem);
  
  /* Leading */
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

/* Títulos com peso variável */
.hero-title {
  font-size: var(--text-hero);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: var(--leading-tight);
  mix-blend-mode: difference;
}
```

### 3. **Paleta de Cores Refinada**

```css
:root {
  /* Cores primárias - tons naturais */
  --color-ink: #0A0A0A;
  --color-paper: #FAFAF9;
  
  /* Acentos sutis da paleta original */
  --color-accent-red: #E11D48;
  --color-accent-forest: #14532D;
  --color-accent-gold: #F59E0B;
  
  /* Neutros expandidos */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F4F4F5;
  --color-gray-200: #E4E4E7;
  --color-gray-300: #D4D4D8;
  --color-gray-700: #3F3F46;
  --color-gray-900: #18181B;
}
```

### 4. **Componentes Modernos**

#### **Hero Section**
```jsx
const Hero = () => {
  return (
    <section className="hero">
      <div className="hero__content">
        <h1 className="hero__title">
          <span className="hero__line">Quebramos</span>
          <span className="hero__line hero__line--italic">o óbvio</span>
          <span className="hero__line">criando marcas</span>
          <span className="hero__line hero__line--outline">memoráveis</span>
        </h1>
        
        <div className="hero__meta">
          <p className="hero__description">
            Desenvolvemos identidades sensoriais, autorais 
            e profundamente humanas
          </p>
          
          <div className="hero__actions">
            <button className="btn btn--primary">
              <span>Começar projeto</span>
              <svg className="btn__arrow">→</svg>
            </button>
          </div>
        </div>
      </div>
      
      <div className="hero__visual">
        <img 
          src="/hero-image.jpg" 
          alt="Casa Flora workspace"
          loading="eager"
        />
      </div>
    </section>
  );
};
```

#### **CSS para Componentes**
```css
/* Botões modernos */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Cards com glassmorphism */
.card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 48px;
  transition: all 0.4s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
```

### 5. **Micro-interações e Animações**

```css
/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor customizado */
.custom-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: all 0.1s ease;
}

.custom-cursor.hover {
  width: 60px;
  height: 60px;
  background: var(--color-accent-red);
}
```

### 6. **Layout Responsivo Moderno**

```css
/* Hero responsivo */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero__visual {
    order: -1;
    height: 50vh;
  }
}

/* Seções com scroll snap */
.main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
}
```

### 7. **Performance e Otimização**

```javascript
// Lazy loading de imagens
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      imageObserver.unobserve(img);
    }
  });
});

// Font loading optimization
document.fonts.ready.then(() => {
  document.body.classList.add('fonts-loaded');
});
```

### 8. **Estrutura de Navegação**

```css
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 32px 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  mix-blend-mode: difference;
}

.nav__menu {
  display: flex;
  gap: 48px;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav__item {
  position: relative;
  cursor: pointer;
}

.nav__item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.nav__item:hover::after {
  width: 100%;
}
```

Essas diretrizes criam uma experiência visual moderna, limpa e profissional, inspirada nas melhores práticas dos sites de referência, mantendo a essência autoral e humana da Casa Flora.