:root{
  --bg: #F6F4EE;
  --panel: #ffffff;
  --text: #163A3A;
  --muted: rgba(22,58,58,.75);
  --primary: #81B7B3;
  --accent: #FAB579;
  --ring: rgba(129,183,179,.35);
  --shadow: 0 14px 40px rgba(0,0,0,.12);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background:var(--bg);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px, 92vw); margin:0 auto}

.topbar{position:sticky; top:0; z-index:50; background:rgba(246,244,238,.72); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid rgba(22,58,58,.08)}
.topbar__inner{display:flex; align-items:center; gap:18px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; min-width: 240px}
.brand__logo{width:44px;height:44px;border-radius:14px; object-fit:cover; box-shadow: 0 8px 18px rgba(0,0,0,.12)}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__tag{font-size:.86rem; color:var(--muted)}

.nav{display:flex; gap:18px; margin-left:auto; align-items:center}
.nav a{font-weight:650; font-size:.95rem; color:rgba(22,58,58,.88)}
.nav a:hover{color:rgba(22,58,58,1)}
.call{display:none}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:999px; background:linear-gradient(135deg, var(--primary), #a7d7d3); color:#0e2a2a; font-weight:800; border:1px solid rgba(22,58,58,.08); box-shadow: 0 10px 30px var(--ring); transition: transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform: translateY(-1px); box-shadow: 0 16px 40px rgba(129,183,179,.42)}
.btn--outline{background:transparent; box-shadow:none; border:1px solid rgba(22,58,58,.18)}
.btn--outline:hover{box-shadow: 0 12px 30px rgba(0,0,0,.10)}
.btn--small{padding:10px 14px; font-size:.92rem}

.hero{position:relative; min-height: 78vh; display:grid; place-items:center; overflow:hidden}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03)}
.hero__overlay{position:absolute; inset:0; background: radial-gradient(1200px 600px at 20% 20%, rgba(255,255,255,.40), rgba(255,255,255,.12) 40%, rgba(0,0,0,.38)), linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));}
.hero__content{position:relative; padding: 64px 0 42px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.76); border:1px solid rgba(22,58,58,.12); box-shadow: 0 12px 30px rgba(0,0,0,.10); font-weight:800}
.hero h1{margin:14px 0 10px; font-size: clamp(2.1rem, 3.6vw, 3.5rem); line-height:1.05; color:#fff; text-shadow: 0 16px 40px rgba(0,0,0,.35)}
.hero h1 span{color: var(--accent)}
.hero p{max-width: 58ch; color: rgba(255,255,255,.92); font-size: 1.05rem; line-height:1.6; text-shadow: 0 10px 26px rgba(0,0,0,.35)}
.hero__cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.hero__quick{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top: 26px}
.quickcard{display:flex; gap:12px; align-items:center; padding:14px 14px; border-radius: var(--radius); background: rgba(255,255,255,.82); border:1px solid rgba(22,58,58,.10); box-shadow: var(--shadow)}
.quickcard__icon{font-size:1.35rem}
.quickcard small{color:var(--muted)}

.section{padding: 76px 0}
.section--alt{background: linear-gradient(180deg, rgba(129,183,179,.10), rgba(246,244,238,0) 60%)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom: 18px}
.section__head h2{margin:0; font-size: 2rem}
.section__head p{margin:0; color:var(--muted)}

.grid{display:grid; gap:16px}
.cards{grid-template-columns: repeat(3, minmax(0, 1fr));}
.card{padding:18px; border-radius: var(--radius); background: var(--panel); border:1px solid rgba(22,58,58,.08); box-shadow: 0 14px 40px rgba(0,0,0,.08)}
.card__icon{width:44px;height:44px;border-radius:14px; display:grid; place-items:center; background: rgba(250,181,121,.22); border:1px solid rgba(250,181,121,.35); margin-bottom:12px; font-size:1.2rem}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted); line-height:1.55}

.cta-strip{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px; border-radius: calc(var(--radius) + 6px); background: linear-gradient(135deg, rgba(129,183,179,.22), rgba(250,181,121,.20)); border:1px solid rgba(22,58,58,.10)}
.cta-strip h3{margin:0 0 6px}
.cta-strip p{margin:0; color:var(--muted)}
.cta-strip__actions{display:flex; gap:10px; flex-wrap:wrap}

.gallery{display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px}
.gitem{padding:0;border:0;background:transparent; cursor:pointer; border-radius: 16px; overflow:hidden; position:relative}
.gitem img{width:100%; height: 210px; object-fit:cover; transform:scale(1.01); transition: transform .2s ease}
.gitem:hover img{transform:scale(1.06)}
.gitem:focus-visible{outline: 4px solid var(--ring); outline-offset:2px}

.video{border-radius: calc(var(--radius) + 10px); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(22,58,58,.10)}
.video iframe{width:100%; aspect-ratio: 16/9; display:block}

.socials{grid-template-columns: 1.2fr .8fr}
.socialcard{padding:18px; border-radius: var(--radius); background: var(--panel); border:1px solid rgba(22,58,58,.08); box-shadow: 0 14px 40px rgba(0,0,0,.08)}
.socialcard h3{margin:0 0 8px}
.muted{color:var(--muted)}
.embed{border-radius: 16px; overflow:hidden; border:1px solid rgba(22,58,58,.10); background: rgba(0,0,0,.02); margin: 12px 0}
.embed iframe{width:100%; height: 520px}

.igmock{border-radius: 16px; border:1px solid rgba(22,58,58,.10); background: linear-gradient(135deg, rgba(250,181,121,.18), rgba(129,183,179,.14)); padding:14px; margin:12px 0}
.igmock__handle{font-weight:900; letter-spacing:.2px; margin-bottom:12px}
.igmock__grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:8px}
.igmock__grid span{display:block; aspect-ratio: 1/1; border-radius: 12px; background: rgba(255,255,255,.62); border:1px solid rgba(22,58,58,.08)}

.map{border-radius: calc(var(--radius) + 10px); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(22,58,58,.10)}
.map iframe{width:100%; height: 420px; border:0; display:block}

.contact{grid-template-columns: .9fr 1.1fr; align-items:start}
.infocard{padding:18px; border-radius: var(--radius); background: var(--panel); border:1px solid rgba(22,58,58,.08); box-shadow: 0 14px 40px rgba(0,0,0,.08); margin-bottom:12px}
.infocard h3{margin:0 0 10px}
.big{font-size: 1.35rem; font-weight:900; margin: 0 0 12px}
.actions{display:flex; gap:10px; flex-wrap:wrap}

.form{padding:18px; border-radius: var(--radius); background: var(--panel); border:1px solid rgba(22,58,58,.08); box-shadow: 0 14px 40px rgba(0,0,0,.08)}
.field{display:grid; gap:8px; margin-bottom:12px}
label{font-weight:800; font-size:.92rem}
input,textarea{width:100%; padding:12px 12px; border-radius: 14px; border:1px solid rgba(22,58,58,.16); background: rgba(246,244,238,.55); color:var(--text); outline:none}
input:focus,textarea:focus{border-color: rgba(129,183,179,.75); box-shadow: 0 0 0 4px var(--ring)}
.form__note{margin:10px 0 0; color:var(--muted); font-size:.92rem; line-height:1.45}

.lightbox{position:fixed; inset:0; background: rgba(0,0,0,.84); display:none; align-items:center; justify-content:center; padding: 22px; z-index:80}
.lightbox.open{display:flex}
.lightbox img{max-width: min(1020px, 92vw); max-height: 78vh; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.55)}
.lightbox__close{position:absolute; top:16px; right:18px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:#fff; font-size: 28px; cursor:pointer}
.lightbox__hint{position:absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.76); font-size:.92rem}

.whatsapp-float{position:fixed; right:16px; bottom:16px; z-index:90; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:999px; background: rgba(255,255,255,.92); border:1px solid rgba(22,58,58,.12); box-shadow: 0 18px 60px rgba(0,0,0,.18)}
.whatsapp-float svg{width:22px; height:22px}
.whatsapp-float span{font-weight:900}

.footer{padding: 30px 0 34px; border-top:1px solid rgba(22,58,58,.10); background: rgba(246,244,238,.8)}
.footer__inner{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.footer__links{display:flex; gap:14px; flex-wrap:wrap; font-weight:700}
.footer__bottom{padding-top: 14px}
.footer__bottom p{margin:0; color: rgba(22,58,58,.85)}

@media (max-width: 980px){
  .cards{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .socials{grid-template-columns: 1fr;}
  .contact{grid-template-columns: 1fr;}
  .hero__quick{grid-template-columns: 1fr;}
  .nav{display:none}
  .call{display:inline-flex}
  .hero{min-height: 74vh}
}

@media (max-width: 560px){
  .cards{grid-template-columns: 1fr;}
  .gallery{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .gitem img{height: 170px}
}