@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@700;800;900&display=swap');

:root {
  /* -- Cores eHomeCare -- */
  --color-bg-page: #F6F1E6;
  --color-bg-white: #FFFFFF;
  --color-bg-hover: #EBE5D3;
  --color-border-light: #EBE5D3;
  --color-border-medium: #C8BEA7;
  
  /* -- Texto -- */
  --color-text-dark: #1E2D5A;
  --color-text-body: #3A4B7C;
  --color-text-muted: #8F9EAF;
  --color-text-placeholder: #B8C4D0;

  /* -- Cores Primárias e Secundárias -- */
  --color-primary: #3C5EBF;
  --color-primary-light: #E8EEFC;
  --color-primary-soft: #B3C7F7;
  --color-secondary: #D9A94A;
  --color-secondary-light: #F7EED9;
  --color-secondary-soft: #E6C580;

  /* -- Sombras -- */
  --shadow-card: 0 2px 6px rgba(30,45,90,0.06), 0 1px 3px rgba(30,45,90,0.04);
  --shadow-card-hover: 0 8px 24px rgba(30,45,90,0.12);
  --shadow-soft: 0 4px 16px rgba(30,45,90,0.06);

  /* -- Fontes -- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ============================================
   Base Reset
   ============================================ */
html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-page);
  color: var(--color-text-dark);
  min-height: 100vh;
}

.font-display {
  font-family: var(--font-display);
}

/* ============================================
   Animações
   ============================================ */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.35s ease-out forwards;
}

/* ============================================
   Utilitários & Textura
   ============================================ */
.bg-wave-pattern {
  background-color: var(--color-bg-page);
  background-image: 
    radial-gradient(at 0% 0%, rgba(60, 94, 191, 0.06) 0px, transparent 60%),
    radial-gradient(at 100% 0%, rgba(217, 169, 74, 0.05) 0px, transparent 55%),
    radial-gradient(at 80% 100%, rgba(60, 94, 191, 0.04) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(217, 169, 74, 0.04) 0px, transparent 50%);
  background-attachment: fixed;
}

/* ============================================
   Estilos de Cápsulas/Botões 3D Relevo
   ============================================ */
.btn-pill-3d-blue {
  background: linear-gradient(180deg, #537BF0 0%, #2A48AD 100%);
  box-shadow: 
    0 4px 10px rgba(42, 72, 173, 0.22), 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid #233F9C;
  color: #FFFFFF;
  border-radius: 9999px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-pill-3d-blue:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 
    0 6px 14px rgba(42, 72, 173, 0.28), 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.btn-pill-3d-blue:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 4px rgba(42, 72, 173, 0.15), 
    inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

.btn-pill-3d-gold {
  background: linear-gradient(180deg, #E8B958 0%, #B88E33 100%);
  box-shadow: 
    0 4px 10px rgba(184, 142, 51, 0.22), 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid #A67D2B;
  color: #1E2D5A;
  border-radius: 9999px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-pill-3d-gold:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 
    0 6px 14px rgba(184, 142, 51, 0.28), 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.btn-pill-3d-gold:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 4px rgba(184, 142, 51, 0.15), 
    inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

.btn-pill-3d-cream {
  background: linear-gradient(180deg, #FCFBF7 0%, #EBE5D3 100%);
  box-shadow: 
    0 4px 10px rgba(142, 134, 114, 0.12), 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  border: 1px solid #D1C9B3;
  color: #1E2D5A;
  border-radius: 9999px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-pill-3d-cream:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 
    0 6px 14px rgba(142, 134, 114, 0.16), 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
}

.btn-pill-3d-cream:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 4px rgba(142, 134, 114, 0.08), 
    inset 0 1px 1px rgba(0, 0, 0, 0.05);
}