/**
 * shared.css — Sorriso nos Lábios
 * CSS comum partilhado por: sorriso-nos-labios.html, workshops.html, blog.html, galeria.html
 * Nav logo + Footer + Watermark
 */

/* ── WATERMARK DE FUNDO ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #EDE8E1;
  background-image: url('imagesorriso/logotransparente.png');
  background-repeat: repeat;
  background-size: 180px auto;
  opacity: .13;
  pointer-events: none;
}

/* ── NAV LOGO ── */
/* Logo visual: 80px | margens: -12px cada | layout: 56px | padding nav: 2px | altura nav: 60px */
.nav-logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter .4s;
  display: block;
  margin-top: -12px;
  margin-bottom: -12px;
}
#nav.solid .nav-logo img {
  filter: none;
}

/* ── FOOTER ── */
footer { background: #330225; color: rgba(255,255,255,.45); font-size: .82rem; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3.5rem; padding: 4.5rem 8% 3.5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.f-logo-wrap { margin-bottom: -30px; margin-top: -30px; }
.f-logo-wrap img { width: auto; height: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .75; }
.f-tagline { font-size: .82rem; color: rgba(255,255,255,.4); line-height: 1.75; margin-bottom: 1.6rem; max-width: 240px; }
.f-socials { display: flex; gap: .6rem; flex-wrap: wrap; }
.f-col-title { font-size: .65rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 1.2rem; }
.f-links { display: flex; flex-direction: column; gap: .55rem; }
.f-links a { color: rgba(255,255,255,.45); text-decoration: none; font-size: .82rem; transition: color .25s; display: flex; align-items: center; gap: .4rem; }
.f-links a:hover { color: var(--accent); }
.f-links a::before { content: '›'; opacity: .4; font-size: .7rem; }
.f-hours { display: flex; flex-direction: column; gap: .55rem; }
.f-hour-row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font-size: .8rem; }
.f-hour-day { color: rgba(255,255,255,.35); font-size: .75rem; }
.f-hour-time { color: rgba(255,255,255,.6); font-weight: 500; white-space: nowrap; }
.f-hour-row.closed .f-hour-time { color: rgba(255,255,255,.25); }
.f-contact-list { display: flex; flex-direction: column; gap: .7rem; }
.f-contact-item { display: flex; align-items: flex-start; gap: .65rem; font-size: .8rem; color: rgba(255,255,255,.45); }
.f-contact-item a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .25s; }
.f-contact-item a:hover { color: var(--accent); }
.f-contact-ico { font-size: .9rem; flex-shrink: 0; margin-top: .05rem; }
.footer-bottom { padding: 1.4rem 8%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem; }
.f-copy { font-size: .72rem; color: rgba(255,255,255,.25); }
.f-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.f-legal a { font-size: .72rem; color: rgba(255,255,255,.25); text-decoration: none; transition: color .25s; }
.f-legal a:hover { color: var(--accent); }
.f-made { font-size: .68rem; color: rgba(255,255,255,.18); }
@media(max-width:900px) { .footer-main { grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 3rem 8% 2.5rem; } }
@media(max-width:560px) { .footer-main { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } }


ul.rede-social {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}
.rede-social .rs-item {
  margin: 0 10px;
  position: relative;
}
.rede-social .rs-item .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.rede-social .rs-item:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.rede-social .rs-item a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}
.rede-social .rs-item a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
  color: white;
}
.rede-social .rs-item a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.rede-social .rs-item a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.rede-social .rs-item a:hover .filled {
  height: 100%;
}
.rede-social .rs-item a[data-social="whatsapp"] .filled,
.rede-social .rs-item a[data-social="whatsapp"] ~ .tooltip {
  background-color: #128c7e;
}
.rede-social .rs-item a[data-social="instagram"] .filled,
.rede-social .rs-item a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(45deg, #405de6, #5b51db, #b33ab4, #c135b4, #e1306c, #fd1f1f);
}
.rede-social .rs-item a[data-social="youtube"] .filled,
.rede-social .rs-item a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}

/* ── UTILITÁRIOS DE ANIMAÇÃO ── */
.fu { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.fu.vis { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }