/* ================================================================
   Belmar Boutique Pets — belmar.css
   Resets, keyframes, hover states, focus, responsive
   ================================================================ */

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: #2B2B2B; background: #FAF8F3; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
h1, h2, h3, h4 { margin: 0 }
p { margin: 0 }
img { display: block; max-width: 100%; height: auto }
a { color: #15314C; text-decoration: none }
section[id] { scroll-margin-top: 90px }
::selection { background: #C9A961; color: #15314C }

/* ----- Keyframes ----- */
@keyframes belmarKB    { 0% { transform: scale(1) } 100% { transform: scale(1.1) } }
@keyframes belmarFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(7px) } }
@keyframes belmarShine { 0% { background-position: 0% 50% } 100% { background-position: 220% 50% } }

/* ----- Nav links: sublinhado dourado animado no hover ----- */
.nav-link {
  position: relative;
  color: #FAF8F3;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .9;
  transition: opacity .2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: linear-gradient(120deg, #E2C98A, #C9A961, #A9823D);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover { opacity: 1; color: #FAF8F3 }
.nav-link:hover::after { transform: scaleX(1) }

/* ----- Hover: card lift ----- */
.hover-card { transition: transform .2s ease, box-shadow .2s ease }
.hover-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(201,169,97,.18) }
.hover-card-strong:hover { box-shadow: 0 10px 28px rgba(201,169,97,.28) }

/* ----- Hover: botões ----- */
.btn-agendar {
  background: #FAF8F3;
  color: #15314C;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-agendar:hover { transform: scale(1.03); box-shadow: 0 2px 8px rgba(201,169,97,.35); color: #15314C }

.btn-creme {
  background: #FAF8F3;
  color: #15314C;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-creme:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(201,169,97,.4); color: #15314C }

.btn-creme-lg {
  background: #FAF8F3;
  color: #15314C;
  font-weight: 600;
  font-size: 17px;
  padding: 17px 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-creme-lg:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(201,169,97,.45); color: #15314C }

.btn-outline-white {
  border: 1.5px solid rgba(250,248,243,.5);
  color: #FAF8F3;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  transition: border-color .2s ease, color .2s ease;
}
.btn-outline-white:hover { border-color: #E2C98A; color: #E2C98A }

.btn-navy {
  background: #15314C;
  color: #FAF8F3;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-navy:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(201,169,97,.35); color: #FAF8F3 }

.btn-outline-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #15314C;
  border: 1.5px solid #15314C;
  border-radius: 10px;
  padding: 10px 16px;
  transition: background .2s ease, color .2s ease;
}
.btn-outline-navy:hover { background: #15314C; color: #FAF8F3 }

.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: #0b3d24;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-wa:hover { transform: scale(1.01); box-shadow: 0 8px 22px rgba(37,211,102,.35) }

.btn-wa-inline {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #0b3d24;
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-wa-inline:hover { transform: scale(1.02); box-shadow: 0 8px 22px rgba(37,211,102,.35); color: #0b3d24 }

/* ----- Focus visível (acessibilidade) ----- */
.form-input { font-family: Inter, sans-serif; font-size: 15px; padding: 13px 14px; border: 1px solid #d9d3c6; border-radius: 10px; background: #fff; color: #2B2B2B; outline: none; width: 100% }
.form-input:focus { border-color: #15314C; box-shadow: 0 0 0 3px rgba(21,49,76,.12) }

/* ----- Imagens com Ken Burns ----- */
.kb-img { width: 100%; height: 100%; object-fit: cover }
.kb-22 { animation: belmarKB 22s ease-in-out infinite alternate }
.kb-24 { animation: belmarKB 24s ease-in-out infinite alternate }
.kb-26 { animation: belmarKB 26s ease-in-out infinite alternate }

/* ----- Instagram / footer hover ----- */
.nav-ig:hover { color: #E2C98A !important }
.footer-link:hover { color: rgba(250,248,243,1) !important }

/* ----- Artigo body spacing ----- */
.artigo-body p { margin-bottom: 24px }
.artigo-body p:last-child { margin-bottom: 0 }

/* ----- Responsive ----- */
@media (max-width: 820px) {
  #belmar-nav { display: none !important }
  #belmar-burger { display: inline-flex !important }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}