/* Paleta da identidade visual 2025 (DEC9): azul-marinho #0E1D62 como cor dominante, amarelo #FED403 como destaque.
   Carregado por ultimo no header.php; sobrepoe as cores antigas sem mexer nos outros CSS.
   Regra de contraste: texto sobre amarelo e sempre azul (branco sobre amarelo e ilegivel). */

:root {
  --ub-azul: #0E1D62;
  --ub-azul-escuro: #08123F;
  --ub-azul-medio: #1B2F8A;
  --ub-amarelo: #FED403;
  --ub-fundo: #F3F6FC;
  --ub-borda: #DDE3F0;

  /* variaveis ja usadas pelo site */
  --primary-color: #0E1D62;
  --secondary-color: #FED403;
  --accent-color: #08123F;
  --dark-color: #0A1446;
  --light-color: #F3F6FC;   /* era bege */
  --lighter-color: #F7F9FD;
  --medium-color: #C9D2E8;
}

/* Barra do topo: azul-escuro (era amarela) */
.top-bar { background: var(--ub-azul-escuro) !important; color: #fff !important; }
.top-bar a, .top-bar span { color: #fff !important; }
.top-bar i { color: var(--ub-amarelo) !important; }

/* Menu principal em azul */
.main-nav { background: var(--ub-azul) !important; border: 0 !important; }
.main-menu a, .main-menu a span { color: #fff !important; }
.main-menu a i { color: var(--ub-amarelo) !important; }
.main-menu a:hover, .main-menu a:hover span { color: var(--ub-amarelo) !important; }

/* Banner principal: sobreposicao azul (era cinza) */
.hero-banner {
  background: linear-gradient(90deg, rgba(8, 18, 63, 0.97) 0%, rgba(14, 29, 98, 0.92) 50%, rgba(27, 47, 138, 0.75) 100%),
              url(/img/hero-banner.jpg) center / cover !important;
}

/* Fundos claros: azul-gelo (era bege) */
.featured-products { background-color: var(--ub-fundo) !important; }

/* Traços dos titulos */
.section-title:after, .motivos-title::before, .mais-vendidos-title::before, .faq-section .section-title::before { background: var(--ub-amarelo) !important; }
.section-title, .faq-section .section-title, .especialista-title { color: var(--ub-azul) !important; }

/* Botao "Cotacao" dos cards: azul com texto branco; no hover, amarelo com texto azul */
.btn-add-modern { background: var(--ub-azul) !important; color: #fff !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(14, 29, 98, 0.18) !important; }
.btn-add-modern:hover { background: var(--ub-amarelo) !important; color: var(--ub-azul) !important; }

/* Botoes de destaque em amarelo: texto azul */
.cta-medicamento-btn, .especialista-btn, .btn-cotacao-wpp {
  background: var(--ub-amarelo) !important; color: var(--ub-azul) !important; border: 0 !important; font-weight: 700 !important;
}
.cta-medicamento-btn:hover, .especialista-btn:hover, .btn-cotacao-wpp:hover { background: #ffe03a !important; color: var(--ub-azul-escuro) !important; }
.cta-medicamento-btn i, .especialista-btn i, .btn-cotacao-wpp i { color: var(--ub-azul) !important; }
section.cta-medicamento-section { background: var(--ub-azul) !important; }

/* Botao "Ver todos os produtos" */
.btn-secondary { background: transparent !important; color: var(--ub-azul) !important; border: 2px solid var(--ub-azul) !important; }
.btn-secondary:hover { background: var(--ub-azul) !important; color: #fff !important; }

/* Perguntas frequentes: pergunta aberta em azul */
.faq-question { color: var(--ub-azul) !important; }
.faq-question[aria-expanded="true"] { background: var(--ub-azul) !important; color: #fff !important; }
.faq-question[aria-expanded="true"] .chevron path { stroke: var(--ub-amarelo) !important; }

/* Passos "Como funciona" */
.step-number { color: var(--ub-azul) !important; }
.process-step h3 { color: var(--ub-azul) !important; }

/* Rodape */
footer { background: var(--ub-azul-escuro) !important; }
footer h4:after, .footer-title { border-color: var(--ub-amarelo) !important; }
footer h4:after { background: var(--ub-amarelo) !important; }

/* Redes sociais no rodape: circulos amarelos com icone azul; no hover, amarelo mais claro e leve subida */
footer .social-icons { display: flex; gap: 12px; margin-top: 1.4rem; }
footer .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0;
  border-radius: 50%; border: 0; background: var(--ub-amarelo) !important; color: var(--ub-azul) !important;
  font-size: 1.15rem; line-height: 1; transition: background 0.25s, color 0.25s, transform 0.25s; }
footer .social-icons a:hover, footer .social-icons a:focus-visible { background: #ffe03a !important; color: var(--ub-azul) !important; transform: translateY(-2px); }
@media (max-width: 767px) { footer .social-icons { justify-content: center; } }
footer .social-icons a i { margin: 0 !important; line-height: 1; }   /* havia margin-top de 10px no .fa-instagram (regra antiga), que descentralizava o icone */