:root {
  --bg: #040806;
  --gold: #c9a84c;
  --gold-lt: #e8c97a;
  --gold-dim: rgba(201,168,76,.22);
  --text: #ede6d8;
  --text-dim: #9a8a76;
  --fh: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Nunito', system-ui, sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--fb);
  font-weight:300;
  overflow-x:hidden;
}

/* ─── NAV ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 5%;
  transition:background .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled {
  background:rgba(4,8,6,.95);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--gold-dim);
  padding-top:.8rem; padding-bottom:.8rem;
}
.nav-logo-link { display:flex; align-items:center; flex-shrink:0; }
.nav-logo {
  height:48px;
  filter:drop-shadow(0 0 8px rgba(201,168,76,.3));
  transition:opacity .3s;
}
.nav-logo:hover { opacity:.8; }
.nav-links { list-style:none; display:flex; gap:2.8rem; }
.nav-links a {
  font-family:var(--fh);
  font-size:1.45rem;
  letter-spacing:.1em;
  color:var(--text-dim);
  text-decoration:none;
  transition:color .3s;
}
.nav-links a:hover { color:var(--gold); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; }
.hamburger span { display:block; width:28px; height:2px; background:var(--gold); transition:.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─── HERO ─── */
#hero {
  position:relative; height:100vh; min-height:600px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.hero-video {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
  filter:saturate(.7) brightness(.6);
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.5;
  filter:saturate(.7) brightness(.6);
}
.hero-grad {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 55% 65% at 15% 35%, rgba(38,10,65,.3) 0%, transparent 58%),
    radial-gradient(ellipse 50% 50% at 85% 70%, rgba(10,30,20,.25) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 50% 50%, rgba(4,8,6,0) 0%, rgba(4,8,6,.35) 60%, rgba(4,8,6,.75) 100%),
    radial-gradient(ellipse 80% 25% at 50% 100%, rgba(4,8,6,.7) 0%, transparent 80%);
}
#firefly-canvas { position:absolute; inset:0; z-index:2; pointer-events:none; }

/* Mariposa neon flotante */
.neon-butterfly-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  overflow: hidden;
}
.neon-butterfly {
  position: absolute;
  width: 168px;
  height: 132px;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center center;
  filter:
    drop-shadow(0 0 5px rgba(255, 224, 56, .95))
    drop-shadow(0 0 14px rgba(255, 210, 20, .65))
    drop-shadow(0 0 26px rgba(255, 187, 0, .35));
}
.neon-butterfly-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  mix-blend-mode: screen;
  filter:
    brightness(0) saturate(100%) invert(82%) sepia(82%) saturate(1325%) hue-rotate(1deg) brightness(106%) contrast(102%);
  animation: wingBeat var(--wing-speed, 0.18s) ease-in-out infinite alternate;
}
.neon-butterfly-img.is-gif {
  filter: none;
}
.neon-dust {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 214, 52, .95);
  box-shadow:
    0 0 6px rgba(255, 224, 94, .95),
    0 0 16px rgba(255, 198, 24, .65);
  animation: dustFade var(--d, 1800ms) ease-out forwards;
  transform: translate(0, 0);
}
@keyframes dustFade {
  0% {
    opacity: var(--o, .7);
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, -14px), var(--dy, 10px)) scale(.2);
  }
}
@keyframes wingBeat {
  from { transform: scale(1) skewY(-1.8deg) rotate(-1deg); }
  to { transform: scale(1.035, .965) skewY(2deg) rotate(1deg); }
}
.hero-content {
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
}
.hero-badge {
  font-family:var(--fh); font-size:1rem; letter-spacing:.5em;
  text-transform:uppercase; color:var(--gold-lt);
  border:1px solid var(--gold-dim); padding:.6rem 2rem;
  opacity:0; animation:fadeUp 1.2s ease forwards .5s;
}
.hero-wordmark {
  position:relative; z-index:1;
  width:min(520px, 82vw);
  filter:drop-shadow(0 0 25px rgba(201,168,76,.3));
  opacity:0; transform:translateY(22px);
  animation:fadeUp 1.5s ease forwards 1s;
}
.hero-line {
  width:90px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0; animation:fadeIn 1.5s forwards 1.8s;
}
.hero-sub {
  font-family:var(--fh); font-style:italic;
  font-size:clamp(1.1rem, 2.4vw, 1.55rem);
  color:var(--text-dim); max-width:520px; line-height:1.85;
  opacity:0; animation:fadeUp 1.4s ease forwards 2.2s;
}
.hero-sub strong {
  font-style:normal; display:block; font-weight:500;
  font-size:clamp(1.5rem, 3.2vw, 2.1rem); color:var(--text);
  margin-bottom:.4rem;
}
.hero-scroll {
  position:absolute; bottom:2.8rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  text-decoration:none; color:rgba(154,138,118,.6);
  font-family:var(--fh); font-size:.72rem; letter-spacing:.38em; text-transform:uppercase;
  opacity:0; animation:fadeIn 1.4s forwards 2.9s;
}
.hero-scroll::after {
  content:''; width:1px; height:54px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:line-pulse 2.5s ease-in-out infinite 3.2s;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes line-pulse { 0%,100%{transform:scaleY(1);opacity:.8} 50%{transform:scaleY(1.35);opacity:.25} }

/* ─── PARALLAX SECTIONS ─── */
.psec { position:relative; isolation:isolate; padding:10rem 5%; }
.psec .povl { position:absolute; inset:0; z-index:-1; }

/* ─── BACKGROUND ZONES ─── */
.bg-zone {
  position:relative;
}
.bg-zone::before {
  content:''; position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center;
  background-attachment:fixed;
  opacity:.55;
  filter:saturate(.7) brightness(.6);
}
.bg-zone::after {
  content:''; position:absolute; inset:0; z-index:-2;
  pointer-events:none;
}
.bg-zone-1::before {
  background-image:url('imgs/background/web_baackground_47_resize.jpg');
}
.bg-zone-1::after {
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
}
.bg-zone-2::before {
  background-image:url('imgs/background/web_baackground_05_resize.jpg');
}
.bg-zone-2::after {
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
}
@media(max-width:960px) {
  .bg-zone::before { background-attachment:scroll; }
}

/* ─── LABELS Y TITLES ─── */
.label {
  display:block;
  font-family:var(--fh); font-size:1.05rem; letter-spacing:.44em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem;
}
.title {
  font-family:var(--fh); font-weight:400;
  font-size:clamp(3rem, 5.8vw, 5.5rem);
  line-height:1.04; color:var(--text); margin-bottom:2.4rem;
}
.title em { font-style:italic; color:var(--gold-lt); }

/* ─── HISTORIA ─── */
.historia-overlay {
  background:
    radial-gradient(ellipse 65% 55% at 80% 45%, rgba(38,10,65,.2), transparent 65%),
    rgba(4,8,6,.4);
}
.historia-grid {
  max-width:1260px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:8rem; align-items:center;
}
.historia-text p {
  font-size:1.12rem; line-height:2.15; color:var(--text-dim); margin-bottom:1.5rem;
}
.historia-quote {
  font-family:var(--fh); font-style:italic;
  font-size:1.7rem; line-height:1.65; color:var(--gold-lt);
  border-left:2px solid var(--gold-dim); padding-left:1.8rem;
  margin:2.5rem 0;
}
.historia-img { position:relative; cursor:pointer; }
.historia-img img {
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:brightness(.82) saturate(.85); display:block;
  transition:filter .4s;
}
.historia-img::before {
  content:''; position:absolute; inset:-18px;
  border:1px solid var(--gold-dim); z-index:-1;
}

/* ─── SLIDE TRANSITION ─── */
@keyframes slideIn { from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }
.slide-in { animation:slideIn .3s ease; }

/* ─── CREACIONES — Galería 3x3 ANCHA ─── */
.creaciones-overlay {
  background:
    radial-gradient(ellipse 55% 45% at 18% 80%, rgba(15,45,20,.15), transparent 60%),
    rgba(4,8,6,.4);
}
.creaciones-head { text-align:center; max-width:720px; margin:0 auto 5rem; }
.creaciones-head .title { margin-bottom:1.2rem; }
.creaciones-head p { color:var(--text-dim); font-size:1.08rem; line-height:2; }
.feed-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.7rem;
  max-width:1200px; margin:0 auto;
}
.feed-card {
  aspect-ratio:1; overflow:hidden; position:relative; cursor:pointer;
}
.feed-card img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.8) saturate(.85);
  transition:filter .4s;
}
.feed-card:hover img { filter:brightness(1.05) saturate(1); }

/* ─── FERIAS ─── */
.ferias-overlay {
  background:
    radial-gradient(ellipse 45% 35% at 88% 18%, rgba(0,65,50,.15), transparent 55%),
    rgba(4,8,6,.4);
}
.ferias-inner { max-width:1260px; margin:0 auto; }
.ferias-head { margin-bottom:3.5rem; }
.ferias-head .title { margin-bottom:1.1rem; }
.ferias-head p { color:var(--text-dim); font-size:1.08rem; line-height:2; max-width:540px; }
.ferias-viewport { overflow:hidden; }
.ferias-track {
  display:flex; gap:1.4rem;
  transition:transform .65s cubic-bezier(.25,.46,.45,.94);
}
.feria-slide {
  min-width:calc(50% - .7rem); flex-shrink:0; aspect-ratio:16/10;
  overflow:hidden; position:relative; cursor:pointer;
  border-radius:6px;
}
.feria-img-wrap { width:100%; height:100%; }
.feria-slide img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(.85);
  transition:filter .4s, transform .5s;
}
.feria-slide:hover img { filter:brightness(1) saturate(1); transform:scale(1.04); }
.ferias-nav { display:flex; gap:1rem; margin-top:2rem; }
.fnav-btn {
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gold-dim); background:transparent;
  color:var(--gold); cursor:pointer;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.fnav-btn:hover { border-color:var(--gold); background:rgba(201,168,76,.1); box-shadow:0 0 16px rgba(201,168,76,.2); }

/* ─── CONTACTO ─── */
.contacto-overlay {
  background:
    radial-gradient(ellipse 55% 55% at 50% 50%, rgba(38,10,65,.2), transparent 70%),
    rgba(4,8,6,.45);
}
.contacto-inner { max-width:640px; margin:0 auto; text-align:center; }
.contacto-inner .title { margin-bottom:1.1rem; }
.contacto-desc { color:var(--text-dim); font-size:1.1rem; line-height:2.1; margin-bottom:3rem; }
.c-rule { width:56px; height:1px; background:var(--gold-dim); margin:2rem auto; }
.c-list { list-style:none; display:flex; flex-direction:column; align-items:center; }
.c-link {
  display:flex; align-items:center; gap:1.7rem;
  padding:1.35rem 2.2rem; border-bottom:1px solid rgba(201,168,76,.1);
  width:100%; max-width:480px; text-decoration:none; color:var(--text);
  transition:color .3s, padding-left .35s;
}
.c-link:hover { color:var(--gold); padding-left:3rem; }
.c-link i { width:22px; text-align:center; color:var(--gold); font-size:1.2rem; }
.c-link span { font-family:var(--fh); font-size:1.25rem; letter-spacing:.04em; }
.redes { display:flex; gap:2rem; justify-content:center; margin-top:3.5rem; }
.red {
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:1.15rem; text-decoration:none;
  transition:border-color .3s, color .3s, box-shadow .3s;
}
.red:hover { border-color:var(--gold); color:var(--gold); box-shadow:0 0 24px rgba(201,168,76,.3); }

/* ─── FOOTER ─── */
footer {
  padding:2.2rem 5%; border-top:1px solid rgba(201,168,76,.08);
  display:flex; align-items:center; justify-content:space-between;
}
.footer-logo { height:28px; filter:drop-shadow(0 0 6px rgba(201,168,76,.2)); opacity:.5; }
footer p { font-family:var(--fh); font-size:.8rem; letter-spacing:.08em; color:rgba(154,138,118,.4); }

/* ─── REVEAL ─── */
.r { opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.r.on { opacity:1; transform:translateY(0); }
.r.d1{transition-delay:.12s} .r.d2{transition-delay:.26s}
.r.d3{transition-delay:.42s} .r.d4{transition-delay:.58s}

/* ─── RESPONSIVE ─── */
@media(max-width:960px) {
  nav, nav.scrolled { padding:1.2rem 5%; }
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column; position:fixed; inset:0;
    background:rgba(4,8,6,.97); align-items:center; justify-content:center;
    gap:3rem; z-index:1000;
  }
  .nav-links.open a { font-size:2.2rem; }
  .hamburger { display:flex; }
  .historia-grid { grid-template-columns:1fr; gap:3.5rem; }
  .historia-img { max-width:480px; margin:0 auto; }
  .feed-grid { gap:.45rem; }
  .feria-slide { min-width:85%; }
  footer { flex-direction:column; gap:1rem; text-align:center; }
}
@media(max-width:600px) {
  .feed-grid { grid-template-columns:1fr; gap:1rem; }
  .feed-card { aspect-ratio:4/3; }
  .feed-card:nth-child(n+4) { display:none; }
  .psec { padding:6rem 5%; }
  .feria-slide { min-width:100%; height:60vh; }
  .feria-slide img { width:100%; height:100%; max-height:none; object-fit:cover; }
  .historia-img { max-width:100%; }
}