/* Generato da wp/strumenti/build_assets.py dal mockup v3 (villetta.css): non modificare a mano. */
/* Scheda villetta — stessi token della home v2 */
:root{
      
       
      

  --color-bg:var(--sand-50); --color-surface:var(--white); --color-text:var(--ink); --color-text-muted:var(--slate-600);
  --color-heading:var(--sea-900); --color-primary:var(--sea-700); --color-primary-hover:var(--sea-900);
  --color-accent:var(--sand-500); --color-accent-hover:var(--sand-600); --color-on-accent:var(--sea-900);
  --color-highlight:var(--sand-100); --color-border:var(--line); --color-focus:var(--sea-500);
  --color-inverse-bg:var(--sea-900); --color-inverse-text:var(--sea-200); --color-inverse-accent:var(--sand-300);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-sm:10px; --radius:14px; --radius-lg:24px; --radius-pill:999px;
  --shadow-sm:0 2px 8px -2px color-mix(in srgb, var(--global-palette3) 12%, transparent); --shadow:0 10px 30px -12px color-mix(in srgb, var(--global-palette3) 25%, transparent);
  --z-raised:10; --z-header:40; --z-mbar:100; --z-dialog:200;
  --dur-fast:150ms; --dur:220ms; --ease-out:cubic-bezier(.2,.8,.2,1);
  --header-h:76px;
  --f-head:var(--global-heading-font-family, 'Fraunces', Georgia, serif); --f-body:var(--global-body-font-family, 'Source Sans 3', system-ui, sans-serif);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--space-4))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{font-family:var(--f-body);font-size:17px;line-height:1.6;color:var(--color-text);background:var(--color-bg)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a,button{touch-action:manipulation}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.15;color:var(--color-heading);text-wrap:balance}
h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:var(--space-4)}
h3{font-size:1.2rem}
.num{font-variant-numeric:lining-nums tabular-nums}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2)}
.muted{color:var(--color-text-muted)}
.ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:.8rem 1.5rem;border-radius:var(--radius-pill);font:inherit;font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-accent-hover)}
.btn-dark{background:var(--color-primary);color:var(--white)}
.btn-dark:hover{background:var(--color-primary-hover)}
.btn-outline{background:var(--color-surface);color:var(--color-heading);border:1.5px solid var(--color-border)}
.btn-outline:hover{border-color:var(--color-heading)}
.btn-block{width:100%}
.btn[aria-busy="true"]{opacity:.6;cursor:progress}

/* Breadcrumb */
.crumbs{padding:var(--space-5) 0 var(--space-3);font-size:.92rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0}
.crumbs li+li::before{content:"/";margin-right:var(--space-2);color:var(--color-text-muted)}
.crumbs a{color:var(--color-text-muted);text-decoration:none;display:inline-block;padding:2px 0}
.crumbs a:hover{color:var(--color-primary);text-decoration:none}

/* Titolo */
.title{display:flex;justify-content:space-between;align-items:end;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-5)}
.title h1{font-size:clamp(2.1rem,4.5vw,3.2rem)}
.title .sub{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-2);color:var(--color-text-muted)}
.title .sub span{display:inline-flex;align-items:center;gap:6px}
.title .sub .ico{width:18px;height:18px;color:var(--color-primary)}

/* Galleria: griglia statica, niente auto-rotazione */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--space-2);height:min(56vw,500px);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.gallery > button{border:0;padding:0;margin:0;cursor:zoom-in;background:var(--sea-100);overflow:hidden;display:block}
.gallery > button:first-child{grid-row:1/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
.gallery > button:hover img{transform:scale(1.03)}
.gallery > button:focus-visible{outline-offset:-4px}
.gallery .all{position:absolute;right:var(--space-4);bottom:var(--space-4);min-height:44px;cursor:pointer}
.gallery .all .btn{background:var(--color-surface);box-shadow:var(--shadow)} /* leggibile sopra la foto */

/* Layout due colonne */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,5vw,64px);padding:var(--space-7) 0 var(--space-8)}
.block{padding:var(--space-6) 0;border-bottom:1px solid var(--color-border)}
.block:first-child{padding-top:0}
.block:last-child{border-bottom:0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);list-style:none;padding:0}
.facts li{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.facts .ico{color:var(--color-primary);width:28px;height:28px}
.facts strong{font-size:1rem}
.facts span{font-size:.9rem;color:var(--color-text-muted);line-height:1.4}
.prose p+p{margin-top:var(--space-3)}
.prose{max-width:68ch}

.amen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3) var(--space-6);list-style:none;padding:0}
.amen li{display:flex;align-items:center;gap:var(--space-3);min-height:32px}
.amen .ico{color:var(--color-primary)}

.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);list-style:none;padding:0}
.rooms li{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4);background:var(--color-surface);display:flex;flex-direction:column;align-items:flex-start}
.rooms .ico{color:var(--color-primary);margin-bottom:var(--space-2)}
.rooms span{display:block;font-size:.9rem;color:var(--color-text-muted)}

/* Tabella tariffe */
.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}
table{width:100%;border-collapse:collapse;font-size:.98rem}
caption{text-align:left;padding:var(--space-4);font-weight:700;border-bottom:1px solid var(--color-border)}
caption span{display:block;font-weight:400;font-size:.9rem;color:var(--color-text-muted)}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border)}
thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);background:var(--color-bg)}
td.price{text-align:right;font-weight:700}
thead th:last-child{text-align:right}
tr.peak td{background:var(--color-highlight)}
tr.peak td:first-child::after{content:"Alta stagione";margin-left:var(--space-2);font-size:.72rem;font-weight:700;background:var(--color-accent);color:var(--color-on-accent);padding:2px 8px;border-radius:var(--radius-pill);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.extras{margin-top:var(--space-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.box{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-5);background:var(--color-surface)}
.box ul{padding-left:1.1rem;margin-top:var(--space-2)}
.box li{margin:4px 0}
.box.incl{background:var(--sea-100);border-color:transparent}

/* Posizione */
.dist{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-6);list-style:none;padding:0;margin-top:var(--space-4)}
.dist li{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px dashed var(--color-border)}
.dist b{color:var(--color-primary)}

/* Condizioni */
details{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface)}
details+details{margin-top:var(--space-3)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-3) var(--space-5);font-weight:700}
summary::-webkit-details-marker{display:none}
summary .ico{transition:transform var(--dur) var(--ease-out);color:var(--color-primary)}
details[open] summary .ico{transform:rotate(180deg)}
details > div{padding:0 var(--space-5) var(--space-5);color:var(--color-text-muted)}

/* Sidebar prenotazione sticky */
.aside{position:relative}
.bookcard{position:sticky;top:calc(var(--header-h) + var(--space-5));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-5)}
.bookcard .from{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.bookcard .from b{font-family:var(--f-head);font-size:2.2rem;color:var(--color-heading);line-height:1}
.bookcard .from small{color:var(--color-text-muted)}
.bookcard .offer{display:flex;gap:var(--space-2);align-items:flex-start;background:var(--color-highlight);border-radius:var(--radius-sm);padding:var(--space-3);font-size:.92rem;margin:var(--space-4) 0}
.bookcard .offer .ico{color:var(--sand-700);width:20px;height:20px;margin-top:2px}
.bookcard form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-1)}
.field input,.field select{width:100%;min-width:0;min-height:48px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:0 var(--space-3);font:inherit;font-size:16px;color:var(--color-text);background:var(--color-bg)}
.field input:focus-visible,.field select:focus-visible{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px var(--sea-100)}
.field.full,.bookcard .btn,.bookcard .form-status,.estimate{grid-column:1/-1}
.estimate{font-size:.95rem;border-top:1px solid var(--color-border);padding-top:var(--space-3);margin-top:var(--space-1)}
.estimate div{display:flex;justify-content:space-between;padding:3px 0}
.estimate .tot{font-weight:700;font-size:1.05rem;color:var(--color-heading);border-top:1px solid var(--color-border);margin-top:var(--space-2);padding-top:var(--space-2)}
.form-status{min-height:1.2em;font-size:.92rem;font-weight:600;color:var(--color-primary)}
.bookcard .help{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:.92rem}
.bookcard .help a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;text-decoration:none;font-weight:600;color:var(--color-primary)}
.bookcard .help a:hover{text-decoration:none}
.bookcard .help .ico{width:20px;height:20px}

/* Altre villette */
.others{background:var(--color-surface);padding:var(--space-8) 0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);list-style:none;padding:0;margin-top:var(--space-5)}
.card{position:relative;display:grid;grid-template-columns:200px 1fr;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.card:hover,.card:focus-within,.card.tapped{box-shadow:var(--shadow);transform:translateY(-2px)}
.card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.card div{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);justify-content:center}
.card a{font-weight:700;color:var(--color-primary);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.card a::after{content:"";position:absolute;inset:0}

/* Lightbox (dialog nativo: focus trap + Esc gratis) */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
dialog::backdrop{background:color-mix(in srgb, var(--global-palette3) 92%, transparent)}
.lb{display:grid;grid-template-rows:auto 1fr auto;height:100%;color:var(--white);padding:var(--space-4)}
.lb-top{display:flex;justify-content:space-between;align-items:center}
.lb-stage{display:flex;align-items:center;justify-content:center;gap:var(--space-4);min-height:0}
.lb-stage img{max-height:100%;max-width:min(1100px,100%);object-fit:contain;border-radius:var(--radius-sm)}
.lb button{width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb, var(--global-palette9) 40%, transparent);background:color-mix(in srgb, var(--global-palette9) 8%, transparent);color:var(--white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.lb button:hover{background:color-mix(in srgb, var(--global-palette9) 20%, transparent)}
.lb button:focus-visible{outline-color:var(--sand-300)}
.lb-cap{text-align:center;padding-top:var(--space-3);color:var(--sea-200)}

/* Barra mobile */
.mbar{display:none}
@media (max-width:1024px){
  .layout{grid-template-columns:1fr}
  .aside{order:-1}
  .bookcard{position:static}
  .facts{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
}
@media (max-width:768px){
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr;height:auto;aspect-ratio:4/4}
  .gallery > button:first-child{grid-column:1/3;grid-row:1}
  .gallery > button:nth-child(n+4){display:none}
  .rooms,.extras{grid-template-columns:1fr}
  .dist,.amen{grid-template-columns:1fr}
  .card{grid-template-columns:130px 1fr}
  .lb-stage .prev,.lb-stage .next{position:absolute;bottom:var(--space-7)}
  .lb-stage .prev{left:var(--space-4)}.lb-stage .next{right:var(--space-4)}
}
@media (max-width:600px){
  body{font-size:16px;padding-bottom:80px}
  .aside{display:none} /* su mobile la prenotazione va nella barra fissa + sezione #prenota-m */
  .facts{gap:var(--space-2)}
  th,td{padding:var(--space-3)}
  .mbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);position:fixed;inset:auto 0 0 0;z-index:var(--z-mbar);padding:10px var(--space-4) calc(10px + env(safe-area-inset-bottom));background:var(--color-surface);box-shadow:0 -6px 20px color-mix(in srgb, var(--global-palette3) 12%, transparent)}
  .mbar b{font-family:var(--f-head);font-size:1.4rem;color:var(--color-heading);line-height:1}
  .mbar small{display:block;font-size:.8rem;color:var(--color-text-muted)}
  .mbar p{flex:1;min-width:0}
  .mbar .call{flex:0 0 48px;padding:0;border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-primary)}
  .mbar .short{display:none}
  .mobile-book{display:block!important}
  .mbar{transition:transform var(--dur) var(--ease-out)}
  .mbar.is-hidden{transform:translateY(110%)}
}
.mobile-book{display:none}
@media (max-width:400px){.mbar .long{display:none}.mbar .short{display:inline}.mbar .btn-primary{padding-inline:1rem}}

/* Link mai sottolineati (richiesta dell'utente): nel testo restano riconoscibili per colore e peso */
main p a:not([class]),main li a:not([class]),main label a,main caption a{color:var(--color-primary);font-weight:600}
main p a:not([class]):hover,main li a:not([class]):hover,main label a:hover,main caption a:hover{color:var(--color-primary-hover)}

/* Mobile: barra promo con "Scopri le date" a capo, pulsanti affiancati diventano uguali e a tutta larghezza */
@media (max-width:600px){
  .promo .sep{display:none}
  .promo .promo-cta{display:block}
  .hero .ctas,.final .ctas,.tile.cta .row{flex-direction:column;align-items:stretch}
  .hero .ctas .btn,.final .ctas .btn,.tile.cta .row .btn{width:100%;justify-content:center}
}

.card img{transition:transform 500ms var(--ease-out)}
.card:hover img,.card:focus-within img,.card.tapped img{transform:scale(1.04)}
