/* base.css — Paula Rached Fotografia
   Tokens de design + reset + componentes globais */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  --bg:       #F2F2F0;
  --bg-soft:  #E2E1DE;
  --bg-mid:   #D3D2CE;
  --ink:      #33322F;
  --ink-soft: #75736E;
  --line:     #D0CFCA;
  --accent:   #5E5C57;
  --accent-s: #8C8A84;
  --walnut:   #8A6A4F;
  --max-w:    1760px;
  --pad:      4vw;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100% }
a   { color:inherit; text-decoration:none }

/* Utilitários */
.wrap    { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad) }
.eyebrow { font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); font-weight:400 }
h1,h2,h3,.serif { font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--ink) }
h2 { font-size:clamp(2rem,4.5vw,3.1rem); line-height:1.15; margin-top:.5rem }

.fadein     { opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease }
.fadein.vis { opacity:1; transform:none }

/* Botão / CTA */
.btn {
  display:inline-block;
  padding:.9rem 2.4rem;
  border:1px solid var(--ink);
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  transition:all .35s; color:var(--ink); cursor:pointer;
  background:transparent; font-family:'Jost',sans-serif;
}
.btn:hover { background:var(--ink); color:var(--bg) }
.btn-ghost {
  border-color: var(--accent-s);
  color: var(--ink-soft);
}
.btn-ghost:hover { background:var(--ink); border-color:var(--ink); color:var(--bg) }

/* Seções */
section { padding:7rem 0 }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3.5rem }
.sec-link {
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--line);
  padding-bottom:4px; white-space:nowrap; transition:.3s;
}
.sec-link:hover { color:var(--accent); border-color:var(--accent) }

/* Header */
#site-header {
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--line);
  transition:all .4s ease;
}
#site-header .hd-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--pad);
  display:flex; flex-direction:column; align-items:center;
  gap:2.2rem; padding-top:1.6rem; padding-bottom:1.4rem;
  transition:all .4s ease;
}
#site-header.compact .hd-inner { gap:1rem; padding-top:.8rem; padding-bottom:.7rem }

.logo img { height:104px; width:auto; display:block; transition:height .4s ease }
#site-header.compact .logo img { height:54px }

#site-header nav {
  display:flex; gap:2.8rem;
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
}
#site-header nav a { position:relative; padding-bottom:4px; transition:color .3s }
#site-header nav a:hover { color:var(--ink) }
#site-header nav a::after {
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--accent); transition:width .3s;
}
#site-header nav a:hover::after,
#site-header nav a.active::after { width:100% }

.burger { display:none; background:none; border:none; color:var(--ink); font-size:1.5rem; cursor:pointer }

/* Menu mobile fullscreen */
#mobile-menu {
  display:none; position:fixed; inset:0; z-index:49;
  background:var(--bg); flex-direction:column;
  align-items:center; justify-content:center; gap:2.4rem;
}
#mobile-menu.open { display:flex }
#mobile-menu a { font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:var(--ink) }
#mobile-menu .close { position:absolute; top:1.4rem; right:var(--pad); font-size:1.8rem; background:none; border:none; cursor:pointer; color:var(--ink) }

/* Footer */
#site-footer {
  border-top:1px solid var(--line);
  padding:4rem 0 2.5rem;
  background:var(--bg);
}
.foot-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; align-items:start;
}
.foot-inner > div:first-child { display:flex }
.foot-inner .logo { display:inline-block; line-height:0 }
.foot-inner .logo img { margin:0; display:block }
.foot-inner nav { display:flex; flex-direction:column; gap:.65rem; font-size:.74rem; color:var(--ink-soft) }
.foot-inner nav a:hover { color:var(--ink) }
.foot-copy {
  max-width:var(--max-w); margin:2.5rem auto 0;
  padding:1.5rem var(--pad) 0; border-top:1px solid var(--line);
  font-size:.68rem; letter-spacing:.06em; color:var(--ink-soft);
}

/* Etiqueta de galeria */
.gallery-tag { padding-left:1.15rem; border-left:1px solid var(--accent); margin-top:1.4rem }
.gallery-tag h3 { font-size:1.35rem; line-height:1.2 }
.gallery-tag .meta { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:.4rem; line-height:2 }
.gallery-tag .price { font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-top:.5rem }

/* Apresentação de print — imagem limpa, sombra suave */
.print-frame {
  box-shadow:0 22px 55px rgba(45,44,42,.16);
  transition:transform .6s ease, box-shadow .6s ease;
  overflow:hidden;
}
.print-frame:hover { transform:translateY(-7px); box-shadow:0 30px 65px rgba(45,44,42,.22) }
.print-frame .ph { aspect-ratio:4/5; background-size:cover; background-position:center }

/* Lightbox */
#lightbox {
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(237,237,235,.97); backdrop-filter:blur(8px);
  align-items:center; justify-content:center;
  flex-direction:column; gap:1.4rem; padding:3.5rem 1rem 2rem;
}
#lightbox.open { display:flex }
#lightbox img { max-height:calc(100vh - 13rem); max-width:92vw; object-fit:contain; box-shadow:0 30px 80px rgba(45,44,42,.25) }
#lightbox .lb-close { position:absolute; top:1.5rem; right:2rem; font-size:2rem; background:none; border:none; cursor:pointer; color:var(--ink); line-height:1 }
#lightbox .lb-prev,
#lightbox .lb-next { position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; background:none; border:none; cursor:pointer; color:var(--ink); padding:1rem }
#lightbox .lb-prev { left:1rem }
#lightbox .lb-next { right:1rem }
#lightbox .lb-caption { text-align:center; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); flex-shrink:0 }

/* Skeleton loader */
.skeleton { background:linear-gradient(90deg,var(--bg-soft) 25%,var(--bg-mid) 50%,var(--bg-soft) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Responsivo */
@media(max-width:900px){
  #site-header nav { display:none }
  .burger { display:block }
  section { padding:4.5rem 0 }
  .sec-head { flex-direction:column; align-items:flex-start; gap:.8rem; margin-bottom:2.2rem }
  .foot-inner { grid-template-columns:1fr 1fr; gap:2rem }
  #site-header .hd-inner { gap:1.2rem; padding-top:1rem; padding-bottom:.9rem }
  .logo img { height:72px }
  #site-header.compact .logo img { height:48px }
}
@media(max-width:560px){
  .foot-inner { grid-template-columns:1fr }
}