:root{
  --ink:#1F2023;
  --ink-soft:#55565C;
  --bell:#5A5D63;
  --bell-dark:#3F4145;
  --lilac:#C7C8CC;
  --lilac-soft:#EDEDF0;
  --paper:#F7F7FA;
  --brass:#E0A83E;
  --whatsapp:#25D366;
}

*{ scroll-behavior:smooth; }
body{
  font-family:'Space Grotesk', sans-serif;
  color:var(--ink);
  background:var(--paper);
}
h1,h2,h3,.display-font{ font-family:'Fraunces', serif; }
.mono{ font-family:'JetBrains Mono', monospace; }

a{ color:inherit; }

/* ---------- Navbar ---------- */
.navbar{
  background:rgba(107, 131, 151, 0.96);
  backdrop-filter:blur(6px);
}
.navbar-brand{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.5rem;
  color:#fff !important;
  letter-spacing:.02em;
}
.navbar-brand .bloom{ color:var(--lilac); }
.nav-link{
  color:rgba(255,255,255,0.78) !important;
  font-weight:500;
  font-size:.95rem;
  margin:0 .35rem;
}
.nav-link:hover, .nav-link.active{ color:#fff !important; }
.nav-wa-btn{
  background:var(--whatsapp);
  color:#fff !important;
  border-radius:50px;
  padding:.4rem 1rem;
  font-weight:600;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.nav-wa-btn:hover{ filter:brightness(1.08); color:#fff !important; }

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:7.5rem 0 5rem;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(199,200,204,.5) 1px, transparent 0),
    radial-gradient(1px 1px at 70% 60%, rgba(199,200,204,.4) 1px, transparent 0),
    radial-gradient(1px 1px at 40% 80%, rgba(199,200,204,.35) 1px, transparent 0),
    radial-gradient(1px 1px at 85% 20%, rgba(199,200,204,.4) 1px, transparent 0);
  background-size:100% 100%;
  pointer-events:none;
}
.bell-arc{
  position:absolute;
  right:-10%;
  top:-15%;
  width:60%;
  height:130%;
  opacity:.5;
  pointer-events:none;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  font-weight:600;
  color:var(--lilac);
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 3.75rem);
  font-weight:600;
  line-height:1.08;
  max-width:11ch;
}
.hero p.lead{
  color:rgba(255,255,255,0.75);
  max-width:42ch;
  font-size:1.08rem;
}
.btn-brass{
  background:var(--brass);
  color:var(--ink);
  font-weight:600;
  border:none;
  padding:.7rem 1.5rem;
  border-radius:6px;
}
.btn-brass:hover{ background:#eab84f; color:var(--ink); }
.btn-outline-light-lilac{
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-weight:600;
  padding:.7rem 1.5rem;
  border-radius:6px;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-outline-light-lilac:hover{ background:rgba(255,255,255,.08); color:#fff; }

.hero-tags{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:2.5rem;
}
.hero-tag{
  border:1px solid rgba(199,200,204,.3);
  color:var(--lilac);
  font-size:.8rem;
  padding:.3rem .8rem;
  border-radius:50px;
  font-family:'JetBrains Mono', monospace;
}

/* ---------- Section shell ---------- */
section{ padding:5.5rem 0; }
.section-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bell);
  font-weight:600;
}
.section-title{
  font-weight:600;
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom:1rem;
}

/* ---------- About ---------- */
.about-visual{
  background:linear-gradient(155deg, var(--bell) 0%, var(--ink) 100%);
  border-radius:18px;
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.about-visual img{
  width:100%;
  max-width:360px;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.fact-chip{
  background:var(--lilac-soft);
  border:1px solid var(--lilac);
  border-radius:10px;
  padding:.9rem 1rem;
  font-size:.88rem;
}
 
.fact-chip strong{
  display:block;
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  color:var(--bell-dark);
}

/* ---------- Catalog / Gallery ---------- */
.filter-btn{
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  border-radius:50px;
  padding:.4rem 1.1rem;
  font-size:.88rem;
  font-weight:600;
  margin:0 .3rem .6rem 0;
}
.filter-btn.active, .filter-btn:hover{
  background:var(--ink);
  color:#fff;
}

.item-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 3px rgba(31,32,35,.08);
  height:100%;
}
.item-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.item-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.item-card:hover .item-media img{ transform:scale(1.06); }

.item-category-pill{
  position:absolute; top:.7rem; left:.7rem;
  background:rgba(61, 131, 189, 0.75);
  color:#fff;
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  letter-spacing:.05em;
  padding:.25rem .6rem;
  border-radius:50px;
  z-index:2;
}

/* Signature interaction: "bell-drop" overlay that swings down like a bluebell
   flower opening, revealing item detail on hover (or tap on touch devices) */
.item-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(185deg, rgba(90,93,99,.97) 0%, rgba(31,32,35,.97) 100%);
  color:#fff;
  border-radius:0 0 60% 60% / 0 0 18% 18%;
  transform:translateY(-102%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.1rem;
}
.item-card:hover .item-overlay,
.item-card.is-open .item-overlay{
  transform:translateY(0);
}
.item-overlay .item-name{
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:.15rem;
}
.item-overlay .item-spec{
  font-family:'JetBrains Mono', monospace;
  font-size:.76rem;
  color:var(--lilac);
  margin-bottom:.6rem;
  line-height:1.5;
}
.item-overlay .item-price{
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  color:var(--brass);
  font-size:1rem;
}
.item-body{
  padding:.85rem 1rem;
}
.item-body .item-name-static{
  font-weight:600;
  font-size:.98rem;
  margin-bottom:.15rem;
}
.item-body .item-price-static{
  font-family:'JetBrains Mono', monospace;
  color:var(--bell-dark);
  font-weight:600;
  font-size:.9rem;
}
.book-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--whatsapp);
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  padding:.35rem .75rem;
  border-radius:50px;
  border:none;
  margin-top:.6rem;
}
.book-btn:hover{ filter:brightness(1.08); color:#fff; }
.item-overlay .book-btn{ align-self:flex-start; }

@media (hover:none){
  .item-overlay{ transform:translateY(calc(100% - 3.4rem)); }
  .item-card.is-open .item-overlay{ transform:translateY(0); }
}

/* ---------- Locate ---------- */
.locate-section{ background:var(--ink); color:#fff; }
.locate-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:1.6rem;
}
.locate-card .lbl{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lilac);
  display:block;
  margin-bottom:.2rem;
}
.map-frame{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.15) contrast(1.05); }

/* ---------- Contact ---------- */
.form-control{
  border:1px solid #d9d9e6;
  border-radius:8px;
  padding:.65rem .85rem;
}
.form-control:focus{
  border-color:var(--bell);
  box-shadow:0 0 0 .2rem rgba(90,93,99,.15);
}
.contact-info-card{
  background:var(--lilac-soft);
  border-radius:14px;
  padding:1.6rem;
  height:100%;
}
.contact-info-card .row-line{
  display:flex; gap:.75rem; align-items:flex-start;
  margin-bottom:1.1rem;
}
.contact-info-card .row-line strong{ display:block; font-size:.92rem; }
.contact-info-card .row-line span{ font-size:.85rem; color:var(--ink-soft); }
.icon-dot{
  width:34px; height:34px; border-radius:50%;
  background:var(--bell);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ---------- Footer ---------- */
footer{
  background:var(--ink);
  color:rgba(255,255,255,.65);
  padding:2.5rem 0 1.5rem;
  font-size:.9rem;
}
footer .footer-brand{
  font-family:'Fraunces', serif;
  color:#fff;
  font-size:1.3rem;
}
footer a:hover{ color:#fff; }
footer hr{ border-color:rgba(255,255,255,.12); margin:2rem 0 1.2rem; }

/* ---------- Floating WhatsApp button ---------- */
.wa-float{
  position:fixed;
  right:1.3rem;
  bottom:1.3rem;
  width:58px; height:58px;
  background:var(--whatsapp);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(37,211,102,.4);
  z-index:1050;
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.08); }

/* Accessible focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}