/* Villa Felice & Namastè — prototipo "Mediterranea calda" */
:root {
  --crema: #f6f0e4;
  --carta: #fbf8f1;
  --inchiostro: #2a2620;
  --tenue: #625a4e;
  --linea: #e2d8c6;
  --oro: #8a662a;          /* testi e filetti, dal logo */
  --oliva: #4f5d3a;        /* unico colore d'azione */
  --oliva-scuro: #38432a;
  --oliva-chiaro: #e6e9dc;
  --su-oliva: #f6f0e4;
  --raggio: 14px;
  --gutter: 16px;
  --max: 1200px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--crema); color: var(--inchiostro);
  font: 400 1.125rem/1.65 var(--sans);
  padding-bottom: 76px; /* spazio per la barra contatti sul telefono */
}
@media (min-width: 900px) { body { padding-bottom: 0; font-size: 1.1875rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

.contenitore { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 900px) { .contenitore { padding: 0 32px; } }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; }
.occhiello {
  font: 600 0.875rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oro); display: flex; align-items: center; gap: 12px;
}
.occhiello::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.testo-tenue { color: var(--tenue); }
.misura { max-width: 60ch; }

/* ---------- Testata ---------- */
.testata { background: var(--crema); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20; }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.marchio { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 48px; }
.marchio img.mandala { width: 46px; height: auto; }
.marchio .nome { font: italic 700 1.3rem/1.05 var(--serif); color: var(--oro); }
.marchio .nome small { display: block; font: 500 0.875rem/1.3 var(--sans); font-style: normal; color: var(--tenue); letter-spacing: 0.04em; margin-top: 3px; }
.menu { display: none; }
@media (min-width: 900px) {
  .menu { display: flex; gap: 28px; align-items: center; }
  .menu a { text-decoration: none; font-weight: 500; font-size: 1rem; padding: 8px 0; border-bottom: 2px solid transparent; }
  .menu a[aria-current="page"] { border-bottom-color: var(--oro); }
  @media (hover: hover) { .menu a:hover { border-bottom-color: var(--linea); } }
}
.testata .chiama-alto { display: none; }
@media (min-width: 900px) { .testata .chiama-alto { display: inline-flex; } }

/* Menu sul telefono: si apre toccando "Menu", senza script */
.menu-tel { position: static; }
.menu-tel summary {
  list-style: none; cursor: pointer; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--linea); display: inline-flex; align-items: center; gap: 8px;
  font: 600 1rem/1 var(--sans); color: var(--inchiostro); background: var(--carta);
}
.menu-tel summary::-webkit-details-marker { display: none; }
.menu-tel summary::after { content: ""; width: 16px; height: 10px; background: linear-gradient(currentColor 0 0) top/100% 2px no-repeat, linear-gradient(currentColor 0 0) center/100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat; }
.menu-tel[open] summary { background: var(--oliva); color: var(--su-oliva); border-color: var(--oliva); }
.menu-tel nav {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--crema);
  border-bottom: 1px solid var(--linea); box-shadow: 0 12px 24px -12px rgba(42, 38, 32, .25);
  display: grid; padding: 4px var(--gutter) 12px;
}
.menu-tel nav a { display: flex; align-items: center; min-height: 52px; font-size: 1.1rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu-tel nav a:last-child { border-bottom: 0; }
.menu-tel nav a[aria-current="page"] { color: var(--oliva); font-weight: 600; }
@media (min-width: 900px) { .menu-tel { display: none; } }

/* ---------- Pulsanti ---------- */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px; border-radius: 999px;
  font: 600 1.05rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  border: 2px solid var(--oliva); background: var(--oliva); color: var(--su-oliva);
  transition: transform .15s ease, background-color .2s ease;
}
.pulsante svg { width: 22px; height: 22px; flex: none; }
.pulsante.chiaro { background: transparent; color: var(--oliva); }
.pulsante:active { transform: scale(0.98); }
@media (hover: hover) {
  .pulsante:hover { background: var(--oliva-scuro); border-color: var(--oliva-scuro); }
  .pulsante.chiaro:hover { background: var(--oliva-chiaro); color: var(--oliva-scuro); }
}
.pulsanti { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Apertura (hero) ---------- */
.apertura { padding: 32px 0 56px; }
.apertura .griglia { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .apertura { padding: 56px 0 88px; }
  .apertura .griglia { grid-template-columns: 5fr 7fr; align-items: center; gap: 56px; }
}
.apertura .testo { display: grid; gap: 22px; }
.apertura .sottotitolo { font-size: 1.2rem; color: var(--tenue); max-width: 46ch; }
.apertura figure { margin: 0; position: relative; }
.apertura figure img { border-radius: var(--raggio); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.apertura figcaption {
  position: absolute; left: 14px; bottom: 14px; background: rgba(251, 248, 241, .94);
  padding: 8px 14px; border-radius: 999px; font-size: .9rem; color: var(--inchiostro);
}
.gia { font-size: 1rem; color: var(--tenue); border-left: 2px solid var(--oro); padding-left: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra .6s cubic-bezier(.16, 1, .3, 1) both; }
  .entra.d2 { animation-delay: .08s; } .entra.d3 { animation-delay: .16s; }
  @keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- Sezioni ---------- */
.sezione { padding: 64px 0; }
@media (min-width: 900px) { .sezione { padding: 96px 0; } }
.sezione.carta { background: var(--carta); }
.intestazione { display: grid; gap: 14px; margin-bottom: 36px; }

/* Le due case: griglia asimmetrica 7/5 */
.case { display: grid; gap: 40px; }
@media (min-width: 900px) { .case { grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; } .case .casa:nth-child(2) { margin-top: 88px; } }
.casa { display: grid; gap: 16px; }
.casa img { border-radius: var(--raggio); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.casa .dove { font-size: 1rem; color: var(--tenue); }
.casa .collegamento { font-weight: 600; color: var(--oliva); text-underline-offset: 4px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; }

/* Vivere qui: griglia di foto con didascalia */
.vivere { display: grid; gap: 32px; }
@media (min-width: 700px) { .vivere { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (min-width: 1000px) { .vivere { grid-template-columns: 1.2fr 1fr 1fr; } .vivere .grande { grid-row: span 2; } .vivere .grande img { aspect-ratio: 3 / 4; } }
.vivere figure { margin: 0; display: grid; gap: 12px; }
.vivere img { border-radius: var(--raggio); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.vivere figcaption h3 { font-size: 1.3rem; margin-bottom: 4px; }
.vivere figcaption p { color: var(--tenue); font-size: 1.02rem; }

/* Come entrare: passi a righe */
.passi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); counter-reset: passo; }
.passi li { display: grid; grid-template-columns: 56px 1fr; gap: 8px 16px; padding: 24px 0; border-bottom: 1px solid var(--linea); counter-increment: passo; }
.passi li::before { content: counter(passo, decimal-leading-zero); font: 600 1.6rem/1 var(--serif); color: var(--oro); grid-row: span 2; padding-top: 4px; }
.passi h3 { font-size: 1.3rem; }
.passi p { color: var(--tenue); }
@media (min-width: 900px) { .passi li { grid-template-columns: 90px 1fr 1.4fr; align-items: baseline; } .passi li::before { grid-row: auto; } }

/* Fascia oliva: territorio */
.fascia { background: var(--oliva-scuro); color: var(--su-oliva); }
.fascia .occhiello { color: #d6bd86; }
.fascia .griglia { display: grid; gap: 32px; }
@media (min-width: 900px) { .fascia .griglia { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; } }
.fascia img { border-radius: var(--raggio); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.fascia p { color: #e7e1d3; }

/* Contatti */
.contatti { display: grid; gap: 40px; }
@media (min-width: 900px) { .contatti { grid-template-columns: 5fr 7fr; gap: 64px; } }
.numeri { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.numeri li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.numeri .chi { color: var(--tenue); }
.numeri a { font: 600 1.25rem/1.3 var(--sans); color: var(--inchiostro); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
@media (hover: hover) { .numeri a:hover { color: var(--oliva); text-decoration: underline; } }
.sedi { display: grid; gap: 24px; }
.sede { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 22px; display: grid; gap: 10px; align-content: start; }
.mappa { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--oliva-chiaro); border: 1px solid var(--linea); }
.mappa iframe { display: block; width: 100%; height: 100%; border: 0; }
.indicazioni { width: 100%; }

/* Piede */
.piede { background: var(--inchiostro); color: #d9d1c3; padding: 48px 0 32px; font-size: .95rem; }
.piede .griglia { display: grid; gap: 28px; }
@media (min-width: 900px) { .piede .griglia { grid-template-columns: 1.4fr 1fr 1fr; } }
.piede strong { color: var(--carta); }
.piede a { color: #efe7d8; display: inline-flex; align-items: center; min-height: 44px; }
.piede .legale { border-top: 1px solid #4a443a; margin-top: 32px; padding-top: 20px; font-size: .9rem; color: #b5ab9b; }

/* Barra contatti fissa (solo telefono) */
.barra-contatti {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 240, 228, .97); border-top: 1px solid var(--linea);
}
.barra-contatti .pulsante { min-height: 54px; padding: 10px 12px; font-size: 1.02rem; }
@media (min-width: 900px) { .barra-contatti { display: none; } }
/* Con JavaScript attivo la barra compare solo quando i pulsanti Chiama/WhatsApp della pagina non si vedono */
.js .barra-contatti { transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .2s ease; }
.js .barra-contatti.visibile { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .js .barra-contatti { transition: none; } }

/* ---------- Pagina struttura ---------- */
.briciole { font-size: .95rem; color: var(--tenue); padding: 20px 0 0; }
.briciole a { color: var(--tenue); display: inline-flex; align-items: center; min-height: 44px; }
.struttura-apertura { padding: 24px 0 48px; display: grid; gap: 24px; }
.struttura-apertura img { border-radius: var(--raggio); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 699px) { .struttura-apertura img { aspect-ratio: 4 / 3; } }
.struttura-corpo { display: grid; gap: 40px; padding-bottom: 72px; }
@media (min-width: 900px) { .struttura-corpo { grid-template-columns: 7fr 4fr; gap: 64px; align-items: start; } }
.struttura-corpo article { display: grid; gap: 22px; }
.riquadro { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 24px; display: grid; gap: 14px; }
@media (min-width: 900px) { .riquadro { position: sticky; top: 100px; } }
.riquadro .pulsante { width: 100%; }
.galleria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galleria img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.galleria .larga { grid-column: span 2; }
.galleria .larga img { aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .galleria { grid-template-columns: repeat(3, 1fr); } .galleria .larga { grid-column: span 2; grid-row: span 2; } .galleria .larga img { aspect-ratio: auto; height: 100%; } }
.elenco { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.elenco li { padding: 14px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 2px; }
.elenco strong { font-weight: 600; }
.elenco span { color: var(--tenue); font-size: 1rem; }
.da-confermare { background: #fff3cf; color: #6b4e00; font-size: .875rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; }

/* Telefoni stretti: il marchio si accorcia per lasciare posto al menu */
@media (max-width: 380px) {
  .marchio img.mandala { width: 38px; }
  .marchio .nome { font-size: 1.1rem; }
  .marchio .nome small { display: none; }
}

/* Pagina privacy */
.testo-legale { max-width: 70ch; padding: 24px 0 72px; display: grid; gap: 18px; }
.testo-legale h2 { font-size: 1.5rem; margin-top: 18px; }
.testo-legale ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.testo-legale a { color: var(--oliva); }

.numeri .orari { font: 600 1.1rem/1.3 var(--sans); color: var(--inchiostro); display: inline-flex; align-items: center; min-height: 48px; }