:root{
  --green-900:#0b2a23; --green-850:#0f352d; --green-800:#143f36; --green-700:#1b5b4e; --teal:#1e7d72;
  --sage:#a7c3b1; --cream:#fbf6ef; --cream-2:#f3e9da; --paper:#fffdf9;
  --bronze:#7a5230; --bronze-2:#9a6b3f; --gold:#c6a052; --gold-soft:#dcc18a;
  --blush:#ead0d4; --rose:#c98a93;
  --ink:#241f1a; --muted:#6e6457;
  --wa:#25d366; --wa-d:#0f7a63;
  --shadow-sm:0 8px 22px -12px rgba(11,42,35,.30);
  --shadow:0 22px 50px -22px rgba(11,42,35,.40);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --script:'Allura',cursive;
  --ui:'Jost',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ui); color:var(--ink); background:var(--cream);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:.005em}
.serif{font-family:var(--serif)}
.script{font-family:var(--script); font-weight:400}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
section{position:relative}
.sec{padding:clamp(60px,8.5vw,116px) 0}
::selection{background:var(--sage); color:var(--green-900)}

/* ---------- eyebrow / headings ---------- */
.eyebrow{
  font-family:var(--ui); font-weight:500; font-size:12.5px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--bronze-2); display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before,.eyebrow.center::after{content:""; width:34px; height:1px; background:var(--gold); display:inline-block}
.eyebrow.light{color:var(--gold-soft)}
.head{ font-size:clamp(30px,4.6vw,52px); color:var(--green-900); margin:.35em 0 .25em }
.head .it{font-style:italic; color:var(--bronze)}
.lead{ font-family:var(--serif); font-size:clamp(18px,2.1vw,21px); color:var(--muted); max-width:60ch; line-height:1.55 }
.center-block{text-align:center}
.center-block .eyebrow{justify-content:center}
.center-block .lead{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{ font-family:var(--ui); font-weight:500; font-size:14.5px; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px;
  cursor:pointer; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-primary{ background:var(--green-800); color:var(--cream); box-shadow:var(--shadow-sm) }
.btn-primary:hover{ background:var(--green-900); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(11,42,35,.5); border-color:var(--gold) }
.btn-gold{ background:linear-gradient(135deg,var(--gold) 0%, var(--bronze-2) 120%); color:#fff; box-shadow:var(--shadow-sm) }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(122,82,48,.55) }
.btn-ghost{ background:transparent; border-color:rgba(251,246,239,.55); color:var(--cream) }
.btn-ghost:hover{ background:rgba(251,246,239,.12); border-color:var(--cream); transform:translateY(-2px) }
.btn-ghost-dark{ background:transparent; border-color:rgba(20,63,54,.35); color:var(--green-900) }
.btn-ghost-dark:hover{ background:rgba(20,63,54,.06); border-color:var(--green-800) }

/* ---------- announcement ---------- */
.topbar{ background:var(--green-900); color:var(--sage); text-align:center;
  font-family:var(--ui); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; padding:8px 16px }
.topbar b{color:var(--gold-soft);font-weight:500}

/* ---------- header ---------- */
header{ position:sticky; top:0; z-index:60; background:rgba(11,42,35,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(198,160,82,.18); transition:box-shadow .3s ease }
header.scrolled{ box-shadow:0 12px 30px -16px rgba(0,0,0,.5) }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:68px }
.brand{ display:flex; align-items:center; gap:12px; color:var(--cream) }
.brand img{ width:42px; height:42px; object-fit:contain }
.brand .bt{ font-family:var(--serif); line-height:.95 }
.brand .bt .b1{ font-size:21px; letter-spacing:.02em; display:block }
.brand .bt .b2{ font-family:var(--ui); font-size:9.5px; letter-spacing:.42em; color:var(--gold-soft); display:block; margin-top:2px }
nav.links{ display:flex; align-items:center; gap:30px }
nav.links a{ font-family:var(--ui); font-size:14px; font-weight:400; color:var(--sage); letter-spacing:.02em; position:relative; padding:4px 0 }
nav.links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .3s ease }
nav.links a:hover{color:var(--cream)} nav.links a:hover::after{width:100%}
.header-cta{ display:flex; align-items:center; gap:14px }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; flex-direction:column; gap:5px }
.burger span{ width:24px; height:2px; background:var(--cream); border-radius:2px; transition:.3s }
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{ position:relative; min-height:clamp(560px,92vh,860px); display:flex; align-items:center; color:var(--cream); overflow:hidden }
.hero-bg{ position:absolute; inset:0; background:url('images/quince.jpg') center 30%/cover no-repeat; transform:scale(1.04) }
.hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,33,27,.92) 0%, rgba(8,33,27,.74) 38%, rgba(8,33,27,.28) 66%, rgba(8,33,27,.42) 100%); }
.hero-scrim::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,33,27,.7), transparent 30%) }
.hero .wrap{ position:relative; z-index:2; width:100% }
.hero-inner{ max-width:640px; padding:40px 0 }
.hero .eyebrow{ color:var(--gold-soft) } .hero .eyebrow::before{ background:var(--gold-soft) }
.hero h1{ font-size:clamp(40px,7vw,76px); color:#fff; margin:.28em 0 .2em; font-weight:500; text-shadow:0 2px 30px rgba(0,0,0,.25) }
.hero h1 .accent{ font-family:var(--script); font-weight:400; color:var(--sage); font-size:1.18em; display:inline-block; line-height:.8 }
.hero p.sub{ font-family:var(--serif); font-size:clamp(18px,2.3vw,23px); color:#f3efe6; max-width:46ch; margin-bottom:30px; line-height:1.5 }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px }
.hero-trust{ display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--ui); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,239,230,.82) }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px }
.hero-trust span::before{ content:"✦"; color:var(--gold-soft); font-size:10px }

/* faint butterfly motif */
.fly{ position:absolute; opacity:.05; pointer-events:none; filter:grayscale(.2) }

/* ---------- intro band ---------- */
.intro{ background:var(--cream); text-align:center; padding:clamp(56px,7vw,92px) 0 }
.intro .script{ font-size:clamp(40px,6vw,68px); color:var(--bronze); display:block; line-height:.9; margin-bottom:8px }
.intro p{ font-family:var(--serif); font-size:clamp(19px,2.3vw,24px); color:var(--green-900); max-width:54ch; margin:18px auto 0; line-height:1.5 }
.divider{ display:flex; align-items:center; justify-content:center; gap:16px; color:var(--gold); margin:22px 0 6px }
.divider::before,.divider::after{ content:""; height:1px; width:60px; background:linear-gradient(90deg,transparent,var(--gold)) }
.divider::after{ background:linear-gradient(90deg,var(--gold),transparent) }
.divider svg{width:26px;height:26px}

/* ---------- services ---------- */
.services{ background:linear-gradient(180deg,var(--paper),var(--cream)); }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; margin-top:46px }
.card{ background:var(--paper); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid rgba(122,82,48,.10); transition:transform .35s ease, box-shadow .35s ease; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.card-img{ position:relative; aspect-ratio:4/3; overflow:hidden }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1) }
.card:hover .card-img img{ transform:scale(1.07) }
.card-body{ padding:22px 22px 24px }
.card-body h3{ font-size:25px; color:var(--green-900) }
.card-body p{ font-family:var(--serif); font-size:17px; color:var(--muted); margin:6px 0 16px; line-height:1.45 }
.qlink{ font-family:var(--ui); font-size:13.5px; font-weight:500; letter-spacing:.06em; color:var(--bronze); display:inline-flex; align-items:center; gap:7px; text-transform:uppercase }
.qlink svg{width:15px;height:15px;transition:transform .3s ease}
.qlink:hover{color:var(--teal)} .qlink:hover svg{transform:translateX(4px)}
.card.wide{ grid-column:1/-1; display:grid; grid-template-columns:1.1fr 1fr; }
.card.wide .card-img{ aspect-ratio:auto; height:100% }
.card.wide .card-body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,3.5vw,48px) }
.card.wide .card-body h3{ font-size:clamp(28px,3.4vw,40px) }
.card.wide .card-body p{ font-size:18px; max-width:42ch }

/* ---------- gallery ---------- */
.gallery{ background:var(--cream) }
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:34px 0 30px }
.chip{ font-family:var(--ui); font-size:13px; letter-spacing:.04em; padding:9px 20px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid rgba(122,82,48,.30); color:var(--bronze); transition:.25s }
.chip:hover{ border-color:var(--bronze) }
.chip.active{ background:var(--green-800); color:var(--cream); border-color:var(--green-800) }
.masonry{ column-count:3; column-gap:16px }
.gitem{ break-inside:avoid; width:100%; margin:0 0 16px; padding:0; border:0; cursor:pointer; background:none;
  position:relative; border-radius:12px; overflow:hidden; display:block; box-shadow:var(--shadow-sm) }
.gitem img{ width:100%; height:auto; transition:transform .7s cubic-bezier(.2,.7,.2,1) }
.gitem:hover img{ transform:scale(1.06) }
.gitem .ov{ position:absolute; inset:0; background:linear-gradient(to top,rgba(8,33,27,.78),rgba(8,33,27,0) 52%);
  opacity:0; transition:opacity .35s ease; display:flex; align-items:flex-end; padding:16px }
.gitem:hover .ov{opacity:1}
.gitem .ov span{ font-family:var(--ui); color:var(--cream); font-size:12px; letter-spacing:.18em; text-transform:uppercase }
.gitem .ov span::before{ content:"🦋  " }
.gitem.feat{ box-shadow:0 0 0 2px var(--gold), var(--shadow-sm) }
.gitem.feat::after{ content:"✦ Destacado"; position:absolute; top:10px; left:10px; z-index:3; font-family:var(--ui); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-900); background:var(--gold-soft); padding:5px 11px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.18) }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(8,28,23,.94); display:none; align-items:center; justify-content:center; padding:24px }
.lb.open{ display:flex; animation:fade .3s ease }
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb img{ max-width:92vw; max-height:84vh; border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7) }
.lb-cap{ position:absolute; bottom:22px; left:0; right:0; text-align:center; color:var(--sage); font-family:var(--ui); font-size:13px; letter-spacing:.12em; text-transform:uppercase }
.lb-btn{ position:absolute; background:rgba(251,246,239,.10); border:1px solid rgba(251,246,239,.25); color:#fff; width:50px; height:50px; border-radius:50%; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; transition:.25s }
.lb-btn:hover{ background:rgba(251,246,239,.22) }
.lb-close{ top:22px; right:22px } .lb-prev{ left:18px; top:50% } .lb-next{ right:18px; top:50% }

/* ---------- catalog ---------- */
.catalog{ background:linear-gradient(180deg,var(--cream),var(--paper)) }
.cat-band{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:center }
.coll{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 28px }
.coll span{ font-family:var(--ui); font-size:13px; letter-spacing:.03em; color:var(--bronze); background:var(--paper); border:1px solid rgba(122,82,48,.28); border-radius:999px; padding:9px 17px }
.cat-photo{ position:relative }
.cat-photo img{ width:100%; border-radius:16px; box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover }
.cat-photo::before{ content:""; position:absolute; inset:16px -16px -16px 16px; border:1px solid var(--gold); border-radius:16px; z-index:-1 }
@media(max-width:900px){ .cat-band{ grid-template-columns:1fr; gap:34px } .cat-photo{ order:-1 } .cat-photo img{ aspect-ratio:16/11 } .cat-photo::before{ inset:10px -10px -10px 10px } }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px 24px; margin-top:48px }
.prod{ background:var(--paper); border-radius:6px; padding:14px 14px 22px; box-shadow:var(--shadow-sm);
  border:1px solid rgba(122,82,48,.10); position:relative; transition:transform .35s ease, box-shadow .35s ease }
.prod::before{ content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-2.5deg);
  width:86px; height:24px; background:rgba(214,189,134,.55); border:1px solid rgba(122,82,48,.18); box-shadow:0 2px 6px rgba(0,0,0,.08) }
.prod:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.prod-img{ aspect-ratio:3/4; overflow:hidden; border-radius:3px; background:#eee }
.prod-img img{ width:100%; height:100%; object-fit:cover }
.prod h3{ font-size:24px; color:var(--green-900); text-align:center; margin:16px 0 4px }
.prod p{ font-family:var(--serif); font-size:16px; color:var(--muted); text-align:center; line-height:1.4; padding:0 4px; min-height:46px }
.prod .qlink{ display:flex; justify-content:center; margin-top:14px }
.cat-cta{ text-align:center; margin-top:54px }
.cat-cta p{ font-family:var(--serif); font-size:clamp(20px,2.6vw,26px); color:var(--green-900); max-width:48ch; margin:0 auto 22px }

/* ---------- why us ---------- */
.why{ background:var(--green-850); color:var(--cream); overflow:hidden }
.why .head{ color:#fff } .why .head .it{ color:var(--sage) }
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 40px; margin-top:50px }
.feat{ display:flex; gap:18px; padding:24px 0; border-top:1px solid rgba(198,160,82,.22) }
.feat-ic{ flex:0 0 auto; width:46px; height:46px; border:1px solid rgba(198,160,82,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-soft) }
.feat-ic svg{width:22px;height:22px}
.feat h3{ font-size:23px; color:#fff; margin-bottom:4px }
.feat p{ font-family:var(--serif); font-size:16.5px; color:var(--sage); line-height:1.45 }

/* ---------- steps ---------- */
.steps{ background:var(--cream) }
.step-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-top:50px }
.step{ text-align:center; padding:0 10px; position:relative }
.step .num{ font-family:var(--serif); font-size:64px; font-weight:600; color:var(--gold-soft); line-height:1; display:block }
.step .num b{ color:var(--green-800); font-weight:600 }
.step h3{ font-size:25px; color:var(--green-900); margin:8px 0 6px }
.step p{ font-family:var(--serif); font-size:17px; color:var(--muted); line-height:1.45; max-width:34ch; margin:0 auto }
.steps-cta{ text-align:center; margin-top:48px }

/* ---------- testimonials (prepared) ---------- */
.testi{ background:linear-gradient(180deg,var(--paper),var(--cream)) }
.testi-empty{ max-width:660px; margin:40px auto 0; text-align:center; background:var(--paper);
  border:1px solid rgba(122,82,48,.16); border-radius:16px; padding:clamp(34px,5vw,56px); box-shadow:var(--shadow-sm) }
.testi-empty img{ width:54px; margin:0 auto 16px; opacity:.85 }
.testi-empty p{ font-family:var(--serif); font-size:clamp(19px,2.4vw,23px); color:var(--green-900); line-height:1.5; margin-bottom:22px }
/* TEMPLATE FOR REAL TESTIMONIALS — descomenta y reemplaza con reseñas reales:
<div class="testi-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:40px">
  <figure class="tcard" style="background:var(--paper);border:1px solid rgba(122,82,48,.14);border-radius:14px;padding:28px;box-shadow:var(--shadow-sm)">
    <div style="color:var(--gold);letter-spacing:3px;margin-bottom:10px">★★★★★</div>
    <blockquote style="font-family:var(--serif);font-size:18px;color:var(--green-900);line-height:1.5">"Aquí va el testimonio real de tu cliente."</blockquote>
    <figcaption style="font-family:var(--ui);font-size:13px;letter-spacing:.06em;color:var(--bronze);margin-top:14px;text-transform:uppercase">— Nombre del cliente</figcaption>
  </figure>
</div>
*/

/* ---------- final CTA ---------- */
.finalcta{ background:var(--green-900); color:var(--cream); text-align:center; overflow:hidden }
.finalcta .head{ color:#fff }
.finalcta p{ font-family:var(--serif); font-size:clamp(19px,2.4vw,24px); color:var(--sage); max-width:48ch; margin:14px auto 30px }
.finalcta .acts{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

/* ---------- brand band + footer ---------- */
.brandband{ background:var(--cream); text-align:center; padding:clamp(44px,6vw,72px) 0 }
.brandband img{ width:min(420px,76vw); margin:0 auto }
.brandband .script{ font-size:clamp(28px,4vw,40px); color:var(--bronze); margin-top:6px }
footer{ background:var(--green-900); color:var(--sage); padding:60px 0 26px; border-top:1px solid rgba(198,160,82,.2) }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px }
.foot-brand .brand{ margin-bottom:14px }
.foot-brand p{ font-family:var(--serif); font-size:17px; color:var(--sage); max-width:34ch; line-height:1.5 }
footer h4{ font-family:var(--ui); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; font-weight:500 }
.foot-list{ list-style:none; display:flex; flex-direction:column; gap:11px }
.foot-list a,.foot-list li{ font-family:var(--ui); font-size:14.5px; color:var(--sage); display:inline-flex; align-items:center; gap:10px; transition:color .25s }
.foot-list a:hover{ color:var(--cream) }
.foot-list svg{ width:17px; height:17px; flex:0 0 auto; color:var(--gold-soft) }
.foot-bottom{ border-top:1px solid rgba(198,160,82,.16); margin-top:42px; padding-top:22px; text-align:center;
  font-family:var(--ui); font-size:12.5px; letter-spacing:.06em; color:rgba(167,195,177,.7) }

/* ---------- floating WA ---------- */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:120; width:60px; height:60px; border-radius:50%;
  background:var(--wa); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(18,140,99,.7);
  transition:transform .25s ease }
.wa-float:hover{ transform:scale(1.08) }
.wa-float svg{ width:34px; height:34px; fill:#fff }
.wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--wa); z-index:-1; animation:pulse 2.4s infinite }
@keyframes pulse{ 0%{transform:scale(1);opacity:.55} 70%{transform:scale(1.7);opacity:0} 100%{opacity:0} }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }

/* ---------- responsive ---------- */
@media(max-width:920px){
  .masonry{ column-count:2 }
  .card.wide{ grid-template-columns:1fr } .card.wide .card-img{ aspect-ratio:16/10 }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px } .foot-brand{ grid-column:1/-1 }
}
@media(max-width:920px){
  nav.links{ position:absolute; top:68px; left:0; right:0; background:var(--green-900); flex-direction:column;
    align-items:flex-start; gap:0; padding:0 24px; max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease;
    border-bottom:1px solid rgba(198,160,82,.18) }
  nav.links.open{ max-height:380px; padding:14px 24px 22px }
  nav.links a{ padding:12px 0; width:100%; border-bottom:1px solid rgba(198,160,82,.10); font-size:16px }
  .burger{ display:flex }
  .header-cta .btn{ display:none }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center }
}
@media(max-width:520px){
  .masonry{ column-count:2; column-gap:12px }
  .gitem{ margin-bottom:12px }
  .gitem.feat::after{ font-size:8.5px; padding:4px 8px; top:7px; left:7px }
  .gitem .ov{ padding:11px }
  .gitem .ov span{ font-size:10px; letter-spacing:.12em }
  .topbar{ letter-spacing:.18em; font-size:10.5px }
  .brand .bt .b1{ font-size:18px } .brand img{ width:36px;height:36px }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}


/* ===== Mobile-first refinements & sticky CTA bar ===== */
.mbar{ display:none }
@media(max-width:760px){
  .wa-float{ display:none }
  .mbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:130;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,42,35,.96); backdrop-filter:blur(10px); border-top:1px solid rgba(198,160,82,.28) }
  .mbar a{ flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--wa); color:#fff; font-family:var(--ui); font-weight:600; font-size:16px;
    padding:15px 16px; border-radius:14px; box-shadow:0 10px 24px -8px rgba(18,140,99,.6) }
  .mbar a svg{ width:22px; height:22px; fill:#fff }
  body{ padding-bottom:76px }
  .hero{ min-height:84vh }
  .hero-scrim{ background:linear-gradient(180deg, rgba(8,33,27,.74) 0%, rgba(8,33,27,.42) 42%, rgba(8,33,27,.80) 100%) }
  .hero h1{ font-size:clamp(38px,11vw,56px) }
  .chip{ padding:11px 18px; font-size:13.5px }
  .qlink{ font-size:14px; padding:4px 0 }
  .sec{ padding:clamp(50px,12vw,76px) 0 }
}
@media(max-width:560px){ .foot-grid{ grid-template-columns:1fr; gap:30px } }
@media(max-width:520px){
  .hero-actions{ flex-direction:column; align-items:stretch }
  .hero-actions .btn{ width:100%; padding:16px }
  .btn{ font-size:15px }
}