*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --blush:     #e8c4b8;
  --rose:      #e5989b;
  --warm-gray: #9e8f85;
  --ink:       #2a1e16;
}

html, body { background: #ffffff; }
body {
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ═══════════ NAVBAR ═══════════ */
#navbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 94%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 56px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 100px;
  border: 1px solid transparent;
  box-shadow: none;
  overflow: visible;
  /* Start invisible — JS shows after hero placed */
  opacity: 0;
  transition: opacity 0.4s ease;
}
#navbar.ready { opacity: 1; }

/* scrolled state handled by JS */

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 3px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.45s ease;
}
.nav-logo em {
  font-style: italic;
  color: #fff;
  transition: color 0.45s ease;
}
#navbar.scrolled .nav-logo     { color: var(--ink); }
#navbar.scrolled .nav-logo em  { color: var(--rose); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  transition: color 0.4s ease;
  white-space: nowrap;
}
.nav-links a:hover                  { color: #fff; }
#navbar.scrolled .nav-links a       { color: var(--warm-gray); }
#navbar.scrolled .nav-links a:hover { color: var(--ink); }

/* ═══════════ HERO ═══════════ */
#hero-sticky {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  background: transparent;
  overflow: hidden; z-index: 5;
}
.hphoto { position: absolute; }
.hphoto-inner { width:100%; height:100%; overflow:hidden; border-radius:15px; }
.hphoto-inner .ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:64px; position:relative;
}
.hphoto-inner .ph img,
.moment-print-photo img {
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center center;
}
.ph1 { background: linear-gradient(135deg,#b5838d,#e5989b); }
.ph2 { background: linear-gradient(135deg,#6d6875,#c9b8c8); }
.ph3 { background: linear-gradient(135deg,#3d2b1f,#8c6048); }
.ph4 { background: linear-gradient(135deg,#9c6644,#ddb892); }
.ph5 { background: linear-gradient(135deg,#4a6741,#9abf8f); }

#hero-title {
  position:absolute; z-index:20; text-align:center; pointer-events:none;
  top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap;
}
.hero-eyebrow {
  font-family:'Jost',sans-serif; font-weight:200; font-size:11px;
  letter-spacing:6px; text-transform:uppercase; color:#ffffff;
  margin-bottom:10px; text-shadow:0 10px 30px rgba(0,0,0,.4);
}
.hero-names {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(40px,7vw,82px); color:#ffffff;
  line-height:1; letter-spacing:-1px; text-shadow:0 12px 34px rgba(0,0,0,.35);
}
.hero-names em { font-style:italic; color:#ffffff; }
.hero-amp { font-size:.65em; color:#ffffff; font-style:normal; margin:0 5px; }

#scroll-cue {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#c4b5ab; font-size:10px; letter-spacing:3px; text-transform:uppercase;
}
.scroll-line { width:1px; height:36px; background:#ddd0c8; position:relative; overflow:hidden; }
.scroll-line::after {
  content:''; position:absolute; top:-100%; left:0;
  width:100%; height:100%; background:var(--rose);
  animation:linedown 1.8s ease-in-out infinite;
}
@keyframes linedown { 0%{top:-100%} 100%{top:100%} }
#hero-driver { height:420vh; }

/* ═══════════ COLORING TEXT ═══════════ */
#coloring-text-section {
  position:relative; z-index:2; background:transparent;
  padding:130px 40px 120px; display:flex; align-items:center; justify-content:center;
}
#coloring-text-section::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60px; height:1px; background:var(--rose); opacity:.3;
}
.coloring-text {
  max-width:780px; font-family:'Cormorant Garamond',serif;
  font-size:clamp(24px,3.8vw,48px); font-weight:300; line-height:1.5; text-align:center;
}
.coloring-text .word { display:inline-block; white-space:nowrap; margin-right:.26em; }
.coloring-text .char { display:inline-block; color:#ddd5cd; }

/* ═══════════ MOMENTS ═══════════ */
#moments-section { position:relative; z-index:2; background:transparent; }

.moments-header { text-align:center; padding:100px 40px 70px; position:relative; }
.moments-header::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60px; height:1px; background:var(--rose); opacity:.3;
}
.moments-eyebrow { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:14px; }
.moments-title { font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,64px); font-weight:300; color:var(--ink); line-height:1.1; }
.moments-title em { font-style:italic; color:var(--rose); }

.moments-body { display:flex; align-items:flex-start; max-width:1080px; margin:0 auto; padding:0 60px; gap:80px; }
.moments-photos { flex:0 0 auto; }
.photo-slot { height:100vh; position:relative; }
.photo-sticky { position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }

.moment-print {
  background:#fff; padding:15px 15px 56px 15px;
  box-shadow:0 8px 48px rgba(0,0,0,.13),0 1px 6px rgba(0,0,0,.06);
  width:440px; border:1px solid rgba(0,0,0,.04); transition:opacity 0.4s ease;
}
.moment-print-photo { width:100%; aspect-ratio:16/10; overflow:hidden; }
.moment-print-photo .ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:80px; }
.moment-print-caption { display:flex; align-items:center; justify-content:space-between; padding-top:10px; }
.print-date { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13px; color:#b0a099; letter-spacing:1px; }
.print-num { font-size:11px; letter-spacing:2px; color:#c8bdb8; }

.moments-info-col { flex:1; position:sticky; top:0; height:100vh; display:flex; align-items:center; }
.moments-info-panel { width:100%; }
.mi-index { font-size:11px; letter-spacing:4px; color:var(--warm-gray); text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.mi-line { width:32px; height:1px; background:var(--rose); }
.mi-date { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--rose); margin-bottom:12px; transition:opacity .3s; }
.mi-name { font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.8vw,34px); font-weight:300; color:var(--ink); line-height:1.2; margin-bottom:16px; transition:opacity .3s; }
.mi-desc { font-size:14px; color:var(--warm-gray); line-height:1.9; font-weight:300; transition:opacity .3s; }
.mi-dots { display:flex; gap:8px; margin-top:28px; }
.mi-dot { width:6px; height:6px; border-radius:50%; background:#e0d4cc; transition:background .3s, transform .3s; }
.mi-dot.active { background:var(--rose); transform:scale(1.4); }

/* ═══════════ COUNTER ═══════════ */
#counter-section {
  position:relative; z-index:2; background:transparent;
  padding:140px 40px 160px; text-align:center; overflow:hidden;
}
#counter-section::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60px; height:1px; background:var(--rose); opacity:.3;
}
.counter-eyebrow { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:24px; }
.counter-number { font-family:'Cormorant Garamond',serif; font-size:clamp(90px,20vw,210px); font-weight:300; color:var(--ink); line-height:.9; letter-spacing:-4px; }
.counter-unit { font-family:'Cormorant Garamond',serif; font-size:clamp(18px,2.5vw,32px); font-weight:300; font-style:italic; color:var(--rose); margin-top:16px; letter-spacing:2px; }
.counter-sub { font-size:14px; color:var(--warm-gray); margin-top:24px; letter-spacing:1px; line-height:2; }
.counter-bg-text {
  position:absolute; font-family:'Cormorant Garamond',serif;
  font-size:clamp(200px,35vw,420px); font-style:italic; font-weight:300;
  color:rgba(196,122,106,.06); top:50%; left:50%; transform:translate(-50%,-50%);
  white-space:nowrap; pointer-events:none; user-select:none;
}
.counter-reveal { position:relative; z-index:2; opacity:0; transform:translateY(36px); transition:opacity 1s ease, transform 1s ease; }
.counter-reveal.visible { opacity:1; transform:none; }
.counter-signoff { margin-top:60px; font-family:'Cormorant Garamond',serif; font-size:clamp(16px,2vw,22px); font-style:italic; color:rgba(196,122,106,.5); letter-spacing:2px; }

/* ═══════════ PROYECTO NUEVO ═══════════ */
#project-section { position:relative; z-index:2; background:transparent; padding:100px 24px 120px; display:flex; justify-content:center; overflow:visible; }
#project-card { position:relative; max-width:1500px; width:100%; display:grid; gap:32px; grid-template-columns:1fr; align-items:start; overflow:visible; }
#project-image { position:relative; width:100%; overflow:visible; border-radius:28px; background:transparent; }
#project-image img { width:100%; height:auto; display:block; object-fit:contain; object-position:center center; background:transparent; }
#project-info { display:flex; flex-direction:column; gap:18px; position:relative; z-index:1; }
#project-title { font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,64px); font-weight:300; color:var(--ink); line-height:1.05; }
#project-subtitle { font-size:16px; color:var(--rose); text-transform:uppercase; letter-spacing:3px; font-weight:400; }
#project-text { font-size:16px; color:var(--warm-gray); line-height:1.85; }

@media (max-width:960px) { #project-section { padding:70px 16px 90px; } }
@media (max-width:600px) {
  #project-title { font-size:clamp(28px,8vw,40px); }
  #project-section { padding:50px 12px 70px; }
}

/* ═══════════ PAGE TRANSITION FADE ═══════════ */
#page-fade {
  position: fixed; inset: 0;
  background: #fff; z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
#page-fade.fade-out { opacity: 1; pointer-events: all; }

body { animation: fadeInPage 0.5s ease forwards; }
@keyframes fadeInPage {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════ CLICK PARTICLES ═══════════ */
.particle {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 99999;
  animation: particleBurst 0.7s ease-out forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}




/* ═══════════════════════════════════════
   MOBILE & TABLET (<=1024px)
═══════════════════════════════════════ */
@media (max-width: 1024px) {

  /* HERO: not sticky on mobile */
  #hero-sticky { position:relative !important; top:auto !important; height:100vh; overflow:hidden; }
  #hero-driver { height:0 !important; }
  #p3 .hphoto-inner { border-radius:0 !important; }

  /* COLORING TEXT */
  #coloring-text-section { padding:80px 24px; }

  /* MOMENTS: hide right info panel, show stacked layout */
  .moments-info-col { display:none !important; }
  .moments-body { flex-direction:column; padding:0; gap:0; max-width:100%; }
  .moments-photos { width:100%; }

  /* Each slot: auto height, no sticky */
  .photo-slot { height:auto !important; }
  .photo-sticky {
    position:relative !important;
    top:auto !important;
    height:auto !important;
    display:block;
  }

  /* Photo: full width */
  .moment-print {
    width:100%; max-width:100%;
    border-radius:0;
    border-left:none; border-right:none; border-top:none;
    box-shadow:0 2px 20px rgba(0,0,0,.08);
    padding:12px 12px 16px;
  }



  /* COUNTER */
  #counter-section { padding:80px 24px 100px; }
  .counter-sub { font-size:13px; }

  /* PROJECT */
  #project-section { padding:50px 16px 70px; }
}

@media (min-width:641px) and (max-width:1024px) {
  .moment-print { max-width:540px; margin:0 auto; border:1px solid rgba(0,0,0,.04); }
  .moment-info-mobile { max-width:540px; margin:0 auto; }
}

/* ═══════════════════════════════════════
   HAMBURGER & DRAWER
═══════════════════════════════════════ */
.nav-burger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; cursor:pointer; padding:6px; flex-shrink:0; z-index:1002;
}
.nav-burger span {
  display:block; width:22px; height:2px; background:#fff;
  border-radius:2px; transition:transform .3s, opacity .3s, background .4s;
}
.nav-burger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

/* Drawer hidden by default */
.nav-drawer {
  display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(249,244,238,.97);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center; gap:32px;
}
.nav-drawer.open { display:flex; animation:drawerIn .3s ease forwards; }
@keyframes drawerIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

.nav-drawer a {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px,8vw,52px); font-weight:300;
  color:var(--ink); text-decoration:none; letter-spacing:2px; transition:color .2s;
}
.nav-drawer a:hover { color:var(--rose); }

/* BIG touch target for close button */
.nav-drawer-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none;
  font-size:48px; line-height:1; color:var(--warm-gray);
  cursor:pointer; z-index:9999;
  padding:12px 18px; min-width:64px; min-height:64px;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s;
}
.nav-drawer-close:hover { color:var(--ink); }

@media (max-width:640px) {
  .nav-links { display:none !important; }
  .nav-burger { display:flex; }
  #navbar { overflow:visible !important; }
}

@media (min-width:641px) and (max-width:860px) {
  #navbar { width:94% !important; padding:0 20px !important; height:50px; }
  .nav-links { gap:16px; }
  .nav-links a { font-size:10px; letter-spacing:1.5px; }
  .nav-logo { font-size:17px; }
}