/* =================================
   ARQUIVO PRINCIPAL CSS - Espaço Aricá
   ABORDAGEM HÍBRIDA: Bootstrap + CSS Customizado
   ================================= */

/* Variáveis CSS customizadas */
:root {
  --ea-beige: #FDF7DF;
  --ea-blush: #E96DA1;
  --ea-brown: #3C1F0F;
  --ea-olive: #4C3C1A;
  --ea-green: #5A835B;
}

/* Estilos base */
body {
    background: var(--ea-beige);
}

.bi.upsideDown::before {
    transform: rotate(180deg);
}

/* ===== FOOTER RESPONSIVO - ABORDAGEM HÍBRIDA ===== */

/* Posicionamento responsivo do footer usando CSS customizado */
#mainFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Layout otimizado para desktop usando CSS customizado */
@media (min-width: 768px) {
    #mainFooter {
        position: relative;
        max-width: 100%;
    }
    
    #mainFooter .container {
        max-width: 600px;
    }
}

@media (min-width: 1200px) {
    #mainFooter .container {
        max-width: 800px;
    }
}

/* Ajustes de altura responsivos usando CSS customizado */
#footerAdjust {
    height: 100px; /* Mobile */
}

@media (min-width: 768px) {
    #footerAdjust {
        height: 15px; /* Tablet */
    }
}

@media (min-width: 992px) {
    #footerAdjust {
        height: 10px; /* Desktop */
    }
}

/* Otimização dos botões para desktop */
@media (min-width: 992px) {
    #mainFooter .btn {
        padding: 0.5rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* 
NOTA: Esta é uma abordagem HÍBRIDA que combina:

✅ BOOTSTRAP UTILITY CLASSES (no HTML):
- py-3 py-md-2 py-lg-1: Padding vertical responsivo
- bg-dark, text-white: Cores
- container, row, col-*: Layout
- btn btn-primary: Botões

✅ CSS CUSTOMIZADO (neste arquivo):
- Posicionamento complexo (fixed/relative)
- Alturas responsivas específicas
- Lógica de visibilidade customizada
- Variáveis de cores próprias

= Melhor dos dois mundos! 🎯
*/