/* =========================================================
   Rosa Safira Moda Íntima — Design System
   Adaptado da referência VITALIS para a identidade da marca
   (rosa, vinho, nude, branco) — elegante e feminino.
   ========================================================= */

:root {
  --wine: #6E2348;
  --wine-dark: #4E1733;
  --rosa: #C56B86;
  --rosa-soft: #E3AFBE;
  --nude: #E6D2C5;
  --blush: #FBF5F2;
  --ink: #2B1F26;
  --grid-color: rgba(110, 35, 72, 0.06);
  --beam-color: #C56B86;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  background-color: var(--blush);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

::selection { background: var(--rosa-soft); color: var(--wine-dark); }

/* ---------- Label / olho de seção ---------- */
.eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rosa-deep, #A84C68);
  font-weight: 500;
}

/* ---------- Linhas de grade decorativas ---------- */
.grid-line-v {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--grid-color); z-index: 0;
}
.grid-line-h {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--grid-color); z-index: 0;
}

/* ---------- Beams (feixes de luz) ---------- */
@keyframes beam-h {
  0% { left: -200px; opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes beam-v {
  0% { top: -200px; opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.beam-h {
  position: absolute; height: 1px; width: 200px; z-index: 10; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--beam-color), transparent);
}
.beam-v {
  position: absolute; width: 1px; height: 200px; z-index: 10; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--beam-color), transparent);
}

/* ---------- Animações de entrada ---------- */
@keyframes reveal-up {
  0% { clip-path: inset(100% 0 0 0); transform: translateY(24px); opacity: 0; }
  100% { clip-path: inset(0 0 0 0); transform: translateY(0); opacity: 1; }
}
.animate-reveal { opacity: 0; animation: reveal-up 1s cubic-bezier(0.16,1,0.3,1) forwards; }

.scroll-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }

.delay-100 { animation-delay: .1s; transition-delay: .1s; }
.delay-200 { animation-delay: .2s; transition-delay: .2s; }
.delay-300 { animation-delay: .3s; transition-delay: .3s; }
.delay-400 { animation-delay: .4s; transition-delay: .4s; }
.delay-500 { animation-delay: .5s; transition-delay: .5s; }

/* ---------- Botões ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--wine); color: #fff;
  padding: .9rem 1.6rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
  transition: all .35s ease; box-shadow: 0 12px 30px -12px rgba(110,35,72,.55);
}
.btn-primary:hover { background: var(--wine-dark); transform: translateY(-2px); }

.btn-pill {
  display: inline-flex; align-items: center; gap: .85rem;
  background: #fff; border: 1px solid var(--nude);
  padding: .45rem .45rem .45rem 1.4rem; border-radius: 9999px;
  font-size: .82rem; font-weight: 500; color: var(--ink);
  transition: all .35s ease;
}
.btn-pill:hover { border-color: var(--rosa); }
.btn-pill .ico {
  width: 2.3rem; height: 2.3rem; border-radius: 9999px;
  background: var(--blush); color: var(--wine);
  display: flex; align-items: center; justify-content: center;
  transition: all .35s ease;
}
.btn-pill:hover .ico { background: var(--wine); color: #fff; }

.btn-whats {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--wine); color: #fff;
  padding: .7rem 1.1rem; border-radius: 9999px;
  font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em;
  transition: all .3s ease; width: 100%;
}
.btn-whats:hover { background: #1faa55; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--wine); transition: gap .3s ease, color .3s ease;
}
.link-arrow:hover { color: var(--rosa-deep, #A84C68); gap: .7rem; }

/* ---------- Card de produto ---------- */
.product-card {
  background: #fff; border: 1px solid #F0E3DC; border-radius: 6px;
  overflow: hidden; transition: box-shadow .4s ease, transform .4s ease, border-color .4s ease;
  display: flex; flex-direction: column;
}
.product-card:hover {
  box-shadow: 0 24px 60px -24px rgba(110,35,72,.3);
  transform: translateY(-4px); border-color: var(--rosa-soft);
}
.product-media { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--nude-light, #F2E5DC); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.16,1,0.3,1); }
.product-card:hover .product-media img { transform: scale(1.06); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(43,31,38,.92); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 5vw;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; top: 1.4rem; right: 1.6rem; color: #fff;
  width: 3rem; height: 3rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .3s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,.12); }

/* ---------- Header ---------- */
.nav-link {
  position: relative; font-size: .76rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
  transition: color .3s ease; padding: .25rem 0;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--wine); transition: width .3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--wine); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.iconify { display: inline-block; }

/* ---------- Faixa marquee ---------- */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 28s linear infinite; }

/* ---------- Utilidades ---------- */
.text-balance { text-wrap: balance; }
.hero-overlay { background: linear-gradient(90deg, rgba(43,31,38,.55) 0%, rgba(43,31,38,.15) 55%, transparent 100%); }