/* CSS estratto dall'index originale */

:root{
  --bg:#efe7de;
  --header:rgba(248,244,239,.82);
  --text:#403a36;
  --muted:#7f736c;
  --accent:#b89b72;
  --gold:#b89b72;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(180deg,rgba(255,252,248,.92),rgba(246,239,231,.78));
  border-bottom:1px solid rgba(64,58,54,.10);
  box-shadow:0 10px 34px rgba(64,58,54,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.top{
  width:min(1180px,94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:10px 0;
}
header img{
  width:clamp(112px,14vw,188px);
  max-height:72px;
  object-fit:contain;
  margin:0;
  display:block;
  filter:drop-shadow(0 4px 14px rgba(64,58,54,.12));
}
h1{
  margin:0;
  text-align:left;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(17px,1.7vw,24px);
  letter-spacing:.03em;
  color:#4b4038;
  white-space:nowrap;
}
nav.menu{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:2px 0 0;
}
nav.menu a{
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(184,155,114,.26);
  background:rgba(255,255,255,.54);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  text-decoration:none;
  color:#4c433d;
  font-size:14px;
  line-height:1;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
nav.menu a:hover{
  transform:translateY(-1px);
  background:rgba(184,155,114,.16);
  border-color:rgba(184,155,114,.48);
  color:#2f2925;
}
nav.menu a.cta{background:var(--muted);color:#fff;border-color:transparent}
.cta-big{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  background:linear-gradient(135deg,#8c7969,#5f5148);
  color:#fff;
  padding:10px 17px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(64,58,54,.16);
  white-space:nowrap;
}
.cta-big:hover{filter:brightness(1.06);transform:translateY(-1px)}
@media(max-width:780px){
  .top{
    grid-template-columns:1fr;
    justify-items:center;
    gap:8px;
    padding:8px 0 10px;
  }
  header img{width:132px;max-height:58px}
  h1{text-align:center;white-space:normal;font-size:18px}
  .cta-big{justify-self:center;padding:9px 14px}
  nav.menu{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:4px 2px 2px;
    scrollbar-width:none;
  }
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu a{flex:0 0 auto;font-size:13px;padding:8px 12px}
}

section{padding:36px 0}
h2{text-align:center;margin:0 0 16px;color:#6e6259}

.grid{width:min(1120px,92vw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:#fff;border-radius:16px;padding:8px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.card img{width:100%;height:230px;object-fit:cover;border-radius:12px;cursor:zoom-in}
.card figcaption{font-size:.9rem;color:#6e6259;margin-top:6px;text-align:center}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:50}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:86vh;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lightbox .caption{color:#fff;text-align:center;margin-top:10px;font-size:1rem;opacity:.9}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:32px;color:#fff;cursor:pointer;padding:14px 16px;user-select:none}
.lightbox .nav.prev{left:20px}
.lightbox .nav.next{right:20px}
.lightbox .close{position:absolute;top:16px;right:20px;font-size:28px;color:#fff;cursor:pointer}

.media{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(1120px,92vw);margin:0 auto}
iframe,video{width:100%;height:360px;border:0;border-radius:12px;border:1px solid rgba(0,0,0,.08)}

footer{text-align:center;padding:22px;background:var(--header);border-top:1px solid rgba(0,0,0,.08);color:#7f736c}

.features{width:min(1120px,92vw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.feature{background:#fff;border-radius:16px;padding:18px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 10px rgba(0,0,0,.04);display:flex;align-items:flex-start;gap:12px}
.feature .ico{font-size:26px;line-height:1.2}
.feature h4{margin:0 0 6px;color:#4d4743}
.feature p{margin:0;color:#6e6259;font-size:.95rem}


/* --- Galleria foto (migrata da pagina Appartamento) --- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gallery-grid figure{margin:0}
.gallery-grid img{width:100%;height:180px;object-fit:cover;display:block;border-radius:12px;transition:transform .2s ease}
.gallery-grid img:hover{transform:scale(1.02)}
/* Lightbox base */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;display:block;border-radius:8px}
.lightbox .caption{margin-top:8px;color:#fff;text-align:center;font-size:.9rem}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:28px;cursor:pointer;color:#fff;padding:16px;user-select:none}
.lightbox .nav.prev{left:20px}
.lightbox .nav.next{right:20px}
.lightbox .close{position:absolute;top:12px;right:16px;font-size:28px;cursor:pointer;color:#fff}


/* --- FAQ (Home) --- */
.faq details{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px 16px;background:#fff;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600;outline:none}
.faq p{margin:10px 0 0 0}
.faq a{text-decoration:underline}
@media (prefers-color-scheme: dark){
  .faq details{background:#1f1f1f;border-color:rgba(255,255,255,.12)}
}


/* Mobile: header compatto + drawer laterale (overlay) */
@media (max-width: 640px){
  :root{
  --bg:#efe7de;
  --header:#e7ddd2;
  --text:#403a36;
  --muted:#7f736c;
}
  header{
  position:relative;
  background:var(--header);
  border-bottom:1px solid rgba(0,0,0,.08);
}
  .top{ padding:6px 0; gap:4px; position:relative; }
  header img{ max-width:260px; width:72vw; max-height:96px; margin:6px auto 0; }
  h1{ font-size:18px; margin:2px 0 4px; padding:0 10px; }

  /* Drawer trigger */
  .menu-toggle{
    position:absolute;
    left:12px;
    top:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.15);
    background:#fffffff2;
    color:var(--text);
    cursor:pointer;
  }
  .menu-toggle svg{ width:18px; height:18px; }

  /* Hide inline menu on mobile */
  nav.menu{ display:none; }

  /* Overlay + drawer */
  .drawer-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    z-index:60;
  }
  .drawer{
    position:fixed; top:0; left:0;
    height:100vh;
    width:min(86vw, 360px);
    background:#fff;
    transform:translateX(-102%);
    transition:transform .22s ease;
    z-index:70;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    padding:16px 14px 18px;
    overflow:auto;
  }
  .drawer.open{ transform:translateX(0); }
  .drawer-overlay.open{ opacity:1; pointer-events:auto; }

  .drawer-header{
  position:relative;
  background:var(--header);
  border-bottom:1px solid rgba(0,0,0,.08);
}
  .drawer-title{ font-weight:700; color:var(--text); }
  .drawer-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    cursor:pointer;
  }

  .drawer-nav{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
  .drawer-nav a{
    display:block;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.10);
    text-decoration:none;
    color:var(--text);
    background:#faf7f3;
    font-size:16px;
    text-align:left;
  }
  .drawer-nav a.cta{ background:var(--muted); color:#fff; border-color:transparent; }
}
/* Desktop: nasconde i componenti drawer */
.drawer, .drawer-overlay{ display:none; }
@media (max-width: 640px){
  .drawer, .drawer-overlay{ display:block; }
}


/* === FIX TESTATA HOME: non occupa mezza pagina e non resta fissa === */
header{
  position: static !important;
  top: auto !important;
  z-index: 10 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.top,
.header-inner{
  padding: 6px 0 !important;
  gap: 8px !important;
  min-height: 0 !important;
}
header img,
.brand img{
  width: auto !important;
  height: auto !important;
  max-height: 58px !important;
  max-width: 150px !important;
}
h1,
.brand h1{
  font-size: clamp(16px, 1.4vw, 21px) !important;
  line-height: 1.15 !important;
}
nav.menu,
.nav{
  position: static !important;
  top: auto !important;
  margin-top: 4px !important;
  padding: 4px 0 !important;
  max-height: none !important;
}
nav.menu a,
.nav a{
  padding: 7px 10px !important;
  font-size: 13px !important;
}
.cta-big,
.header-cta a{
  padding: 8px 12px !important;
  font-size: 13px !important;
}
main, section[id]{
  scroll-margin-top: 12px !important;
}
@media (max-width:780px){
  .top,
  .header-inner{
    grid-template-columns: 1fr !important;
    padding: 5px 0 !important;
  }
  header img,
  .brand img{
    max-height: 46px !important;
    max-width: 125px !important;
  }
  h1,
  .brand h1{
    font-size: 16px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  nav.menu,
  .nav{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }
}
/* =========================
   CTA HOTEL CONVERSION STYLE
   ========================= */

:root{
  --cta-red:#c62828;
  --cta-red-dark:#8e1b1b;
}

/* BOTTONI PRINCIPALI */
a.btn,
.btn,
.btn-primary-c213,
.c213-pro-cta,
.c213-actions a,
.cta-big,
.c213-sticky-booking a {
  
  background: linear-gradient(135deg, var(--cta-red), var(--cta-red-dark)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;

  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;

  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  box-shadow: 0 12px 28px rgba(198,40,40,.28) !important;
  transition: all .2s ease !important;
}

/* HOVER */
a.btn:hover,
.btn:hover,
.btn-primary-c213:hover,
.c213-pro-cta:hover,
.c213-actions a:hover,
.cta-big:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 38px rgba(198,40,40,.35);
}

/* BOTTONI SECONDARI */
.secondary {
  background: #ffffff !important;
  color: #2f2925 !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.secondary:hover {
  background: #f5f5f5 !important;
}


/* FIX DEFINITIVO CIVICO 213 - logo e rimozione striscia header */
html, body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

header, .c213-home-header, .top, .site-header, .hero-header {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.logo-top-civico213 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  padding: 8px 0 6px 0 !important;
  margin: 0 auto !important;
}

.logo-top-civico213 a {
  display: inline-block !important;
  text-decoration: none !important;
  border: 0 !important;
}

.logo-top-civico213 img {
  height: 82px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border: 0 !important;
  box-shadow: none !important;
}