:root{
  --bg: #fff7fb;
  --ink: #2b2227;
  --muted: rgba(43, 34, 39, .72);
  --line: rgba(43, 34, 39, .12);

  --pink-1: rgb(224,192,208);
  --pink-2: rgb(240,208,224);
  --cream: rgb(240,240,224);
  --gold: #b38a5a;

  --radius: 22px;
  --shadow: 0 14px 50px rgba(27, 18, 23, .12);
  --shadow-soft: 0 10px 26px rgba(27, 18, 23, .10);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(240,208,224,.55), transparent 60%),
    radial-gradient(900px 450px at 85% 10%, rgba(224,192,208,.45), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg));
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{ width:min(1100px, calc(100% - 40px)); margin-inline:auto; }

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{ left: 12px; top: 12px; width:auto; height:auto; padding:10px 14px; background:#fff; border-radius:12px; box-shadow: var(--shadow-soft); z-index: 9999;}

.topbar{
  position: sticky; top:0; z-index: 60;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 10px 0; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; }
.brand__logo{ border-radius: 12px; box-shadow: 0 10px 24px rgba(27,18,23,.12); }
.brand__text{ text-transform: uppercase; font-size: .95rem; }

.nav{ display:flex; align-items:center; gap:12px; position: relative; }
.nav__toggle{
  display:none; border:1px solid var(--line); background: rgba(255,255,255,.9);
  border-radius: 14px; padding: 10px; cursor:pointer;
}
.nav__toggle span{ display:block; width:22px; height:2px; background: var(--ink); margin:5px 0; border-radius:999px; }

.nav__links{ display:flex; align-items:center; gap:14px; }
.nav__links a{ padding: 10px 10px; border-radius: 999px; color: rgba(43,34,39,.88); font-weight: 600; font-size: .95rem; }
.nav__links a:hover{ background: rgba(240,208,224,.35); text-decoration:none; }
.nav__links .pill{ background: rgba(179,138,90,.14); border: 1px solid rgba(179,138,90,.25); }

.hero{ position:relative; min-height: 82svh; display:grid; align-items:center; padding: 24px 0 44px; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) contrast(1.02);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(700px 350px at 50% 30%, rgba(255,255,255,.78), rgba(255,255,255,.28) 55%, rgba(255,255,255,.10) 100%);
}
.hero__content{ position:relative; z-index: 2; }
.hero__card{
  width:min(620px, 100%);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
}
.eyebrow{ color: rgba(179,138,90,.95); font-weight: 700; letter-spacing:.08em; text-transform: uppercase; font-size: .78rem; margin:0 0 10px; }
.hero h1{ margin: 0 0 10px; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.05; letter-spacing:-.02em; }
.lead{ margin: 0 0 16px; color: rgba(43,34,39,.72); font-size: 1.06rem; line-height: 1.55; }

.hero__cta{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(43,34,39,.14);
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 22px rgba(27,18,23,.10);
  font-weight: 700;
  transition: transform .15s ease;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
.btn.primary{ background: linear-gradient(180deg, rgba(179,138,90,.95), rgba(179,138,90,.82)); color: white; border-color: rgba(179,138,90,.35); }
.btn.ghost{ background: rgba(240,208,224,.32); border-color: rgba(240,208,224,.48); }

.hero__meta{ display:grid; grid-template-columns: 1fr; gap:10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.meta{ display:flex; justify-content:space-between; gap: 12px; }
.meta__label{ color: rgba(43,34,39,.60); font-weight: 700; font-size: .82rem; }
.meta__value{ color: rgba(43,34,39,.92); font-weight: 700; font-size: .92rem; max-width: 72%; text-align:right; }

.section{ padding: 62px 0; }
.section.alt{ background: rgba(255,255,255,.55); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.section__head h2{ margin:0; font-size: clamp(1.4rem, 3.3vw, 2rem); letter-spacing:-.02em; }
.section__head p{ margin:0; color: rgba(43,34,39,.72); max-width: 52ch; }

.grid{ display:grid; gap: 14px; }
.cards{ grid-template-columns: repeat(4, 1fr); }
.card{
  padding: 18px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(43,34,39,.10);
  box-shadow: var(--shadow-soft);
}
.card h3{ margin:0 0 8px; font-size: 1.05rem; }
.card p{ margin:0; color: rgba(43,34,39,.72); line-height: 1.55; }

.social{ display:flex; gap:10px; margin-top: 16px; flex-wrap: wrap; }
.social__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(240,208,224,.35);
  border: 1px solid rgba(240,208,224,.50);
  font-weight: 800;
}
.social__btn:hover{ text-decoration:none; background: rgba(240,208,224,.50); }

.promos{ grid-template-columns: repeat(3, 1fr); }
.promo{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(43,34,39,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-soft);
}
.promo img{ width:100%; height: 240px; object-fit: cover; }
.promo figcaption{ padding: 12px 14px; font-weight: 800; color: rgba(43,34,39,.82); }

.gallery{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery__item{
  border: 1px solid rgba(43,34,39,.10);
  background: rgba(255,255,255,.75);
  border-radius: 18px;
  overflow:hidden;
  padding:0;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.gallery__item img{ width:100%; height: 210px; object-fit: cover; transition: transform .35s ease; }
.gallery__item:hover img{ transform: scale(1.03); }

.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(16,10,14,.78);
  z-index: 80;
}
.lightbox.is-open{ display:grid; }
.lightbox__img{ width:min(1100px, 92vw); height:auto; max-height: 84vh; border-radius: 16px; box-shadow: 0 18px 70px rgba(0,0,0,.35); }
.lightbox__close{
  position:fixed; top: 14px; right: 14px;
  border:0; cursor:pointer;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-soft);
  font-size: 18px; font-weight: 900;
}

.video{ border-radius: var(--radius); overflow:hidden; border: 1px solid rgba(43,34,39,.10); box-shadow: var(--shadow-soft); background: rgba(255,255,255,.82); }
.video iframe{ width:100%; aspect-ratio: 16/9; border:0; display:block; }

.map{ border-radius: var(--radius); overflow:hidden; border: 1px solid rgba(43,34,39,.10); box-shadow: var(--shadow-soft); background: rgba(255,255,255,.82); }
.map iframe{ width:100%; height: 380px; border:0; display:block; }

.contact{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items:start; }
.form{
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(43,34,39,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 16px;
}
.form label{ display:block; font-weight: 800; font-size: .92rem; margin-bottom: 10px; }
.form input, .form textarea{
  width:100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(43,34,39,.16);
  background: rgba(255,255,255,.95);
  font: inherit;
}
.form input:focus, .form textarea:focus{ outline: 3px solid rgba(240,208,224,.55); border-color: rgba(240,208,224,.65); }
.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form__actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.fineprint{ margin: 12px 0 0; color: rgba(43,34,39,.62); font-size: .9rem; }

.contact__card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(43,34,39,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 16px;
}
.contact__card h3{ margin:0 0 10px; }
.contact__card p{ margin:0 0 10px; color: rgba(43,34,39,.72); }
.contact__card strong{ color: rgba(43,34,39,.92); }
.contact__mini{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 8px; }

.floatwa{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  padding: 12px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(34,197,94,.82));
  color: white;
  font-weight: 900;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  transition: transform .15s ease;
}
.floatwa:hover{ text-decoration:none; transform: translateY(-1px); }
.floatwa span{ display:inline-block; }

.footer{ padding: 26px 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.60); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
.footer p{ margin:0; color: rgba(43,34,39,.70); font-weight: 700; }

.reveal{ opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .promos{ grid-template-columns: 1fr; }
  .promo img{ height: 260px; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .contact{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position: absolute;
    right: 20px; top: 62px;
    display:none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    width: min(320px, calc(100vw - 40px));
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ width:100%; }
  .meta{ flex-direction: column; align-items:flex-start; }
  .meta__value{ max-width: 100%; text-align:left; }
}
