/* ========================================
   Águas Farma Drogarias
   Landing Page — Estilos Customizados
   ======================================== */

/* Fonte principal */
body {
    font-family: 'Inter', sans-serif;
}

/* Efeito de vidro para o cabeçalho fixo */
.glass-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Animação suave de pulso para o botão WhatsApp */
@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.animate-pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* Animação de entrada com fade + slide */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    animation: fadeInUp 0.6s ease-out both;
}

/* Step number "ghost" */
.step-number {
    -webkit-text-stroke: 1.5px #cbd5e1;
    color: transparent;
    user-select: none;
}

/* Card de unidade — efeito hover */
.unit-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}
.unit-card:hover {
    border-color: #D32F2F;
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(211, 47, 47, 0.15);
}

/* Sombra especial para CTAs vermelhos */
.cta-shadow {
    box-shadow: 0 12px 24px -6px rgba(211, 47, 47, 0.3);
}
.cta-shadow:hover {
    box-shadow: 0 16px 32px -6px rgba(211, 47, 47, 0.4);
}

/* Card de depoimento — hover */
.testimonial-card {
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

/* Animação do badge "Aberto Agora" */
@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

/* Botão flutuante do WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 28px -6px rgba(37, 211, 102, 0.5);
}

/* Micro-animações para links do nav */
nav a {
    position: relative;
}
nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #D32F2F;
    transition: width 0.3s ease;
}
nav a:hover::after {
    width: 100%;
}

/* Faixa de topo — gradiente sutil */
.top-bar-gradient {
    background: linear-gradient(90deg, #D32F2F 0%, #b71c1c 100%);
}

/* Categoria icon hover */
.category-icon-card {
    transition: all 0.3s ease;
}
.category-icon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
}

/* Scrollbar suave */
html {
    scroll-behavior: smooth;
}