/* Stile comune delle pagine moderne di Ammira Holiday House */
:root{
  --terracotta:#c8553d; --terracotta-scuro:#9c3f2c; --sabbia:#f4e4cf; --crema:#fbf6ee;
  --mare:#0f4c63; --turchese:#2bb3b1; --limone:#f2c14e; --oliva:#6b7d3a; --inchiostro:#1f2a30;
  --maiolica:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23fbf6ee'/%3E%3Cpath d='M30 4 L56 30 L30 56 L4 30Z' fill='none' stroke='%230f4c63' stroke-width='3'/%3E%3Ccircle cx='30' cy='30' r='9' fill='%23f2c14e'/%3E%3Ccircle cx='30' cy='30' r='4' fill='%23c8553d'/%3E%3Cpath d='M0 0h12a12 12 0 0 1-12 12zM60 0v12a12 12 0 0 1-12-12zM0 60v-12a12 12 0 0 1 12 12zM60 60h-12a12 12 0 0 1 12-12z' fill='%232bb3b1'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--crema);color:var(--inchiostro);font-family:Inter,system-ui,sans-serif;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* barra */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px clamp(16px,4vw,48px);background:rgba(251,246,238,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(31,42,48,.08)}
.logo{font-family:Fraunces,serif;font-weight:800;font-size:1.5rem;letter-spacing:-.01em;text-decoration:none;color:var(--terracotta)}
.logo small{display:block;font:500 .62rem Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--inchiostro);opacity:.6;margin-top:-4px}
.barra nav{display:flex;gap:6px;font-weight:500;font-size:.95rem}
.barra nav a{text-decoration:none;opacity:.75;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s,opacity .2s}
.barra nav a:hover{opacity:1;color:var(--terracotta);background:#fbe9e4}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;text-decoration:none;
  background:var(--terracotta);color:#fff;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn:hover{background:var(--terracotta-scuro);transform:translateY(-1px);box-shadow:0 0 0 4px rgba(200,85,61,.18)}
/* tutti i pulsanti chiari si illuminano come «Home»: bordo e scritta color terracotta e un alone */
.btn.chiaro:hover,.btn.secondario:hover,.barra .home-btn:hover,.barra .menu-btn:hover{
  background:#fff6f1;color:var(--terracotta);border-color:var(--terracotta);box-shadow:0 0 0 4px rgba(200,85,61,.15)}
.btn.chiaro:hover{box-shadow:inset 0 0 0 1.5px var(--terracotta),0 0 0 4px rgba(200,85,61,.15)}
.btn.chiaro{background:#fff;color:var(--inchiostro)}

/* vetrina */
.vetrina{position:relative;min-height:min(92vh,880px);display:grid;align-items:end;overflow:hidden;color:#fff}
.vetrina svg.scena{position:absolute;inset:0;width:100%;height:100%}
.vetrina::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,18,40,.55),rgba(28,18,40,.15) 45%,rgba(28,18,40,0) 60%);pointer-events:none}
.vetrina .testo{z-index:1;position:relative;padding:0 clamp(16px,6vw,96px) clamp(48px,9vh,110px);max-width:820px}
.etichetta{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.vetrina h1{font-family:Fraunces,serif;font-weight:800;font-size:clamp(2.6rem,7vw,6rem);line-height:.98;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(40,20,40,.35)}
.vetrina h1 em{font-weight:400;color:#ffe2b0}
.vetrina p{font-size:clamp(1.05rem,1.6vw,1.3rem);margin:18px 0 28px;max-width:520px;opacity:.95}
.azioni{display:flex;gap:12px;flex-wrap:wrap}

/* tre riquadri come nella bozza, ma moderni */
.tre{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1180px;margin:-56px auto 0;padding:0 16px}
.tre a{display:grid;gap:4px;padding:24px 26px;border-radius:22px;background:#fff;text-decoration:none;box-shadow:0 18px 40px rgba(31,42,48,.12);transition:transform .2s}
.tre a:hover{transform:translateY(-4px)}
.tre b{font-family:Fraunces,serif;font-size:1.35rem;font-weight:600}
.tre span{opacity:.65;font-size:.95rem}
.tre a:nth-child(2){background:var(--mare);color:#fff}
.tre a:nth-child(3){background:var(--terracotta);color:#fff}

/* sezioni */
.sezione{max-width:1180px;margin:0 auto;padding:clamp(64px,10vw,120px) 16px}
.sopra{font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta)}
h2{font-family:Fraunces,serif;font-weight:600;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:10px 0 18px}
.casa{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.casa .figura{border-radius:28px;overflow:hidden;box-shadow:0 30px 60px rgba(31,42,48,.18)}
.casa p{font-size:1.1rem;opacity:.85;margin-bottom:14px}
/* le bici: testo a sinistra, disegno a destra (sul telefono il disegno va sopra) */
.casa.bici{grid-template-columns:1fr 1.1fr;padding-top:0}
@media (max-width:900px){ .casa.bici{grid-template-columns:1fr} .casa.bici .figura{order:-1} }
.punti{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.punti span{background:var(--sabbia);padding:8px 14px;border-radius:999px;font-weight:500;font-size:.92rem}

.fascia{height:18px;background:var(--maiolica) center/18px}

.griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.carta{border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(31,42,48,.08);transition:transform .2s}
.carta:hover{transform:translateY(-4px)}
.carta div{padding:16px 18px 20px}
.carta h3{font-family:Fraunces,serif;font-weight:600;font-size:1.2rem}
.carta p{font-size:.92rem;opacity:.7}

.esperienze{background:var(--mare);color:#fff}
.esperienze .sopra{color:var(--limone)}
.esperienze .griglia{grid-template-columns:repeat(3,1fr)}
.esperienze .carta{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.12)}

.prenota{text-align:center}
.prenota .azioni{justify-content:center;margin-top:24px}
.piede{background:var(--inchiostro);color:#fff;text-align:center;padding:40px 16px;font-size:.9rem;opacity:.95}
/* «Siamo su»: Instagram, Facebook, email (li disegna social.js) */
.social{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-bottom:22px}
.social-titolo{font-family:Fraunces,serif;font-size:1.15rem;margin-right:6px;width:100%}
.social-voce{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border-radius:999px;background:rgba(255,255,255,.08);
  color:#fff;text-decoration:none;font-weight:600;border:1.5px solid rgba(255,255,255,.18);transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.social-voce svg{width:26px;height:26px;flex:none}
.social-voce small{display:block;font-weight:400;font-size:.72rem;opacity:.8;line-height:1}
.social-voce span{line-height:1.2;text-align:left}
a.social-voce:hover{background:#fff6f1;color:var(--terracotta);border-color:var(--terracotta);box-shadow:0 0 0 4px rgba(200,85,61,.25)}
.social-voce.spento{opacity:.5;cursor:default}

/* «Home»: pulsante a sé, sempre visibile accanto al menu */
.barra .home-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;text-decoration:none;border:1.5px solid rgba(31,42,48,.15);background:#fff;color:var(--inchiostro);
  font:600 .95rem Inter,sans-serif;padding:10px 16px;border-radius:999px;white-space:nowrap}
.barra .home-btn span{font-size:1.15rem;line-height:1;color:var(--terracotta)}
.barra .home-btn,.barra .menu-btn{transition:background .2s,color .2s,border-color .2s,box-shadow .2s}

/* menu a tendina: il pulsante «Menu» compare solo sugli schermi stretti (lo aggiunge menu.js) */
.barra .menu-btn{display:none;align-items:center;gap:8px;border:1.5px solid rgba(31,42,48,.15);background:#fff;color:var(--inchiostro);
  font:600 .95rem Inter,sans-serif;padding:10px 16px;border-radius:999px;cursor:pointer}
.barra .menu-btn .ico{font-size:1.05rem;line-height:1;width:1em;text-align:center}

@media (max-width:900px){
  .barra nav{display:none}
  .barra .menu-btn{display:inline-flex}
  .barra{gap:10px}
  .barra.aperta nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--crema);border-bottom:1px solid rgba(31,42,48,.1);box-shadow:0 18px 30px rgba(31,42,48,.12);padding:6px clamp(16px,4vw,48px) 14px}
  .barra.aperta nav a{opacity:1;font-size:1.1rem;padding:13px 10px;border-radius:12px;border-bottom:1px solid rgba(31,42,48,.07)}
  .barra.aperta nav a:last-child{border-bottom:0}
  .tre,.casa{grid-template-columns:1fr}
  .tre{margin-top:-36px}
  .griglia,.esperienze .griglia{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .griglia,.esperienze .griglia{grid-template-columns:1fr} }
/* telefono: Home e Menu solo con l'icona, così ci stanno accanto a Prenota */
@media (max-width:600px){
  .barra{gap:8px;padding:12px 16px}
  .logo{font-size:1.3rem}
  .barra .home-btn,.barra .menu-btn{padding:9px 12px}
  .barra .home-btn{font-size:0;gap:0}
  .barra .home-btn span{font-size:1.2rem}
  .barra .menu-btn .testo{display:none}
  .barra > .btn{padding:10px 16px;font-size:.95rem}
}

/* voce del menu della pagina in cui ti trovi: resta accesa (la mette menu.js) */
.barra nav a[aria-current]{opacity:1;color:var(--terracotta);background:#fbe9e4;font-weight:600}
.barra .home-btn[aria-current]{border-color:var(--terracotta);background:#fbe9e4;color:var(--terracotta)}
.barra > .btn[aria-current]{box-shadow:0 0 0 3px #fbe9e4,0 0 0 5px var(--terracotta)}

/* servizi della casa (home) */
.servizi-intro{max-width:720px;opacity:.85;margin-top:8px}
.servizi-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.servizio{background:#fff;border-radius:22px;padding:22px 22px 18px;box-shadow:0 12px 30px rgba(31,42,48,.07)}
.servizio-ico{width:52px;height:52px;border-radius:50%;background:#fbe9e4;display:grid;place-items:center;font-size:1.5rem}
.servizio h3{margin:14px 0 8px;font-size:1.2rem}
.servizio ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.servizio li{position:relative;padding-left:20px;font-size:.97rem;opacity:.85}
.servizio li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--terracotta);opacity:.75}
@media (max-width:900px){ .servizi-griglia{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .servizi-griglia{grid-template-columns:1fr} }

/* foto vere in Dintorni ed Esperienze, con i minuti a piedi da casa */
.carta-foto{position:relative}
.carta .carta-foto{padding:0}
.carta-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.a-piedi{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--inchiostro);border-radius:999px;padding:5px 11px;font-size:.85rem;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.a-piedi b{font-weight:600}
.a-piedi.in-alto{top:12px;bottom:auto}
/* minuti a piedi: fuori dalla foto, nell'angolo in basso a sinistra, prima del titolo */
.a-piedi,.a-piedi.in-alto{position:static;display:inline-flex;align-items:center;gap:5px;margin:0 0 8px;padding:4px 11px;font-size:.82rem;box-shadow:none;background:#fbe9e4;color:var(--terracotta)}
.esperienze .a-piedi{background:rgba(255,255,255,.14);color:#fff}
/* Le giornate da Ammira: schede con lo sfondo bianco sotto la foto, come nei Dintorni */
.esperienze .carta{background:#fff;border:0;box-shadow:0 10px 30px rgba(0,0,0,.18);color:var(--inchiostro)}
.esperienze .a-piedi{background:#fbe9e4;color:var(--terracotta)}