/* ════════════════════════════════════════════════════════════
   AGRITURISMO VAL DEL TASSO — REBUILD da zero
   Concept: "Sole & Pietra" — mediterraneo caldo, conversione-first.
   Costruito sulle nozioni timetto: prezzo above-the-fold · 1 direzione
   (CTA terracotta isolata, Von Restorff) · prova sociale di prossimità ·
   FAQ calamita-AI · host/volto · polarizzazione · attrito-zero · mobile-first.
   Font: Fraunces (display) + Hanken Grotesque (body). Niente invenzioni.
   ════════════════════════════════════════════════════════════ */
:root{
  /* Taratura CALDA su richiesta cliente (Dalila, WhatsApp 2026-07-15: "colori più caldi") */
  --sand-50:#FAF2E1; --sand-100:#F2E4C8; --sand-200:#E7D5B2; --sand-300:#D8C49E;
  --ink:#271C10; --ink-2:#37291A;
  --text:#3D3122; --text-soft:#6E5E48;
  --olive:#6E7A4F; --olive-deep:#4F5A35;
  --terra:#BE4A28; --terra-deep:#9E3C1E; --terra-soft:#E0875A;
  --gold:#BC811F; --gold-deep:#8A6010;
  /* Verde del logo storico (wordmark) — richiami puntuali V-A, scelta utente 2026-07-15 */
  --logo-green:#8DB944; --logo-green-deep:#5A7A24;
  --line:rgba(39,28,16,.12); --line-soft:rgba(39,28,16,.07);
  --card:#fff;
  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesque',system-ui,-apple-system,sans-serif;
  --shadow:0 30px 60px -28px rgba(39,28,16,.34);
  --radius:18px;
}
*{box-sizing:border-box;}
html,body{max-width:100vw;overflow-x:hidden;margin:0;padding:0;}
*{overflow-wrap:break-word;}
img{max-width:100%;display:block;}
body{background:var(--sand-50);color:var(--text);font-family:var(--body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.04;margin:0;color:var(--ink);letter-spacing:-.01em;text-wrap:balance;}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:3px;border-radius:4px;}
.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 300;vertical-align:middle;}
.wrap{max-width:1240px;margin:0 auto;padding-left:clamp(20px,5vw,46px);padding-right:clamp(20px,5vw,46px);}
.eyebrow{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-deep);}
.lede{font-size:clamp(16px,1.5vw,18px);font-weight:400;color:var(--text-soft);line-height:1.7;}
.sun-line{width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--terra),var(--logo-green));}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--terra);color:#fff;font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.01em;padding:15px 26px;border-radius:999px;border:none;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s;box-shadow:0 12px 26px -12px rgba(190,74,40,.7);}
.btn:hover{background:var(--terra-deep);transform:translateY(-2px);}
.btn .material-symbols-rounded{font-size:19px;}

/* ── NAV ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(20px,5vw,46px);transition:background .3s,box-shadow .3s,padding .3s;}
.nav.solid{background:rgba(251,246,236,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line-soft);padding-top:11px;padding-bottom:11px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);}
.brand span{align-self:baseline;padding-top:10px;}
.logo-mark{width:33px;height:33px;flex-shrink:0;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.22);}
.brand b{font-weight:600;font-size:clamp(20px,4.5vw,25px);color:#fff;transition:color .3s;}
.brand span{font-size:13px;font-style:italic;color:rgba(255,255,255,.72);transition:color .3s;}
.nav.solid .brand b{color:var(--ink);} .nav.solid .brand span{color:var(--text-soft);}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,.88);transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav.solid .nav-links a{color:var(--text);} .nav.solid .nav-links a:hover{color:var(--terra-deep);}
.nav-cta{background:var(--terra);color:#fff!important;font-weight:600;font-size:13.5px;padding:10px 20px;border-radius:999px;box-shadow:0 10px 22px -12px rgba(190,74,40,.8);}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:4px;}
.nav.solid .burger{color:var(--ink);}
.burger .material-symbols-rounded{font-size:30px;}
.drawer{position:fixed;inset:0;z-index:65;background:rgba(39,28,16,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s;}
.drawer.open{opacity:1;pointer-events:auto;}
.drawer a{font-family:var(--display);font-size:30px;color:var(--sand-50);padding:9px;}
.drawer .nav-cta{font-family:var(--body);margin-top:14px;font-size:15px;padding:14px 30px;}
@media(max-width:880px){.nav-links{display:none;} .burger{display:inline-flex;}}

/* ── HERO ── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 0 104px;overflow:hidden;}
.hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(102deg,rgba(33,22,11,.9) 0%,rgba(33,22,11,.56) 40%,rgba(33,22,11,.2) 72%,rgba(33,22,11,.08) 100%),linear-gradient(0deg,rgba(33,22,11,.74) 0%,rgba(33,22,11,0) 34%);}
.hero .wrap{position:relative;z-index:2;width:100%;}
.hero-tag{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#fff;}
.hero h1{color:#fff;font-size:clamp(42px,7vw,86px);font-weight:500;max-width:14ch;margin:22px 0 0;text-shadow:0 2px 16px rgba(0,0,0,.55);}
.hero h1 em{font-style:italic;color:#F3D9A4;}
.hero p{color:rgba(255,255,255,.92);font-size:clamp(16px,2vw,19px);font-weight:400;max-width:54ch;margin:22px 0 0;line-height:1.65;text-shadow:0 1px 10px rgba(0,0,0,.5);}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px;}
.price-tag{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;color:#fff;font-size:14px;font-weight:400;}
.price-tag{white-space:normal;}
.price-tag b{font-family:var(--display);font-size:30px;font-weight:600;color:#fff;white-space:nowrap;}
.price-tag .pt-tail{white-space:nowrap;}
/* Prova sociale nell'hero. Prima era una riga da 14px accanto al prezzo: su una foto chiara
   spariva. Tre fonti indipendenti meritano UN contenitore (tre badge separati con ombre proprie
   = estetica da plugin recensioni). Fondo quasi opaco e non "vetro": il blur trasparente su
   foto chiara non regge il contrasto AA. Numeri in olive-deep = stesso linguaggio di .rev-score
   nella sezione Recensioni. Niente stelle gialle piene: nel travel il numero è più autorevole. */
.hero-proof{display:inline-block;margin-top:22px;background:rgba(251,246,236,.94);border:1px solid rgba(39,28,16,.1);border-radius:15px;padding:15px 20px 12px;box-shadow:0 20px 44px -22px rgba(39,28,16,.7);max-width:100%;}
.hp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);}
.hp-list li{display:flex;flex-direction:column;gap:2px;position:relative;padding-right:22px;}
.hp-list li+li{padding-left:22px;}
.hp-list li+li::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line);}
.hp-list li:last-child{padding-right:0;}
.hp-list b{font-family:var(--display);font-size:27px;font-weight:600;color:var(--logo-green-deep);line-height:1.06;font-variant-numeric:tabular-nums;white-space:nowrap;}
.hp-list span{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;}
.hp-list small{font-size:11.5px;color:var(--text-soft);white-space:nowrap;}
/* .hero-proof .hp-foot e non .hp-foot: il footer è un <p> dentro l'hero, e `.hero p` (0,1,1)
   batte `.hp-foot` (0,1,0) — lo rendeva a 16px con 22px di margine, altro che 12. */
.hero-proof .hp-foot{margin:11px 0 0;padding-top:9px;border-top:1px solid var(--line-soft);font-size:12px;line-height:1.45;color:var(--text-soft);text-shadow:none;}
.hero-proof .hp-foot b{color:var(--terra-deep);font-weight:700;}
/* Mobile: le 3 colonne diventano 3 righe. Il badge va anche tenuto CORTO: sotto c'è il pulsante
   WhatsApp (fixed, 56px in basso a destra) e un badge più alto ci finiva sotto, con l'angolo
   coperto dal cerchio verde. Qui si comprime quel tanto che basta a restargli sopra. */
@media(max-width:560px){
  .hero-proof{display:block;margin-top:16px;padding:11px 14px 9px;}
  .hp-list{grid-template-columns:1fr;}
  /* flex-wrap: in tedesco "138 Bewertungen" e' piu' lungo di "138 recensioni" e la
     riga sforava di 3px a 390px. Andando a capo il conteggio scende sotto, allineato
     a destra da margin-left:auto, invece di uscire dalla card. */
  .hp-list li{flex-direction:row;align-items:baseline;gap:9px;padding:6px 0;flex-wrap:wrap;}
  .hp-list li+li{padding-left:0;border-top:1px solid var(--line-soft);}
  .hp-list li+li::before{display:none;}          /* il divisore da verticale diventa orizzontale */
  .hp-list li:first-child{padding-top:0;}
  .hp-list b{font-size:19px;min-width:60px;}
  .hp-list small{margin-left:auto;}
  .hero-proof .hp-foot{font-size:11px;margin-top:8px;padding-top:7px;}   /* specificità: vedi nota su .hero p */
}
@media(min-width:760px){}
.book-widget .btn{height:50px;align-self:end;white-space:nowrap;}
.bw-note .material-symbols-rounded{font-size:16px;color:var(--olive);}

/* ── sections ── */
section{position:relative;}
.pad{padding:clamp(64px,9vw,120px) 0;}
.pad-sm{padding:clamp(48px,6vw,80px) 0;}
.center{text-align:center;}
.h2{font-size:clamp(32px,4.6vw,56px);font-weight:500;}
.h2 em{font-style:italic;color:var(--terra-deep);}
.kicker{margin-bottom:14px;}
.sect-head{max-width:680px;margin-bottom:48px;}
.sect-head.center{margin-left:auto;margin-right:auto;}
.sect-head .sun-line{margin:16px 0 0;}
.sect-head.center .sun-line{margin:16px auto 0;}

/* trust strip — ticker scorrevole */
.trust{background:var(--ink);color:#fff;overflow:hidden;}
.ticker{overflow:hidden;padding:22px 0;}
.ticker-row{display:flex;flex-wrap:nowrap;width:max-content;animation:trust-scroll 50s linear infinite;will-change:transform;}
.ticker:hover .ticker-row{animation-play-state:paused;}
.trust-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex-shrink:0;padding:0 clamp(18px,3vw,34px);font-size:13.5px;font-weight:400;color:rgba(255,255,255,.82);}
.trust-item .material-symbols-rounded{font-size:22px;color:var(--terra-soft);}
.trust-item b{font-family:var(--display);font-weight:600;font-size:20px;color:#fff;}
.trust-item .s{color:#F3C969;font-size:12px;letter-spacing:1px;}
@keyframes trust-scroll{to{transform:translateX(calc(-100%/3));}}
@media(prefers-reduced-motion:reduce){
  .ticker{display:flex;justify-content:center;}
  .ticker-row{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:14px 0;}
  .trust-item[aria-hidden="true"]{display:none;}
}

/* why-direct cards */
.why-grid{display:grid;gap:0;grid-template-columns:1fr;}
@media(min-width:780px){.why-grid{grid-template-columns:repeat(3,1fr);}}
.why-card{background:none;border:none;border-top:1px solid var(--line);padding:28px 0;}
@media(min-width:780px){.why-card{border-top:none;border-left:1px solid var(--line);padding:6px 40px;} .why-card:first-child{border-left:none;padding-left:0;} .why-card:last-child{padding-right:0;}}
.why-card .ic{width:auto;height:auto;border-radius:0;background:none;display:block;margin-bottom:14px;}
.why-card .ic .material-symbols-rounded{font-size:34px;color:var(--terra);}
.why-card h3{font-size:23px;margin-bottom:10px;}
.why-card p{font-size:15px;font-weight:400;color:var(--text-soft);margin:0;line-height:1.7;}
@media(min-width:620px){}
@media(min-width:1040px){}
.apt-photo .cap.warm{background:var(--terra);}

/* split feature (pool) */
.split{display:grid;grid-template-columns:1fr;}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr;}}
.split .media{min-height:340px;background-size:cover;background-position:center;}
.split .body{padding:clamp(40px,6vw,84px) clamp(24px,5vw,64px);display:flex;flex-direction:column;justify-content:center;}
.feat-list{display:flex;flex-direction:column;gap:14px;margin-top:24px;}
.feat-list li{list-style:none;display:flex;align-items:flex-start;gap:13px;font-size:15.5px;font-weight:400;line-height:1.55;}
.feat-list .material-symbols-rounded{font-size:22px;color:var(--terra);flex-shrink:0;margin-top:1px;}
.dark{background:var(--ink);color:#fff;}
.dark h2,.dark h3{color:#fff;} .dark .lede{color:rgba(255,255,255,.78);}
.dark .feat-list li{color:rgba(255,255,255,.9);}

/* host */
.host{border-top:1px solid rgba(255,255,255,.08);}
.host .body{background:var(--ink-2);}
/* zig-zag: host specchia la piscina (immagine a destra) → i due dark diventano un dittico voluto */
@media(min-width:900px){.host .split{grid-template-columns:.95fr 1.05fr;}.host .media{order:2;}.host .body{order:1;}}
.host-quote{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.4vw,29px);line-height:1.42;color:#fff;margin:18px 0 0;}
.host-sign{font-family:var(--display);font-size:24px;color:#F3D9A4;margin-top:20px;}
.host-badge{position:absolute;left:22px;bottom:22px;background:rgba(39,28,16,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px 16px;}
.host-badge b{font-family:var(--display);font-size:18px;color:#fff;} .host-badge span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:3px;}

/* reviews */
.rev-scores{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:44px;}
.rev-score{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 24px;box-shadow:0 18px 36px -30px rgba(39,28,16,.4);}
.rev-score .n{font-family:var(--display);font-size:34px;font-weight:600;color:var(--logo-green-deep);line-height:1;}
.rev-score .s{color:var(--gold-deep);font-size:12px;letter-spacing:1px;display:block;margin-bottom:3px;}
.rev-score small{font-size:12.5px;color:var(--text-soft);line-height:1.4;display:block;}
.rev-score small b{color:var(--ink);}
.rev-cards{display:grid;gap:0;grid-template-columns:1fr;}
@media(min-width:780px){.rev-cards{grid-template-columns:repeat(3,1fr);}}
.rev-card{background:none;border:none;border-top:1px solid var(--line);padding:28px 0;}
@media(min-width:780px){.rev-card{border-top:none;border-left:1px solid var(--line);padding:6px 36px;} .rev-card:first-child{border-left:none;padding-left:0;} .rev-card:last-child{padding-right:0;}}
.rev-card .material-symbols-rounded{font-size:27px;color:var(--logo-green-deep);margin-bottom:14px;}
.rev-card h3{font-size:21px;margin-bottom:9px;}
.rev-card p{font-size:14.5px;font-weight:400;color:var(--text);margin:0;line-height:1.7;}
.rev-card .tag{display:block;margin-top:15px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--olive-deep);}
.disclaimer{font-size:12.5px;font-style:italic;color:var(--text-soft);text-align:center;margin-top:26px;}

/* location */
.map{height:clamp(320px,46vh,460px);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--sand-100);}
/* Gerarchia delle etichette sulla mappa. Sono tutte permanenti e si accavallano:
   senza pesi diversi le 5 mete coprono la casa. Val del Tasso vince sempre (z-index + peso),
   le mete stanno un gradino sotto; a selezione attiva l'arrivo sale e le altre arretrano. */
.leaflet-tooltip.vdt-label{background:#BE4A28;color:#fff;border:none;font-weight:700;font-size:13px;padding:5px 12px;border-radius:6px;box-shadow:0 6px 16px rgba(39,28,16,.42);z-index:660;}
.leaflet-tooltip-top.vdt-label::before{border-top-color:#BE4A28;}
.leaflet-tooltip.meta-label{background:rgba(255,255,255,.92);color:var(--text-soft);border:1px solid var(--line);font-weight:600;font-size:12px;padding:3px 9px;border-radius:5px;box-shadow:0 2px 8px rgba(39,28,16,.13);transition:opacity .25s,background .25s,color .25s;}
.leaflet-tooltip-top.meta-label::before{border-top-color:rgba(255,255,255,.92);}
.leaflet-tooltip-right.meta-label::before{border-right-color:rgba(255,255,255,.92);}  /* Valpolicella: etichetta a destra */
.leaflet-tooltip.meta-label.is-sfondo{opacity:.4;}                                    /* presenti, ma non contendono l'attenzione */
.leaflet-tooltip.meta-label.is-arrivo{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep);font-weight:700;font-size:13px;box-shadow:0 6px 16px rgba(39,28,16,.4);z-index:650;}
.leaflet-tooltip-top.meta-label.is-arrivo::before{border-top-color:var(--gold-deep);}
.leaflet-tooltip-right.meta-label.is-arrivo::before{border-right-color:var(--gold-deep);}
.dist-row .material-symbols-rounded{font-size:22px;color:var(--terra);flex-shrink:0;margin-top:2px;}

/* FAQ */
.faq{max-width:880px;margin:0 auto;}
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;font-family:var(--display);font-size:clamp(18px,2.1vw,23px);font-weight:500;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--terra-deep);}
.faq summary .material-symbols-rounded{flex-shrink:0;color:var(--terra);font-size:25px;transition:transform .3s;}
.faq details[open] summary .material-symbols-rounded{transform:rotate(45deg);}
.faq .a{padding:0 2px 24px;font-size:15.5px;font-weight:400;line-height:1.75;color:var(--text);max-width:760px;}
.faq .a a{color:var(--terra-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
@media(min-width:760px){}
.step .n{font-family:var(--display);font-size:18px;font-weight:600;color:var(--terra);width:46px;height:46px;border:2px solid var(--terra);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.dark .step .n{color:#F3D9A4;border-color:rgba(243,217,164,.6);}
.dark .step p{color:rgba(255,255,255,.8);}

/* booking form */
.book-final{display:grid;gap:44px;grid-template-columns:1fr;}
@media(min-width:980px){.book-final{grid-template-columns:1fr 1.05fr;align-items:start;}}
.book-card{background:var(--card);border-radius:22px;padding:clamp(28px,4vw,42px);box-shadow:var(--shadow);color:var(--text);}
.book-card h3{font-size:26px;margin-bottom:6px;color:var(--ink);}
.book-card .sub{font-size:14px;font-weight:400;color:var(--text-soft);margin:0 0 22px;}
.fgrid{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:540px){.fgrid.two{grid-template-columns:1fr 1fr;}}
.f label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:7px;}
.f .req{color:var(--terra);} .f .opt{font-size:11px;font-weight:400;color:var(--text-soft);text-transform:none;letter-spacing:0;}
.f input,.f select,.f textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;background:var(--sand-50);outline:none;transition:border-color .18s;}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--terra);}
.f textarea{resize:vertical;min-height:92px;}
.book-card .btn{width:100%;margin-top:4px;}
.proof{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-top:16px;}
.proof span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:400;color:var(--text-soft);}
.proof .s{color:var(--gold-deep);font-size:11px;letter-spacing:1px;} .proof b{font-weight:600;color:var(--text);}
.formok{display:none;margin-top:14px;padding:13px 15px;border-radius:11px;background:rgba(110,122,79,.14);border:1px solid rgba(110,122,79,.3);font-size:14px;color:var(--olive-deep);}
.formok a{color:var(--terra-deep);font-weight:600;}
.contact-list{display:flex;flex-direction:column;gap:12px;margin-top:0;}
.contact-list a,.contact-list>div{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:16px 18px;color:#fff;transition:background .22s,border-color .22s,transform .22s;}
.contact-list a:hover{background:rgba(255,255,255,.1);border-color:var(--terra-soft);transform:translateX(5px);}
.contact-list .material-symbols-rounded{width:52px;height:52px;border-radius:14px;background:rgba(224,135,90,.15);display:flex;align-items:center;justify-content:center;font-size:27px;color:var(--terra-soft);flex-shrink:0;}
.contact-list .ct,.contact-list span span{min-width:0;}
.contact-list small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:4px;}
.contact-list b{display:block;font-family:var(--display);font-size:20px;font-weight:600;color:#fff;line-height:1.2;}

/* footer */
.foot{background:var(--ink);color:#fff;padding:clamp(48px,6vw,76px) 0 28px;}
.foot-grid{display:grid;gap:36px;grid-template-columns:1fr;}
@media(min-width:760px){.foot-grid{grid-template-columns:2.2fr 1fr 1.4fr;}}
.foot h4{font-family:var(--display);font-size:28px;color:#fff;margin-bottom:8px;}
.foot .tag{font-size:14px;font-weight:400;color:rgba(255,255,255,.6);line-height:1.7;max-width:34ch;margin:0 0 18px;}
.foot .col-h{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-soft);margin-bottom:16px;}
.foot a.link{display:block;font-size:14px;font-weight:400;color:rgba(255,255,255,.7);margin-bottom:11px;transition:color .2s;}
.foot a.link:hover{color:#fff;}
.foot .ci{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:400;color:rgba(255,255,255,.7);margin-bottom:12px;line-height:1.5;}
.foot .ci .material-symbols-rounded{font-size:18px;color:var(--terra-soft);margin-top:1px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:12px;color:rgba(255,255,255,.55);}
.foot-bottom .legal{color:rgba(255,255,255,.6);}

/* sticky bar + WA + popup */
/* bottom:22 — stava a 80px per lasciare passare la .stickybar "Prenotate diretto", che il pivot
   a vetrina ha eliminato: era un relitto, e teneva il pulsante in mezzo al contenuto dell'hero. */
.wa{position:fixed;right:18px;bottom:22px;z-index:49;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);transition:transform .2s,opacity .25s;}
.wa.wa-off{opacity:0;pointer-events:none;}
.wa:hover{transform:scale(1.08);} .wa .material-symbols-rounded{color:#fff;font-size:30px;}

/* reveal + reduced motion */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
/* Su mobile il contenuto dell'hero si ancora in ALTO invece di centrarsi. Col centraggio la sua
   posizione dipendeva dall'altezza del contenuto, e il badge recensioni finiva sotto il pulsante
   WhatsApp (fixed, bottom:80px -> occupa 708-764px su uno schermo da 844). Ancorato, è prevedibile. */
@media(max-width:880px){.hero{background-attachment:scroll;align-items:flex-start;padding-top:106px;padding-bottom:120px;} body{padding-bottom:60px;}}
/* Schermi BASSI (es. 360x740): titolo + prezzo + badge non entrano in una schermata e il badge
   tornava sotto il pulsante WhatsApp. Qui l'hero si stringe — è l'unico punto in cui si tocca
   la scala tipografica, e solo dove il contenuto non ci starebbe comunque. */
@media(max-width:880px) and (max-height:790px){
  .hero{padding-top:88px;padding-bottom:80px;}
  .hero h1{font-size:36px;margin-top:14px;}
  .hero p{margin-top:14px;}
  .hero-meta{margin-top:16px;}
  .hero-proof{margin-top:10px;}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;} .hero{background-attachment:scroll;}}

/* ── Pagina dettaglio appartamento ── */
.apt-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;background-size:cover;background-position:center;}
.apt-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,28,16,.5) 0%,rgba(39,28,16,.18) 45%,rgba(39,28,16,.84) 100%);}
.apt-hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(34px,5vw,60px);padding-top:120px;}
.crumb{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.85);font-size:13px;font-weight:500;margin-bottom:16px;}
.crumb:hover{color:#fff;} .crumb .material-symbols-rounded{font-size:18px;}
.apt-hero .cap-tag{display:inline-flex;align-items:center;gap:7px;background:var(--terra);color:#fff;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;}
.apt-hero h1{color:#fff;font-size:clamp(38px,6vw,68px);margin:14px 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.55);}
.apt-hero .sub{color:rgba(255,255,255,.92);font-size:clamp(15px,1.8vw,18px);font-weight:400;max-width:56ch;margin:0 0 22px;text-shadow:0 1px 10px rgba(0,0,0,.55);}
.apt-hero .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;}
.apt-hero .price-tag b{font-size:26px;}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr);} .gallery .big{grid-column:span 2;grid-row:span 2;}}
.gallery .g{background-size:cover;background-position:center;border-radius:14px;aspect-ratio:1;border:1px solid var(--line-soft);min-width:0;}
.gallery .g.big{aspect-ratio:auto;min-height:240px;}
/* mobile: la big a tutta riga — l'aspect-ratio delle celle trasferiva 240px di min-width alla colonna 2 e la griglia usciva dal viewport */
@media(max-width:759px){.gallery .big{grid-column:1/-1;aspect-ratio:16/10;min-height:0;}}
.detail{display:grid;gap:44px;grid-template-columns:1fr;}
@media(min-width:900px){.detail{grid-template-columns:1.35fr .65fr;align-items:start;}}
.detail .body p{font-size:16px;font-weight:400;line-height:1.8;color:var(--text);margin:0 0 18px;}
.detail .body .dropcap::first-letter{font-family:var(--display);font-size:3.6em;float:left;line-height:.8;margin:.04em .1em 0 0;color:var(--terra-deep);font-weight:500;}
.scheda{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;position:sticky;top:84px;box-shadow:0 22px 44px -34px rgba(39,28,16,.3);}
.scheda h3{font-size:21px;margin-bottom:18px;}
.spec .material-symbols-rounded{font-size:20px;color:var(--terra);flex-shrink:0;}
.scheda .price-row{display:flex;align-items:baseline;gap:8px;border-top:1px solid var(--line-soft);padding-top:18px;margin:20px 0 18px;}
.scheda .price-row b{font-family:var(--display);font-size:30px;color:var(--ink);} .scheda .price-row small{color:var(--text-soft);font-size:13px;}
.scheda .btn{width:100%;} .scheda .note{font-size:12px;color:var(--text-soft);text-align:center;margin:12px 0 0;}
@media(max-width:900px){.scheda{position:static;}}
.tri-grid{display:grid;gap:24px;grid-template-columns:1fr;}
@media(min-width:640px){.tri-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.tri-grid{grid-template-columns:repeat(3,1fr);}}

/* ── Servizi / "cosa vi aspetta" — pannello a riquadri con entrata a cascata ── */
@keyframes amenUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.amen-grid{display:grid;gap:1px;grid-template-columns:1fr;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.amen-grid.reveal{opacity:1;transform:none;}
@media(min-width:560px){.amen-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:920px){.amen-grid{grid-template-columns:repeat(3,1fr);}}
.amen{background:var(--sand-50);padding:clamp(26px,3vw,36px);opacity:0;transition:background .3s,transform .3s;}
.amen:hover{background:#fff;transform:translateY(-3px);}
.amen-grid.in .amen{animation:amenUp .55s cubic-bezier(.2,.7,.3,1) forwards;}
.amen-grid.in .amen:nth-child(1){animation-delay:0s}.amen-grid.in .amen:nth-child(2){animation-delay:.05s}.amen-grid.in .amen:nth-child(3){animation-delay:.1s}.amen-grid.in .amen:nth-child(4){animation-delay:.15s}.amen-grid.in .amen:nth-child(5){animation-delay:.2s}.amen-grid.in .amen:nth-child(6){animation-delay:.25s}.amen-grid.in .amen:nth-child(7){animation-delay:.3s}.amen-grid.in .amen:nth-child(8){animation-delay:.35s}.amen-grid.in .amen:nth-child(9){animation-delay:.4s}
.amen .ai{font-size:32px;color:var(--terra);margin-bottom:14px;display:block;}
.amen h3{font-size:20px;margin-bottom:5px;}
.amen p{font-size:14px;font-weight:400;color:var(--text-soft);margin:0;line-height:1.5;}
@media(prefers-reduced-motion:reduce){.amen{opacity:1;}.amen-grid.in .amen{animation:none;}.amen:hover{transform:none;}}

/* ════════════════════════════════════════════════════════════
   CINEMATIC MOTION v2 (2026-07-12) — ricco ma trattenuto.
   Tutto dietro prefers-reduced-motion. Design-system invariato.
   Studio: competitor-research/vdt-motion-2026-07-12.md
   ════════════════════════════════════════════════════════════ */

/* — HERO: media layer + Ken Burns (transform, no jank) — */
.hero-media{position:absolute;inset:-7% -2%;z-index:0;background:url('img/piscina-vigne-1.jpg') center/cover no-repeat;transform-origin:54% 42%;animation:kenburns 26s ease-out both;will-change:transform;}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}

/* hero text — entrata staggered al load */
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-tag,.hero h1,.hero p,.hero-meta,.hero-proof{opacity:0;animation:riseIn .95s cubic-bezier(.2,.7,.3,1) both;}
.hero-tag{animation-delay:.15s}.hero h1{animation-delay:.30s}.hero p{animation-delay:.50s}.hero-meta{animation-delay:.68s}.hero-proof{animation-delay:.84s}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.82);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:riseIn 1s .95s both;}
.scroll-cue:hover{color:#fff;}
.scroll-cue .cue-arr{font-size:28px;line-height:1;animation:cueBob 1.9s ease-in-out infinite;}
@keyframes cueBob{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(7px)}}

/* — APT-HERO: entrata staggered (tutte le pagine appartamento) — */
.apt-hero .wrap>*{opacity:0;animation:riseIn .9s cubic-bezier(.2,.7,.3,1) both;}
.apt-hero .wrap>*:nth-child(1){animation-delay:.12s}.apt-hero .wrap>*:nth-child(2){animation-delay:.24s}.apt-hero .wrap>*:nth-child(3){animation-delay:.36s}.apt-hero .wrap>*:nth-child(4){animation-delay:.5s}.apt-hero .wrap>*:nth-child(5){animation-delay:.62s}

/* — reveal direzionale (regia) — .reveal fornisce opacity+transition; questi cambiano solo il transform — */
.reveal.from-r{transform:translateX(30px);}
.reveal.from-l{transform:translateX(-30px);}
.reveal.from-r.in,.reveal.from-l.in{transform:none;}

/* — TICKER: sfuma i bordi — */
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.apt-foot .material-symbols-rounded{transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.apt:hover .apt-foot .material-symbols-rounded{transform:translateX(5px);}
.apt-grid .apt:nth-child(2),.tri-grid .apt:nth-child(2){transition-delay:.09s}
.apt-grid .apt:nth-child(3),.tri-grid .apt:nth-child(3){transition-delay:.18s}

/* — GALLERY (pagine app): hover zoom — */
.gallery .g{transition:background-size .6s cubic-bezier(.2,.7,.3,1),box-shadow .35s;}
.gallery .g:hover{background-size:114%;box-shadow:var(--shadow);}

/* — feat-list: stagger dentro il blocco rivelato — */
.reveal .feat-list li{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);}
.reveal.in .feat-list li{opacity:1;transform:none;}
.reveal.in .feat-list li:nth-child(2){transition-delay:.09s}.reveal.in .feat-list li:nth-child(3){transition-delay:.18s}.reveal.in .feat-list li:nth-child(4){transition-delay:.27s}.reveal.in .feat-list li:nth-child(5){transition-delay:.36s}.reveal.in .feat-list li:nth-child(6){transition-delay:.45s}.reveal.in .feat-list li:nth-child(7){transition-delay:.54s}

/* — RECENSIONI: numeri count-up (js) — riserva spazio per non far saltare il layout — */
.rev-score .n{font-variant-numeric:tabular-nums;}

/* — DOVE/MAPPA: fondo caldo topografico invece del vuoto — */
.map{background-color:var(--sand-100);background-image:radial-gradient(circle at 28% 34%,rgba(110,122,79,.12),transparent 46%),radial-gradient(circle at 74% 70%,rgba(190,74,40,.09),transparent 42%),repeating-linear-gradient(58deg,rgba(39,28,16,.04) 0 1px,transparent 1px 26px);}

/* — FAQ: apertura morbida del contenuto — */
@keyframes faqOpen{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.faq details[open] .a{animation:faqOpen .34s ease;}

/* — CONTATTI: tile ridisegnate nel blocco booking form (sopra) — */

/* — parallax hint — */
.split .media,.apt-hero{will-change:background-position;}

/* ── reduced-motion: azzera tutto il nuovo motion ── */
@media(prefers-reduced-motion:reduce){
  .hero-media{animation:none;transform:none;}
  .hero-tag,.hero h1,.hero p,.hero-meta,.hero-proof,.scroll-cue,.apt-hero .wrap>*{animation:none;opacity:1;}
  .scroll-cue{display:none;}
  .reveal.from-r,.reveal.from-l{transform:none;}
  .apt:hover .apt-photo,.gallery .g:hover{background-size:cover;}
  .reveal .feat-list li{opacity:1;transform:none;transition:none;}
  .faq details[open] .a{animation:none;}
  .dist-row:hover,.contact-list a:hover{transform:none;}
}
@media(max-width:880px){
}

/* ════════════════════════════════════════════════════════════
   SEZIONE "LE CASE" — header compatto + card stile Airbnb (2026-07-12)
   Studio: competitor-research/vdt-cards-airbnb-2026-07-12.md
   ════════════════════════════════════════════════════════════ */

/* header: solo titolo, compatto e allineato a sinistra */
.cases-head{margin-bottom:40px;}
.cases-title{max-width:620px;}
.cases-title .kicker{margin-bottom:10px;}
.cases-title .h2{font-size:clamp(27px,3.1vw,40px);}
.cases-title .sun-line{margin-top:16px;}

/* griglia card — contenitore un filo più largo per card più ampie */
.wrap.lodge-wrap{max-width:1340px;}
.lodge-grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:620px){.lodge-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.lodge-grid{grid-template-columns:repeat(3,1fr);}}

/* card */
.lodge{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .35s,opacity .6s;}
.lodge:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.lodge-grid .lodge:nth-child(2){transition-delay:.08s}.lodge-grid .lodge:nth-child(3){transition-delay:.16s}.lodge-grid .lodge:nth-child(4){transition-delay:.24s}

/* carosello */
.lodge-gallery{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand-200);}
.lodge-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;}
.lodge-slide{flex:0 0 100%;background-size:cover;background-position:center;}
.lodge-badge{position:absolute;top:12px;left:12px;z-index:3;background:rgba(39,28,16,.82);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px);pointer-events:none;}
.lodge-badge.warm{background:var(--terra);}
/* frecce */
.lodge-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(39,28,16,.28);opacity:0;transition:opacity .25s,background .2s,transform .2s;}
.lodge-nav.prev{left:10px;}.lodge-nav.next{right:10px;}
.lodge-nav:hover{background:#fff;transform:translateY(-50%) scale(1.09);}
.lodge-nav:active{transform:translateY(-50%) scale(.96);}
.lodge-nav .material-symbols-rounded{font-size:22px;}
.lodge-gallery:hover .lodge-nav,.lodge-nav:focus-visible{opacity:1;}
/* dots */
.lodge-dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;display:flex;gap:6px;justify-content:center;pointer-events:none;}
.lodge-dots button{width:6px;height:6px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.55);pointer-events:auto;cursor:pointer;transition:transform .2s,background .2s;box-shadow:0 1px 3px rgba(0,0,0,.35);}
.lodge-dots button.on{background:#fff;transform:scale(1.45);}

/* corpo */
.lodge-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.lodge-name{font-size:21px;line-height:1.12;}
.lodge-desc{font-size:13.5px;font-weight:400;color:var(--text-soft);line-height:1.55;margin:7px 0 0;}
.lodge-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.lodge-price{font-size:12px;color:var(--text-soft);white-space:nowrap;}
.lodge-price small{font-size:12px;}
.lodge-price b{font-family:var(--display);font-size:18px;color:var(--ink);font-weight:600;}
/* striscia servizi */
.lodge-amen{list-style:none;padding:17px 0 0;margin:17px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;border-top:1px solid var(--line-soft);}
.lodge-amen li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--text);line-height:1.25;}
.lodge-amen .material-symbols-rounded{font-size:19px;color:var(--olive);flex-shrink:0;}
/* cta = stretched link su tutta la card */
.lodge-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--terra-deep);white-space:nowrap;}
.lodge-cta .material-symbols-rounded{font-size:18px;transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.lodge:hover .lodge-cta .material-symbols-rounded{transform:translateX(4px);}
.lodge-cta::after{content:'';position:absolute;inset:0;z-index:2;}

@media(hover:none),(max-width:880px){
  .lodge-nav{opacity:.94;width:32px;height:32px;}
}
@media(prefers-reduced-motion:reduce){
  .lodge-track{transition:none;}
  .lodge:hover{transform:none;}
  .lodge:hover .lodge-cta .material-symbols-rounded{transform:none;}
}

/* ════════════════════════════════════════════════════════════
   DOVE / DINTORNI — mappa grande sempre presente + mete interattive (2026-07-12)
   ════════════════════════════════════════════════════════════ */
.dove-head{margin-bottom:28px;text-align:center;}
.dove-title{max-width:720px;margin:0 auto;}
.dove-title .kicker{margin-bottom:11px;}
.dove-title .h2{font-size:clamp(34px,3.9vw,54px);}
.dove-title .sun-line{margin:16px auto 0;}
.wrap.dove-wrap{max-width:1360px;}
.dove-layout{display:grid;gap:26px;grid-template-columns:1fr;}
@media(min-width:900px){.dove-layout{grid-template-columns:1.75fr 1fr;align-items:stretch;gap:60px;}}
.map-wrap{position:relative;display:flex;}
#map.map{height:auto;min-height:clamp(520px,66vh,720px);width:100%;}
/* la scheda del luogo è alta ~350px e sta SOPRA la mappa: a 380px la copriva quasi tutta
   e del percorso non si vedeva niente. Qui le si lascia una fascia visibile sopra la scheda. */
@media(max-width:899px){#map.map{min-height:580px;}}
.dove-aside{display:flex;flex-direction:column;}
.dove-intro{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-soft);margin:0 0 18px;line-height:1.45;}
.dove-intro .material-symbols-rounded{font-size:23px;color:var(--terra);flex-shrink:0;}
.meta-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.meta{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;font-family:inherit;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s,background .2s;}
.meta:hover{border-color:var(--terra-soft);transform:translateX(4px);box-shadow:0 14px 26px -20px rgba(39,28,16,.45);}
.meta.active{border-color:var(--terra);background:#fff;box-shadow:0 14px 28px -20px rgba(190,74,40,.5);}
.meta .mi{font-size:24px;color:var(--terra);flex-shrink:0;}
.meta-txt{flex:1;min-width:0;}
.meta-txt b{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--ink);display:block;line-height:1.15;}
.meta-txt small{font-size:12px;color:var(--text-soft);line-height:1.4;display:block;margin-top:3px;}
.meta-go{font-size:18px;color:rgba(39,28,16,.38);flex-shrink:0;transition:transform .2s,color .2s;}
.meta:hover .meta-go,.meta.active .meta-go{color:var(--terra);transform:translate(2px,-2px);}
.dove-cta{margin-top:22px;align-self:center;text-transform:uppercase;letter-spacing:.06em;}
/* scheda meta sulla mappa — "cosa aspettarsi" */
.place-card{position:absolute;left:14px;bottom:14px;z-index:600;width:min(340px,calc(100% - 28px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 46px -18px rgba(39,28,16,.55);overflow:hidden;display:flex;flex-direction:column;animation:placeIn .3s cubic-bezier(.2,.7,.3,1);}
.place-card[hidden]{display:none;}
@keyframes placeIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.place-photo{height:170px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--olive) 0%,var(--terra-soft) 100%);}
.pc-track{position:absolute;inset:0;display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform;}
.pc-slide{flex:0 0 100%;background-size:cover;background-position:center;}
.pc-ico{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;color:rgba(255,255,255,.92);}
.place-photo.has-img .pc-ico{display:none;}
.pc-dots{position:absolute;left:0;right:0;bottom:9px;z-index:2;display:flex;gap:5px;justify-content:center;}
.pc-dots button{width:6px;height:6px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.55);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s,background .2s;}
.pc-dots button.on{background:#fff;transform:scale(1.4);}
.place-body{padding:14px 16px 16px;}
.place-body h4{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);margin:0;line-height:1.12;}
.place-dist{font-size:12.5px;font-weight:600;color:var(--terra-deep);margin:4px 0 8px;}
.place-body p{font-size:13px;color:var(--text-soft);line-height:1.5;margin:0 0 11px;}
.place-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.place-tags span{font-size:11px;font-weight:600;color:var(--olive-deep);background:rgba(110,122,79,.13);border-radius:999px;padding:4px 10px;}
.place-dir{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--terra-deep);}
.place-dir .material-symbols-rounded{font-size:16px;}
.place-close{position:absolute;top:9px;right:9px;z-index:2;background:rgba(255,255,255,.92);border:none;cursor:pointer;color:var(--ink);font-size:19px;line-height:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .2s;}
.place-close:hover{background:#fff;}
@media(max-width:520px){.place-card{left:8px;right:8px;bottom:8px;width:auto;}}
/* etichette mappa più leggibili */
.leaflet-tooltip{font-size:13px;font-weight:600;padding:3px 8px;}
.leaflet-tooltip.vdt-label{font-size:14px;}
@media(prefers-reduced-motion:reduce){.meta:hover{transform:none;}.meta:hover .meta-go,.meta.active .meta-go{transform:none;}.place-card{animation:none;}.pc-track{transition:none;}}

/* Hero MOBILE (scelta utente 2026-07-14, variante V3): crop verticale dei vigneti
   (chi_0979) — cielo dietro al titolo, filari sotto: la headline "tra le vigne" combacia
   con la foto. Pill e prezzo compattati a 1 riga, niente ken-burns.
   NB: in coda al foglio perché .hero-media base (shorthand background) è definita dopo
   la zona hero — a pari specificità vince l'ordine. */
@media(max-width:560px){
  .hero-media{background-image:url('img/hero-mobile.jpg');background-position:center 30%;animation:none;}
  .hero h1{font-size:33px;}
  .hero p{font-size:15.5px;margin-top:14px;max-width:34ch;}
  .hero-meta{margin-top:18px;}
  .hero-proof{margin-top:16px;}
  .ht-loc,.pt-lead{display:none;}
}

/* Logo storico (wordmark verde dal vecchio sito, richiesta cliente 15/07).
   In cima è GRANDE, allo scroll si ritira insieme alla nav (.solid, soglia 60px in app.js):
   transizione sull'altezza — width:auto segue — così il rientro è fluido, non on/off. */
.logo-word{height:clamp(44px,4.6vw,58px);width:auto;display:block;transition:height .5s cubic-bezier(.2,.7,.3,1);}
.nav.solid .logo-word{height:36px;}
.logo-mark{transition:width .5s cubic-bezier(.2,.7,.3,1),height .5s cubic-bezier(.2,.7,.3,1);}
.nav:not(.solid) .logo-mark{width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);}
.nav:not(.solid) .logo-word{filter:drop-shadow(0 0 7px rgba(250,242,225,.95)) drop-shadow(0 0 2px rgba(250,242,225,.9));}
@media(prefers-reduced-motion:reduce){.logo-word,.logo-mark{transition:none;}}
@media(max-width:560px){.brand span{display:none;}}

/* ── SELETTORE LINGUA ──────────────────────────────────────────────
   Bandiere in SVG dentro il CSS, non emoji: Windows non ha il font delle
   bandiere e Chrome mostrerebbe "IT" in una scatoletta invece del tricolore.
   Qui pesano una volta sola nel foglio di stile e zero nell'HTML.
   Deve reggere i due stati della navbar: trasparente sull'hero e .solid dopo lo scroll. */
.flag{width:20px;height:14px;border-radius:2px;flex:none;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(39,28,16,.18);}
.flag-it{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009246' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23CE2B37' d='M2 0h1v2H2z'/%3E%3C/svg%3E");}
.flag-fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002395' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ED2939' d='M2 0h1v2H2z'/%3E%3C/svg%3E");}
.flag-de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Cpath d='M0 0h3v1H0z'/%3E%3Cpath fill='%23D00' d='M0 1h3v1H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h3v1H0z'/%3E%3C/svg%3E");}
.flag-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");}

.langsw{position:relative;flex:none;}
.langsw-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:6px 8px 6px 9px;cursor:pointer;line-height:1;transition:background .2s,border-color .2s;}
.langsw-btn:hover{background:rgba(255,255,255,.24);}
.langsw-caret{font-size:17px;transition:transform .22s;}
.langsw-btn[aria-expanded="true"] .langsw-caret{transform:rotate(180deg);}
.nav.solid .langsw-btn{background:rgba(39,28,16,.05);border-color:var(--line);color:var(--ink);}
.nav.solid .langsw-btn:hover{background:rgba(39,28,16,.09);}

.langsw-menu{position:absolute;top:calc(100% + 9px);left:0;min-width:172px;margin:0;padding:6px;list-style:none;background:var(--sand-50);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 44px -20px rgba(39,28,16,.45);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s;}
.langsw.open .langsw-menu{opacity:1;transform:none;pointer-events:auto;}
.langsw-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text)!important;transition:background .16s;}
.langsw-menu a:hover{background:var(--sand-100);}
.langsw-menu a[aria-current]{color:var(--terra-deep)!important;font-weight:600;background:rgba(190,74,40,.08);}
@media(prefers-reduced-motion:reduce){.langsw-menu,.langsw-caret{transition:none;}}

/* nel drawer a tutto schermo la tendina non serve: le quattro lingue in riga */
.drawer-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;max-width:320px;}
.drawer-langs a{display:inline-flex;align-items:center;gap:7px;font-family:var(--body)!important;font-size:14px!important;padding:8px 13px!important;border-radius:999px;border:1px solid rgba(250,242,225,.22);color:rgba(250,242,225,.78)!important;}
.drawer-langs a[aria-current]{color:var(--ink)!important;background:var(--sand-50);border-color:var(--sand-50);font-weight:600;}
@media(max-width:400px){.langsw-btn{padding:5px 6px 5px 7px;} .langsw-caret{font-size:15px;}}