/* ==========================================================================
   Cascina Lodola — agriturismo. Sito DIMOSTRATIVO di GTK Studios.
   Registro deliberatamente opposto a MADERA: dove quello e arioso, freddo e
   minimale, qui e caldo, denso e terroso. Serif morbido, oliva e vino,
   una fascia scura che spezza. Impaginazione da sito vetrina classico.
   ========================================================================== */

@font-face{ font-family:'Fraunces'; font-weight:400; font-display:swap;
  src:url('../../assets/fonts/fraunces-400.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-weight:600; font-display:swap;
  src:url('../../assets/fonts/fraunces-600.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-weight:400; font-display:swap;
  src:url('../../assets/fonts/archivo-400.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-weight:500; font-display:swap;
  src:url('../../assets/fonts/archivo-500.woff2') format('woff2'); }

:root{
  --bg:#FBF7EF; --surface:#FFFFFF; --ink:#2E2A22; --mut:#6E6558;
  --olive:#5E6B44; --wine:#8C3A2B; --gold:#B48A3F;
  --line:rgba(46,42,34,.16);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Archivo', Arial, sans-serif;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  --e1:0 2px 6px rgba(46,42,34,.06), 0 12px 30px rgba(46,42,34,.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.65; overflow-x:hidden; }
svg,img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }
::selection{ background:var(--olive); color:#fff; }

.demobar{ background:var(--ink); color:#F6F1E6; font-size:12.5px;
  padding:9px var(--pad); display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:space-between; }
.demobar a{ white-space:nowrap; padding:5px 13px; border:1px solid currentColor;
  border-radius:99px; font-weight:500; transition:background .2s, color .2s; }
.demobar a:hover{ background:#F6F1E6; color:var(--ink); }

/* --- Intestazione: vetrina classica, marchio centrato ------------------- */
.hdr{ padding:26px var(--pad) 18px; text-align:center; border-bottom:1px solid var(--line); }
.brand{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,4vw,38px);
  letter-spacing:.02em; display:inline-block; }
.brand small{ display:block; font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--olive); margin-top:6px; }
.nav{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin-top:20px;
  font-size:13.5px; letter-spacing:.06em; }
.nav a{ color:var(--mut); padding:5px 0; border-bottom:1px solid transparent; transition:.25s; }
.nav a:hover{ color:var(--ink); border-bottom-color:var(--gold); }

/* --- Tipografia --------------------------------------------------------- */
.display{ font-family:var(--serif); font-weight:600;
  font-size:clamp(2.3rem,5.6vw,4.4rem); line-height:1.06; letter-spacing:-.015em; }
.h2{ font-family:var(--serif); font-weight:600;
  font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.14; }
.h3{ font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.25; }
.kick{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--olive); }
.lead{ font-size:1.1rem; color:var(--mut); max-width:56ch; }
.body{ color:var(--mut); max-width:62ch; }
.sec{ padding:clamp(60px,8vw,110px) var(--pad); }
.sec--dark{ background:var(--olive); color:#F6F2E6; }
.sec--dark .kick{ color:#EFEADB; }   /* #D9CFA8 dava 3.7:1 sull oliva */
.sec--dark .body{ color:rgba(246,242,230,.82); }
.center{ text-align:center; max-width:62ch; margin-inline:auto; }

/* --- Rivelazione del titolo, parola per parola --------------------------
   Stato di riposo: parole VISIBILI. L'animazione parte solo quando il
   JavaScript aggiunge .anim. Cosi un titolo che non si anima resta
   comunque leggibile, invece di sparire. */
.w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.w > span{ display:inline-block; }
.js .w.anim > span{
  animation:wordUp .78s var(--ease) both;
  animation-delay:calc(var(--w,0)*85ms);
}
@keyframes wordUp{ from{ transform:translateY(110%); } to{ transform:none; } }

/* --- Hero --------------------------------------------------------------- */
.hero{ padding:clamp(44px,6vw,80px) var(--pad) 0; text-align:center; }
.hero__art{ margin-top:38px; border-radius:2px; overflow:hidden; box-shadow:var(--e1); }

/* --- Galleria ----------------------------------------------------------- */
.gal{ display:grid; gap:14px; margin-top:44px; grid-template-columns:repeat(2,1fr); }
@media(min-width:780px){ .gal{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.gal button{ position:relative; padding:0; border:0; background:#EDE6D8; cursor:pointer;
  overflow:hidden; border-radius:2px; box-shadow:var(--e1); display:block; width:100%; }
.gal svg{ width:100%; height:auto; transition:transform .8s var(--ease); }
.gal button:hover svg{ transform:scale(1.06); }
.gal figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
  font-size:12.5px; letter-spacing:.08em; color:#fff; text-align:left;
  background:linear-gradient(transparent,rgba(30,26,20,.72)); }

/* --- Lightbox ----------------------------------------------------------- */
.lb{ position:fixed; inset:0; z-index:60; background:rgba(30,26,20,.92);
  display:grid; place-items:center; padding:24px; }
.lb[hidden]{ display:none; }
.lb__in{ max-width:min(980px,94vw); width:100%; }
.lb__in svg{ width:100%; height:auto; border-radius:2px; }
.lb__cap{ color:#F6F2E6; font-size:14px; margin-top:14px; display:flex;
  gap:16px; justify-content:space-between; flex-wrap:wrap; }
.lb__x{ position:absolute; top:16px; right:16px; width:48px; height:48px; border:0;
  background:rgba(255,255,255,.12); color:#fff; font-size:22px; cursor:pointer; border-radius:50%; }
.lb__x:hover{ background:rgba(255,255,255,.24); }
.lb__nav{ background:none; border:1px solid rgba(255,255,255,.35); color:#F6F2E6;
  padding:9px 18px; min-height:44px; cursor:pointer; font-size:13px; }
.lb__nav:hover{ background:rgba(255,255,255,.14); }

/* --- Blocchi ------------------------------------------------------------ */
.two{ display:grid; gap:34px; align-items:center; }
@media(min-width:900px){ .two{ grid-template-columns:1fr 1fr; gap:64px; } }
.offer{ display:grid; gap:26px; margin-top:44px; }
@media(min-width:760px){ .offer{ grid-template-columns:repeat(3,1fr); } }
.offer article{ background:var(--surface); padding:30px 26px; box-shadow:var(--e1); border-radius:2px; }
.offer h3{ margin:14px 0 8px; }
.price{ font-family:var(--serif); font-size:1.5rem; color:var(--wine); }
.list li{ padding:13px 0; border-bottom:1px solid var(--line); display:flex;
  justify-content:space-between; gap:18px; }
.sec--dark .list li{ border-bottom-color:rgba(246,242,230,.24); }

.btn{ display:inline-block; background:var(--wine); color:#fff; border:0;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 32px; min-height:52px; cursor:pointer;
  transition:background .25s, transform .2s var(--ease); }
.btn:hover{ background:#742F23; transform:translateY(-2px); }
.note{ font-size:12.5px; color:var(--mut); margin-top:12px; }
.f{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.f label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
.f input,.f textarea{ font:inherit; padding:12px; min-height:46px;
  background:var(--surface); border:1px solid var(--line); border-radius:2px; }
.f textarea{ min-height:100px; resize:vertical; }

.ftr{ background:var(--ink); color:#EFE9DC; padding:52px var(--pad) 26px; text-align:center; }
.ftr__b{ margin-top:30px; padding-top:16px; border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px; color:rgba(239,233,220,.66); display:flex; gap:16px;
  flex-wrap:wrap; justify-content:center; }
.ftr a{ color:var(--gold); text-decoration:underline; }

/* --- Ingressi ------------------------------------------------------------ */
.js .rv{ opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i,0)*80ms); }
.js .rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ transform:none; transition-duration:.25s; }
  .js .w.anim > span{ animation:none; }
  .gal button:hover svg,.btn:hover{ transform:none; }
}

/* Rimando a chi ha fatto il sito, in fondo */
.back{ text-align:center; background:#F3EDE1; }
.back .h2{ margin-bottom:14px; }
.back .body{ margin:0 auto; }
.back .btn{ margin-top:26px; }