/* Generato da wp/strumenti/build_assets.py dal mockup v3 (verifica.css): non modificare a mano. */
/* Verifica disponibilità — stessi token di design-system/residence-al-paradiso/MASTER.md */
:root{
      
       
       --red-700:#B42318; --red-50:#FDECEA;

  --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-error:var(--red-700); --color-error-bg:var(--red-50);
  --color-inverse-bg:var(--sea-900); --color-inverse-text:var(--sea-200);

  --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-header:40; --z-skip:300;
  --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,label{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}
.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}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;padding:.8rem 1.6rem;border-radius:var(--radius-pill);font:inherit;font-weight:700;font-size:1.02rem;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-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[aria-busy="true"]{opacity:.6;cursor:progress}

.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}
.crumbs a:hover{color:var(--color-primary);text-decoration:none}

.intro{margin-bottom:var(--space-6)}
.intro h1{font-size:clamp(2.1rem,4.5vw,3.2rem)}
.intro p{max-width:60ch;margin-top:var(--space-3);font-size:1.1rem}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,5vw,64px);padding-bottom:var(--space-8);align-items:start}

/* Form */
.form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(20px,4vw,40px)}
fieldset{border:0;padding:0;margin:0 0 var(--space-6);min-width:0}
legend{font-family:var(--f-head);font-size:1.4rem;font-weight:600;color:var(--color-heading);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3)}
legend .step{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--sea-100);color:var(--color-primary);font-family:var(--f-body);font-size:.95rem;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.full{grid-column:1/-1}
.field label,.field .label{display:block;font-weight:700;font-size:.95rem;margin-bottom:var(--space-1)}
.req{color:var(--color-error);margin-left:2px}
.hint{display:block;font-size:.88rem;color:var(--color-text-muted);margin-top:var(--space-1)}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;min-height:48px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);font:inherit;font-size:16px;color:var(--color-text);background:var(--color-bg);transition:border-color var(--dur),box-shadow var(--dur)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px var(--sea-100)}
.field [aria-invalid="true"]{border-color:var(--color-error)!important;background:var(--color-error-bg)!important}
.err{display:none;align-items:center;gap:6px;color:var(--color-error);font-size:.9rem;font-weight:600;margin-top:var(--space-1)}
.err .ico{width:16px;height:16px}
.field.has-error .err{display:flex}

/* Scelta villetta a schede (radio) */
.villas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);border:0;padding:0}
.villa{position:relative}
.villa input{position:absolute;opacity:0;inset:0;cursor:pointer}
.villa label{display:flex;flex-direction:column;gap:2px;height:100%;border:1.5px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4);background:var(--color-bg);cursor:pointer;transition:border-color var(--dur),background-color var(--dur),box-shadow var(--dur)}
.villa label b{font-size:1.05rem}
.villa label span{font-size:.88rem;color:var(--color-text-muted)}
.villa label .from{margin-top:var(--space-2);font-weight:700;color:var(--color-primary)}
.villa input:hover + label{border-color:var(--sea-200)}
.villa input:checked + label{border-color:var(--color-primary);background:var(--sea-100);box-shadow:inset 0 0 0 1px var(--color-primary)}
.villa input:checked + label::after{content:"Selezionata";position:absolute;top:var(--space-3);right:var(--space-3);font-size:.72rem;font-weight:700;background:var(--color-primary);color:var(--white);padding:2px 8px;border-radius:var(--radius-pill)}
.villa input:focus-visible + label{outline:3px solid var(--color-focus);outline-offset:3px}
.villa .promo-tag{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:var(--space-2);padding:2px 8px 2px 6px;border-radius:var(--radius-pill);background:var(--color-highlight);color:var(--color-text);font-size:.76rem;font-weight:700}
.villa .promo-tag .ico{width:14px;height:14px;color:var(--sand-700)}
.villa .promo-tag[hidden]{display:none}
.villa label .from del{font-weight:400;color:var(--color-text-muted)}

/* Contatore ospiti */
.stepper{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);padding:var(--space-1)}
.stepper button{width:44px;height:44px;border-radius:var(--radius-sm);border:0;background:var(--color-surface);color:var(--color-primary);font-size:1.4rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm)}
.stepper button:disabled{opacity:.4;cursor:not-allowed}
.stepper output{font-weight:700;font-size:1.1rem;min-width:2ch;text-align:center}

.check{display:flex;gap:var(--space-3);align-items:flex-start}
.check input{width:24px;height:24px;margin-top:2px;accent-color:var(--color-primary);flex:none;cursor:pointer}
.check label{font-weight:500}

.err-summary{display:none;border:2px solid var(--color-error);background:var(--color-error-bg);border-radius:var(--radius);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6)}
.err-summary.show{display:block}
.err-summary h2{font-family:var(--f-body);font-size:1.05rem;color:var(--color-error);margin-bottom:var(--space-2)}
.err-summary ul{padding-left:1.2rem}
.err-summary a{color:var(--color-error);font-weight:600}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.actions .muted{font-size:.9rem}

/* Successo */
.success{display:none;text-align:center;padding:var(--space-6) var(--space-4)}
.success.show{display:block}
.success .badge{width:72px;height:72px;margin:0 auto var(--space-4);border-radius:50%;background:var(--sea-100);color:var(--color-primary);display:flex;align-items:center;justify-content:center}
.success .badge .ico{width:36px;height:36px}
.success h2{font-size:2rem;margin-bottom:var(--space-3)}
.success p{max-width:48ch;margin:0 auto var(--space-5)}
.success dl{display:inline-grid;grid-template-columns:auto auto;gap:var(--space-1) var(--space-5);text-align:left;background:var(--color-bg);border-radius:var(--radius);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-5)}
.success dt{color:var(--color-text-muted)}
.success dd{font-weight:700;margin:0}

/* Riepilogo laterale */
.summary{position:sticky;top:calc(var(--header-h) + var(--space-5));display:flex;flex-direction:column;gap:var(--space-4)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow)}
.card img{border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover;width:100%;margin-bottom:var(--space-4)}
.card h2{font-size:1.35rem;margin-bottom:var(--space-1)}
.rows{margin-top:var(--space-4);border-top:1px solid var(--color-border);padding-top:var(--space-3)}
.rows div{display:flex;justify-content:space-between;gap:var(--space-3);padding:4px 0;font-size:.97rem}
.rows dt{color:var(--color-text-muted)}
.rows dd{margin:0;font-weight:600;text-align:right}
.rows .tot{border-top:1px solid var(--color-border);margin-top:var(--space-2);padding-top:var(--space-3);font-size:1.1rem}
.rows .tot dt{color:var(--color-heading);font-weight:700}
.rows .tot dd{color:var(--color-heading);font-family:var(--f-head);font-size:1.5rem}
.note{font-size:.85rem;color:var(--color-text-muted);margin-top:var(--space-3)}
.rows .disc dt,.rows .disc dd{color:var(--color-primary);font-weight:700} /* sconto promo */
.rows .disc[hidden]{display:none}
.offer{display:flex;gap:var(--space-2);background:var(--color-highlight);border-radius:var(--radius-sm);padding:var(--space-3);font-size:.92rem;margin-top:var(--space-3)}
.offer .ico{color:var(--sand-700);width:20px;height:20px;margin-top:2px}
.offer[hidden]{display:none}
.offer .apply{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-1);padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--color-primary);text-decoration:none;cursor:pointer}
.offer .apply:hover{color:var(--color-primary-hover)}
/* animazione quando compare un'offerta (spenta da prefers-reduced-motion) */
.offer.pop{animation:offer-in 420ms var(--ease-out)}
.offer.pop .ico{animation:tag-wiggle 700ms var(--ease-out) 120ms}
@keyframes offer-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tag-wiggle{0%,100%{transform:none}25%{transform:rotate(-16deg) scale(1.15)}55%{transform:rotate(10deg) scale(1.1)}80%{transform:rotate(-4deg)}}

.steps{list-style:none;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:var(--space-3)}
.steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:var(--space-3);font-size:.95rem}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--sea-100);color:var(--color-primary);font-weight:700;display:flex;align-items:center;justify-content:center}
.steps b{display:block;color:var(--color-heading)}
.contacts{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-3)}
.contacts a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;text-decoration:none;font-weight:600;color:var(--color-primary)}
.contacts a:hover{text-decoration:none}
.contacts .ico{width:20px;height:20px}

@media (max-width:1024px){
  .layout{grid-template-columns:1fr}
  .summary{position:static;order:-1}
  .summary .help{display:none}
}
@media (max-width:600px){
  body{font-size:16px}
  .grid,.villas{grid-template-columns:1fr}
  .villa input:checked + label::after{top:50%;transform:translateY(-50%)}
  .actions .btn{width:100%}
  .summary .card img,.summary .note{display:none} /* riepilogo compatto sopra il modulo */
}

/* 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}
}
