/* ===========================================================
   ANDRI STUDIO — Andrielly Melo (Body Piercer & Estética Facial)
   Paleta rosé/creme editorial — ver briefing.md pra fontes/decisões
   =========================================================== */

:root{
  --rose: #D9A8A3;
  --rose-deep: #C8938D;
  --cream: #F5F0DC;
  --text: #1A1A1A;
  --white: #FFFFFF;
  --yellow-pastel: #F3E7AE;
  --hairline: rgba(26,26,26,0.14);
  --hairline-on-rose: rgba(255,255,255,0.35);

  --font-script: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Bebas Neue', 'Anton', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 640px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ---------- reveal on scroll ---------- */
.reveal{ transition: opacity .7s ease, transform .7s ease; }
.reveal.pre{ opacity:0; transform: translateY(24px); }

/* ---------- header: só hambúrguer, fixo, transparente ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 90;
  display:flex; justify-content:flex-end; align-items:center;
  padding: 22px 24px;
  pointer-events: none;
}
.hamburger{
  pointer-events: auto;
  width: 44px; height: 44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 6px;
  background: rgba(26,26,26,0.18);
  border: none; border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .3s ease;
}
.hamburger:hover{ background: rgba(26,26,26,0.3); }
.hamburger span{
  width: 18px; height: 1.5px; background: var(--white);
  transition: transform .3s ease, opacity .3s ease;
}
.hamburger.on span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.hamburger.on span:nth-child(2){ opacity: 0; }
.hamburger.on span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

.site-header.dark .hamburger span{ background: var(--text); }
.site-header.dark .hamburger{ background: rgba(255,255,255,0.5); }

/* ---------- nav painel (slide-in) ---------- */
.mobile-nav{
  position: fixed; inset: 0; z-index: 89;
  background: var(--rose);
  display:flex; align-items:center; justify-content:center;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.mobile-nav.open{ opacity:1; visibility: visible; transform: translateY(0); }
.mobile-nav ul{ list-style:none; text-align:center; }
.mobile-nav li{ margin: 18px 0; }
.mobile-nav a{
  font-family: var(--font-script); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 6vw, 40px);
  color: var(--white);
}
.mobile-nav .mn-sub{
  margin-top: 40px; display:flex; gap:22px; justify-content:center;
  font-family: var(--font-body); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
}

/* ---------- fotos reais ---------- */
.hero-photo, .link-card-photo{ position:absolute; inset:0; z-index:0; }
.photo-real{ width:100%; height:100%; object-fit:cover; display:block; }
.about-photo{ width:100%; height:340px; border-radius:16px; overflow:hidden; margin-bottom:40px; }
.about-photo-img{ object-position: center 18%; transform: scale(1.06); }

/* ---------- placeholder de foto (fallback, sem imagem real) ---------- */
.photo-ph{
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(160deg, var(--rose) 0%, var(--rose-deep) 55%, #b9827c 100%);
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.photo-ph::before{
  content: attr(data-letter);
  font-family: var(--font-script); font-style: italic; font-weight: 500;
  font-size: 40%;
  color: rgba(255,255,255,0.28);
  line-height: 1;
}
.photo-ph .ph-tag{
  position: absolute; left: 14px; bottom: 14px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--white); background: rgba(26,26,26,0.32);
  padding: 6px 11px; border-radius: 30px;
  backdrop-filter: blur(4px);
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
}
.hero .photo-ph{ position:absolute; inset:0; }
.hero .photo-ph::before{ font-size: 55%; }
.hero-overlay{
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 28px 56px;
  background: linear-gradient(to top, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.18) 55%, transparent 100%);
  padding-top: 140px;
}
.hero-tag{
  display:inline-block;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow-pastel);
  border: 1px solid rgba(243,231,174,0.55);
  padding: 6px 14px; border-radius: 30px;
  margin-bottom: 18px;
}
.hero-name{
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(44px, 12vw, 76px);
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 16px;
}
.hero-bio{
  max-width: 420px;
  color: rgba(255,255,255,0.92);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ---------- link cards ---------- */
.links{
  background: var(--cream);
  padding: 88px 0 40px;
}
.links .wrap{ display:flex; flex-direction:column; gap: 26px; }
.link-card{
  position: relative;
  display:block;
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
  isolation: isolate;
}
.link-card .photo-ph{ position:absolute; inset:0; }
.link-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(26,26,26,0.62) 0%, rgba(26,26,26,0.08) 60%, transparent 100%);
  z-index: 1;
}
.link-card-text{
  position: relative; z-index: 2;
  height: 100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 22px 24px;
}
.link-card-title{
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: .03em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.link-card-desc{
  color: rgba(255,255,255,0.88);
  font-size: 14px; max-width: 320px;
}
.link-card-badge{
  position:absolute; top:16px; right:16px; z-index:2;
  width: 34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(3px);
}
.link-card-badge svg{ width:14px; height:14px; }
.link-card.is-pending{ cursor: default; }
.link-card.is-pending .link-card-badge{ opacity:.5; }

/* ---------- o que você vai encontrar ---------- */
.find{
  background: var(--cream);
  padding: 96px 0 100px;
}
.find-title{
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(34px, 7vw, 48px);
  margin-bottom: 48px;
}
.find-item{
  display:flex; flex-direction:column; gap:6px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
}
.find-item:first-of-type{ border-top: 1px solid var(--hairline); }
.find-item-title{
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: 21px;
}
.find-item-desc{
  font-size: 14.5px; color: rgba(26,26,26,0.72);
  max-width: 460px;
}

/* ---------- citação ---------- */
.quote{
  background: var(--rose);
  padding: 100px 0;
  text-align: center;
}
.quote-mark{ font-family: var(--font-script); font-style: italic; font-size: 64px; line-height: 1; margin-bottom: 8px; color: var(--white); opacity: .85; }
.quote-text{
  font-family: var(--font-script); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 5.5vw, 34px);
  color: var(--white);
  line-height: 1.4;
  max-width: 480px;
  margin: 0 auto;
}

/* ---------- sobre mim ---------- */
.about{
  background: var(--cream);
  padding: 96px 0;
}
.about-hi{
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(30px, 6.5vw, 42px);
  margin-bottom: 22px;
}
.about p{
  font-size: 15.5px;
  color: rgba(26,26,26,0.82);
  max-width: 480px;
  margin-bottom: 16px;
}

/* ---------- contato / fechamento ---------- */
.contact{
  background: var(--rose);
  color: var(--white);
  padding: 100px 0 60px;
}
.contact-title{
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(34px, 7.5vw, 50px);
  margin-bottom: 18px;
}
.contact-invite{
  font-size: 15.5px;
  color: rgba(255,255,255,0.9);
  max-width: 420px;
  margin-bottom: 44px;
}
.contact-list{ display:flex; flex-direction:column; }
.contact-item{
  display:flex; align-items:center; gap:16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline-on-rose);
}
.contact-item:first-child{ border-top: 1px solid var(--hairline-on-rose); }
.contact-icon{
  width: 38px; height:38px; border-radius:50%;
  border: 1px solid rgba(255,255,255,0.55);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.contact-icon svg{ width:17px; height:17px; }
.contact-text{ display:flex; flex-direction:column; }
.contact-label{ font-size: 11.5px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,0.7); }
.contact-value{ font-size: 16px; font-weight: 500; }

.contact-map{
  position: relative;
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
  aspect-ratio: 16/10;
}
.contact-map iframe{
  width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(.35) contrast(1.05);
  pointer-events: none;
}
.contact-map-link{ position: absolute; inset: 0; }

/* ---------- CTA fixo de agendamento ---------- */
.fab-agendar{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; align-items: center; gap: 9px;
  background: var(--text);
  color: var(--white);
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 28px rgba(26,26,26,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fab-agendar:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(26,26,26,0.4); }
.fab-agendar svg{ width: 17px; height: 17px; flex-shrink: 0; }

.footer{
  background: var(--rose);
  text-align:center;
  padding: 30px 0 40px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  border-top: 1px solid var(--hairline-on-rose);
}
.footer a{ color: rgba(255,255,255,0.9); }

@media (min-width: 720px){
  .link-card{ min-height: 300px; }
  .about-photo{ height: 420px; }
}