@import url('https://fonts.googleapis.com/css2?family=Laila:wght@400;700&family=Philosopher:wght@700&display=swap');

:root{
  --bg:#f8f3f0;
  --card:#FFFFFF;
  --ink:#2E3D43;
  --muted:#6A7C82;
  --accent:#A4B7BD;
  --accent-weak:#A9B4C5;
  --beige:#B5AA90;
  --ring:rgba(89, 110, 121, .25);
  --shadow:0 8px 28px rgba(20,30,35,.08);
}



*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0; scroll-behavior: smooth;}
body{
  font-family: 'Laila', serif;
  background:var(--bg);color:var(--ink);line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none; font-weight: 700;}
a:hover{text-decoration:underline}
ol, ul {padding-left: 20px;}



.wrap{max-width:1100px;margin:0 auto;padding:24px}
.section{background:var(--card);border-radius:28px;box-shadow:var(--shadow);padding:44px;margin:40px 0}



.section h2, .hero h1{
  font-family: 'Philosopher', sans-serif;
  font-size:clamp(28px, 4.2vw, 52px);
  font-weight: 700;
  margin:0 0 28px;
  color:var(--accent);
  letter-spacing:.5px;
}

.sub{
  font-family: 'Philosopher', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color:var(--accent);
  margin-top:18px;
}
.lead{color:var(--muted);max-width:800px;margin:0 auto 22px}
.small-note{margin-top:10px;font-size:.75rem;color:var(--muted)}


.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.65);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(0,0,0,.05)}
.nav .wrap{display:flex;align-items:center;gap:18px;padding:10px 24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink);margin-right: auto;}
.brand img{width:34px;height:34px;object-fit:cover;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.menu{display:flex;gap:18px;list-style:none;padding:0; margin:0;}
.menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--ink); font-weight: 700;}
.menu a:hover{background:var(--accent-weak);text-decoration:none}

.hero{text-align:center;padding-top:18px;padding-bottom:6px}
.hero .logo{
  margin:10px auto 18px;width:min(420px,60vw);aspect-ratio:1/1;
  background:url("images/inhalino-logo.jpg") center/contain no-repeat;
  opacity:.92;
  border-radius: 50%;
}
.hero h1{font-size:clamp(38px,5vw,58px);line-height:1.15;margin:0 0 10px;color:var(--accent)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.btn{
  border:none;cursor:pointer;border-radius:999px;
  padding: 15px 30px; 
  font-size: 18px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(20,30,35,.12);transition:transform .08s, box-shadow .2s, background .2s;
  display:inline-flex;align-items:center;gap:10px; font-family: 'Laila', serif;}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{box-shadow:0 10px 24px rgba(20,30,35,.18)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid rgba(0,0,0,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.85)}

.table{width:100%;border-collapse:collapse;border-radius:18px;overflow:hidden}
.table thead th{background:var(--accent);text-align:left;padding:14px 18px; color: #fff;}
.table td{padding:14px 18px;border-bottom:1px solid rgba(0,0,0,.06)}

.price-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:24px}
@media (max-width:820px){.price-grid{grid-template-columns:1fr}}
.card{border:1px solid rgba(0,0,0,.08);border-radius:22px;padding:22px;display:flex;flex-direction:column}
.card h3{margin:4px 0 10px;color:var(--accent)}
.card ul li{margin-bottom: 5px;}

.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:30px; align-items: center;}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.map{width:100%;height:360px;border:0;border-radius:18px;overflow:hidden}

.footer{color:var(--muted);text-align:center;padding:28px 0; border-top: 1px solid var(--accent-weak);}
.footer p{margin: 5px 0;}
.footer a{color: var(--muted); text-decoration: underline;}
.footer a:hover{color: var(--accent);}
.legal-section {background: transparent;box-shadow: none;padding: 20px 0;margin-top: -20px;}
.legal-section h3 {font-family: 'Philosopher', sans-serif;font-size: 24px;color: var(--muted);border-top: 1px solid var(--accent-weak);padding-top: 40px;margin-top: 40px;}
.legal-section p, .legal-section li {font-size: 0.9rem;color: var(--muted);}
.legal-section div{scroll-margin-top: 80px;}

.booking-widget-container {position: relative;width: 100%;height: 700px;overflow: hidden;border-radius: 22px;border: 1px solid rgba(0,0,0,0.08);}
.booking-widget {width: 100%;height: 100%;border: 0;}

.nav-toggle {
  display: none;background: transparent;
  border: 1px solid var(--accent-weak);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 30px; 
  cursor: pointer;color: var(--ink);line-height: 1;
}
@media (max-width: 900px) {
  .nav .menu {display: none;position: absolute;top: 65px;left: 0;right: 0;width: 100%;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);flex-direction: column;padding: 20px 0;border-bottom: 1px solid rgba(0,0,0,.05);box-shadow: 0 10px 20px rgba(0,0,0,.05);}
  .nav .menu li {text-align: center;}
  .nav .menu a {padding: 15px 20px;width: 100%;}
  .nav .menu.is-open {display: flex;}
  .nav-toggle {display: block;}
  .nav-toggle.is-open::before {content: '\2715';}
  .nav-toggle:not(.is-open)::before {content: '\2630';}
}