:root{
  --bg: #FFFBFF;
  --paper: #FFFFFF;
  --ink: #473d5a;
  --muted: #786c91;
  --primary: #bfa2db;   /* lilas pastel */
  --primary-600: #a681cf;
  --accent: #c8b6e2;
  --soft: #f3ecfa;
  --ring: #e8def8;
  --radius: 16px;
  --space: 1rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.7;
}

.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding: clamp(2rem, 4vw, 4rem) 0}
.small{font-size:.9rem}
.muted{color:var(--muted)}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--paper), transparent 25%);
  border-bottom: 1px solid var(--ring);
}
.site-header .container{display:flex; align-items:center; gap:1rem; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; font-weight:700}
.brand img{height:44px; width:auto}
.brand-text{font-family:"Playfair Display", serif; font-size:1.25rem}

.primary-nav .menu, .footer-nav .menu{list-style:none; display:flex; flex-wrap:wrap; gap:.75rem; margin:0; padding:0}
.primary-nav a, .footer-nav a{display:block; padding:.5rem .75rem; border-radius:999px; text-decoration:none; color:inherit}
.primary-nav a:hover{background:var(--soft)}

.hero{
  background: radial-gradient(1200px 600px at 85% -10%, var(--soft), transparent 60%);
  padding: clamp(3rem, 7vw, 7rem) 0;
}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.hero-copy h1{font-family:"Playfair Display", serif; font-size: clamp(2rem, 4vw, 3.2rem); margin:.25em 0}
.hero-copy p{font-size:1.15rem; color:var(--muted)}
.cta-row{display:flex; gap:1rem; margin-top:1rem}

.hero-art{position:relative; min-height:260px}
.moon{width:140px; height:140px; border-radius:50%; background: var(--primary);
      position:absolute; right:10%; top:10%; box-shadow: -35px -10px 0 0 var(--ring) inset}
.cloud{position:absolute; background: var(--soft); border-radius:999px; filter: drop-shadow(0 8px 12px rgba(80,64,120,.08))}
.cloud-1{width:180px;height:60px;left:10%;top:25%}
.cloud-2{width:220px;height:66px;left:30%;top:10%}
.cloud-3{width:160px;height:52px;left:20%;top:55%}

.grid{display:grid; gap:1.25rem}
.grid.two{grid-template-columns: 1.2fr .8fr}
@media (max-width: 900px){ .hero-inner, .grid.two{grid-template-columns: 1fr} }

.cards{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.card{background:var(--paper); border:1px solid var(--ring); border-radius:var(--radius); overflow:hidden}
.card .card-body{padding:1rem 1.1rem}
.card .card-title{margin:.2rem 0 .3rem 0; font-size:1.15rem; font-weight:700; font-family:"Playfair Display",serif}
.thumb img, .card img{display:block; width:100%; height:auto}

.prose h1, .prose h2, .prose h3{font-family:"Playfair Display", serif}
.prose h1{font-size: clamp(1.8rem, 3vw, 2.6rem)}
.prose img{max-width:100%; height:auto; border-radius:12px}

.btn{display:inline-block; padding:.7rem 1rem; border-radius:999px; border:1px solid transparent; text-decoration:none; font-weight:600}
.btn-primary{background:var(--primary); color:#2d2340}
.btn-primary:hover{background:var(--primary-600)}
.btn-outline{border-color:var(--primary); color:var(--ink)}
.btn-outline:hover{background:var(--soft)}
.btn-ghost{background:transparent; border-color:var(--ring)}
.btn-ghost:hover{background:var(--soft)}

.site-footer{border-top:1px solid var(--ring); background:var(--paper); padding:2rem 0; margin-top:2rem}
.footer-grid{display:grid; gap:1rem; grid-template-columns:1fr 1fr 1fr}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }

/* Forms */
input, textarea, select{
  width:100%; padding:.75rem .9rem; border:1px solid var(--ring); border-radius:12px; background:var(--paper);
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--primary); outline-offset:2px}

/* Utilities */
.list{margin:0; padding-left:1.1rem}
.excerpt{color:var(--muted)}
.meta{color:var(--muted)}
.pagination{margin-top:1rem}
.form-area, .booking{margin-top:1rem}