/* Fabiana Medina — Estética & Bem Estar
   Transcrito 1:1 a partir do design (.dc.html) aprovado. Não alterar cores,
   fontes, espaçamentos ou textos sem atualizar também os arquivos-fonte do design. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFDFC;
  color: #3A2E2E;
  -webkit-font-smoothing: antialiased;
}

a { color: #A16464; text-decoration: none; }
a:hover { color: #C27B7A; }

::selection { background: #FCE9E8; color: #A16464; }

@keyframes fmFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-2.5deg); }
}

@keyframes fmDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-18px,12px) scale(1.06); }
}

/* Micro-interação de clique (equivalente ao style-active="transform: scale(.98)" do design) */
[data-active]:active { transform: scale(.98) !important; }

/* Navegação responsiva (breakpoint 1024px, igual ao design original) */
.nav-desktop { display: flex; }
.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .nav-desktop { display: none !important; }
  .nav-toggle { display: flex !important; }
}

.mobile-menu { display: none; }
.mobile-menu.is-open { display: flex; }

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Entrada em cascata dos links da página "Links" */
[data-track] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-track].is-visible {
  opacity: 1;
  transform: none;
}

/* Marquee de objetivos — duas fileiras rolando em direções opostas */
.marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-row + .marquee-row {
  margin-top: 12px;
}
.marquee-row {
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: marquee-left 34s linear infinite;
}
.marquee-row--reverse .marquee-track {
  animation-name: marquee-right;
  animation-duration: 40s;
}
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-pill {
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid #F6DCDB;
  border-radius: 999px;
  padding: 15px 26px;
  font-size: 13.5px;
  color: #4A3B3B;
  background: #FFFCFB;
  transition: background .4s ease, border-color .4s ease;
}
.marquee-wrap:hover .marquee-pill {
  border-color: #EDB4B3;
}
@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}