/* Fuentes */
@font-face { font-family: "Tiki Tako"; src: url("../fonts/Tiki Tako.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gotham Book"; src: url("../fonts/Gotham Book_0.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gotham Black"; src: url("../fonts/Gotham Black.otf") format("opentype"); font-display: swap; }

:root{
  --bg:#7CC5AD;     
  --cream:#FFFbDE;  
  --text:#2A3A1C;
  --shadow:0 14px 36px rgba(0,0,0,.18);
  --gap:12px;       
  --orange:#F28C28; 
}

/* Scroll suave para ↑ */
html{ scroll-behavior:smooth; }

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:"Gotham Book", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== BANNER ===== */
.hero{
  background: var(--bg);    
  width: 100%;
  overflow: hidden;
  padding: clamp(20px, 3vw, 28px) 12px;
  margin-bottom: 70px;
}
.hero-inner{
  max-width: 1700px;
  margin: 0 auto;
  height: clamp(260px, 36vw, 420px); 
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-title{
  margin: 0;
  font-family:"Gotham Black", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(220px, 12vw, 180px);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--cream);               
  text-align: center;
  text-shadow: 0 3px 8px rgba(0,0,0,.18); 
}

/* ===== GALERÍA ===== */
.gal-main{
  width:min(1600px, 96vw);
  margin: clamp(12px, 1.6vw, 24px) auto 8vh auto;
}

.masonry{
  column-count: 3;
  column-gap: var(--gap);
}
@media (max-width:1200px){ .masonry{ column-count: 2; } }
@media (max-width:800px) { .masonry{ column-count: 2; } }
@media (max-width:520px) { .masonry{ column-count: 1; } }

.m-item{
  break-inside: avoid;
  display: block;
  margin: 0 0 var(--gap) 0;
  background: transparent;
  border-radius: 0;  
}
.m-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:0;   
  filter: saturate(1) brightness(.95);
  transition: transform .25s ease, filter .25s ease;
}
.m-item:hover img{
  transform: scale(1.02);
  filter: saturate(1.08) brightness(1);
}

/* Fade final para cierre pulido */
.end-fade{
  position: sticky;
  bottom: -1px;
  height: 80px;
  margin-top: 40px;
  background: linear-gradient(to bottom, rgba(255,251,222,0), rgba(255,251,222,1));
  pointer-events: none;
}

/* ===== LIGHTBOX ===== */
.lb{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.lb.open{ display:flex; }
.lb img{
  max-width: 92vw;
  max-height: 90vh;
  width:auto; height:auto;
  object-fit: contain;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  border-radius: 6px;
}
.lb .ctrl{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255,255,255,.14);
  color:#fff;
  padding: .7rem .9rem;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
.lb .prev{ left: 20px; }
.lb .next{ right: 20px; }
.lb .close{
  top: 16px; right: 18px; transform:none;
  font-size: 22px; padding:.5rem .7rem;
}
.lb .ctrl:hover{ background: rgba(255,255,255,.24); }
body.lb-lock{ overflow: hidden; }

/* ===== Botones flotantes ===== */
.fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  z-index: 998; 
}
.fab-btn{
  display:inline-block;
  background: var(--orange);
  color:#FFF;
  text-decoration:none;
  font-family:"Gotham Black", system-ui, sans-serif;
  letter-spacing:.02em;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.fab-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.24); }
.fab-btn:active{ transform: translateY(0);    box-shadow: 0 10px 22px rgba(0,0,0,.18); }

.fab-home{
  padding:.6rem 1rem;
  border-radius: 0;
  font-size:14px;
  min-width:92px;
  text-align:center;
}
.fab-top{
  width:48px; height:48px;
  display:grid; place-items:center;
  font-size:18px;
  border-radius:999px; 
  padding:0;
}

/* Hojas decorativas */
.mem-leaves{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.mem-leaves .leaf{ position:absolute; top:-80px; animation:leaf-fall linear forwards; filter:drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
@keyframes leaf-fall{ 0%{transform:translateY(-60px) rotate(0)} 100%{transform:translateY(110vh) rotate(360deg)} }

@media (max-width:1100px){
  .hero-title{
    font-size: clamp(65px, 12vw, 180px);
  }
}