:root{
  --txt:#1f2937;
  --muted:#6b7280;
  --bg:#fff;
  --alt:#f8fafc;
  --border:#e5e7eb;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --teal:#14b8a6;
  --teal-d:#0d9488;
  --container:1120px;
  --r:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:var(--txt);background:var(--bg);line-height:1.6}
.container{width:min(calc(100% - 2rem),var(--container));margin-inline:auto}
.muted{color:var(--muted)}

/* top strip + nav */
.topstrip{background:#0f172a;color:#cbd5e1;font-size:12px}
.strip-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.burst{width:18px;height:18px;border-radius:50%;display:inline-block;background:conic-gradient(#22d3ee,#a7f3d0,#22c55e);box-shadow:0 0 0 3px #ecfeff inset}
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-text{font-weight:800}
.logo-img{display: block; width: auto; height: 60px;}
.mini-text{font-weight:700}
.mini-brand{display:flex; align-items:center; gap:8px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{text-decoration:none;color:#111827;font-weight:600;font-size:14px}
.menu a.active{color:#0ea5e9}
.chip{padding:8px 12px;border:1px solid var(--border);border-radius:10px}
.hamburger{display:none;background:#fff;border:1px solid var(--border);padding:8px;border-radius:10px}
@media (max-width:860px){.menu{display:none}.hamburger{display:block}}

/* header */
.header{padding:44px 0 18px}
.head-inner{text-align:center}
.head-inner h1{margin:0 0 8px;font-size:40px;line-height:1.15;font-weight:800}
.head-inner .sub{margin:0 auto 16px;max-width:740px;color:var(--muted)}

/* tabs */
.tabs{display:inline-flex;gap:0;background:#e5f7f6;border-radius:999px;border:1px solid #c7eeeb;overflow:hidden}
.tab{
  padding:10px 16px;background:transparent;border:0;font-weight:700;cursor:pointer;color:#065f5b;
}
.tab.active{background:#fff;border-radius:999px;box-shadow:0 6px 16px rgba(2,6,23,.08)}
.tab:focus{outline:2px solid #99f6e4}

/* cards grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0 56px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{
  background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 6px 16px rgba(2,6,23,.05);display:flex;flex-direction:column
}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.body{padding:14px}
.body h3{margin:0 0 4px}
.meta{display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:12px;margin-bottom:8px}
.meta .pin{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#34d399 0 45%,transparent 46%), conic-gradient(from 0.25turn,#10b981 0 75%,#a7f3d0 75%);display:inline-block}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;
  background:#f8fafc;border:1px solid var(--border);color:#475569
}
.bar{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid var(--border)}
.btn{appearance:none;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.btn-ghost{background:#fff;border:1px solid var(--border)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-d)}
.btn-xs{padding:6px 10px}

.btn-ghost.btn-sm{
  text-decoration: none;
}


.main-slider {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: var(--r);
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}

.main-slider .slide {
  display: none;
  width: 100%;
  height: 100%;
}

.main-slider .slide.active {
  display: block;
}

.main-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r);
}

.main-slider .prev,
.main-slider .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: rgba(255,255,255,0.7);
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 1;
  border-radius: 8px;
  color: var(--txt);
}

.main-slider .prev:hover,
.main-slider .next:hover {
  background: rgba(255,255,255,0.9);
}

.main-slider .prev { left: 12px; }
.main-slider .next { right: 12px; }


/* footer */
.footer{border-top:1px solid var(--border);background:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:22px;padding:28px 0}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
.footer a{display:block;color:#111827;text-decoration:none;margin:6px 0;font-weight:600;font-size:14px}
/* make the copyright a full-width row below the columns */
.footer .copy{
  grid-column: 1 / -1;              /* span across all columns */
  text-align:center;
  color:#94a3b8;
  font-size:14px;
  border-top:1px solid var(--border, #e5e7eb);
  padding-top:14px;
  margin-top:12px;
}


/* state */
.cards[hidden]{display:none}
.show{display:grid}

/* Scope all styles to the Villa tab only */
#villapakete .villa-info { padding: 16px; }

#villapakete h3 { margin: 0 0 10px; }
#villapakete h4 { margin: 16px 0 8px; }

#villapakete .price-list,
#villapakete .bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 14px;
}

#villapakete .price-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
}

#villapakete .price-list .price { font-weight: 800; }

#villapakete .bullets li {
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
  color: var(--txt);
}
#villapakete .bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0ea5e9;
}

#villapakete .villa-cta .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}



/* Footer socials (scoped) */
.footer .socials {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.footer .sbtn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0f172a;
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 8px 20px rgba(2,6,23,.08);
  transition: transform .1s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.footer .sbtn i {
  font-size: 18px;
  line-height: 1;
}

.footer .sbtn:hover {
  transform: translateY(-2px);
}

/* Brand colors ONLY on hover */
.footer .sbtn.ig:hover { background:#E1306C; color:#fff; border-color:#E1306C; }
.footer .sbtn.fb:hover { background:#1877F2; color:#fff; border-color:#1877F2; }
.footer .sbtn.wa:hover { background:#25D366; color:#fff; border-color:#25D366; }

/* Optional: keyboard focus */
.footer .sbtn:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}