/* Acréscimos ao style.css original (não mexe no SCSS) */
.header-button { text-decoration: none; display: inline-block; }
.header-button:hover { background-color: #d34040; border-color: #d34040; }
/* No celular o botão do topo some (já tem o "Agendar horário" grande logo abaixo) */
@media screen and (max-width: 768px) { .header-button { display: none; } }
a.button-contact { display: inline-block; text-decoration: none; }
.dropdown-content a { font-size: 15px; }
.link-assinatura {
  color: #fff; opacity: .85; font-size: 14px; margin-top: 4px; text-decoration: underline; text-underline-offset: 4px;
}
.link-assinatura:hover { opacity: 1; }
.link-assinatura i { color: #f5c542; }

a.haircut { text-decoration: none; color: inherit; cursor: pointer; transition: transform .2s; }
a.haircut:hover { transform: translateY(-4px); }
a.haircut .haircut-info button { cursor: pointer; }

.cta-assinatura {
  background: #0c2135; color: #fff; display: flex; align-items: center; justify-content: center;
  gap: 40px; padding: 56px 16px; flex-wrap: wrap; text-align: left;
}
.cta-assinatura h2 { font-size: 32px; margin-bottom: 8px; }
.cta-assinatura p { max-width: 460px; line-height: 1.6; opacity: .85; }
@media (max-width: 768px) {
  .cta-assinatura { text-align: center; gap: 18px; }
  .dropdown:hover .dropdown-content { display: none; } /* no celular o botão leva direto à página */
}

/* menu de serviços sempre por cima de tudo (antes a estrela do "Seja assinante" aparecia por cima) */
.dropdown { position: relative; z-index: 30; }
.dropdown-content { z-index: 31; left: 50%; transform: translateX(-50%); margin-top: -10px; }
.link-assinatura { position: relative; z-index: 1; margin-top: 18px; }

/* serviço sem foto: mostra o logo */
.haircut-sem-foto { aspect-ratio: 900 / 1093; max-width: 354px; width: 100%; background: #06121e; display: grid; place-items: center; }
.haircut-sem-foto img { width: 45%; }
.haircut > img { aspect-ratio: 900 / 1093; object-fit: cover; }

/* rodapé: endereço centralizado e crédito */
.footer .footer-endereco { text-align: center; font-size: 13px; line-height: 1.6; padding: 0 24px; max-width: 520px; opacity: .9; }
.footer .powered { font-size: 11px; opacity: .55; letter-spacing: .3px; margin-top: -8px; }
.footer .powered b { letter-spacing: .6px; }