/* Vipa Yachts · pagine interne (step 6-bis) — solo quello che serve in più a style.css.
   Le sezioni usano i pezzi della home: .hero, .cta (fascia con l'onda), .search (ghiaccio + pillole + foto),
   .how/.steps, .sell/.sell__item, .ask + .pills, .faq/.faq__item, .btn, .text-link, .eyebrow, data-reveal.
   Classi nuove con prefisso pg-, colori dai token di :root di style.css. */

:root{
  --pg-errore:#A8322D;     /* stato d'errore dei moduli (testo e bordo, contrasto 6,4:1 sul bianco) */
  --pg-bordo:#8491A7;      /* bordo dei campi: --muted schiarito, contrasto 3,2:1 sul bianco */
}

/* ---------- Link dentro il testo ---------- */
.pg p a:not([class]){color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(11,37,80,.45);transition:text-decoration-color .2s,text-underline-offset .25s var(--ease)}
.pg p a:not([class]):hover{text-decoration-color:var(--ink);text-underline-offset:6px}

/* ---------- Apertura: la .hero della home, in versione pagina ---------- */
.pg-hero{grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,540px) [split] minmax(0,740px) [content-end] minmax(var(--gutter),1fr) [full-end]}
.pg-hero h1{font-size:clamp(38px,3.7vw,54px);line-height:1.06}
.pg-hero h1{text-wrap:wrap}
.pg-hero h1 em{display:block;text-wrap:balance}   /* il pezzo colorato su una riga sua: mai «in / Italia», «per / la» */
/* titolo lungo («Consulenza e brokeraggio per la compravendita di barche»): colonna più larga, al massimo 3 righe */
.pg-hero--lungo{grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,640px) [split] minmax(0,640px) [content-end] minmax(var(--gutter),1fr) [full-end]}
.pg-hero--lungo h1{font-size:clamp(32px,3.25vw,46px)}
.pg-hero .hero__lead{max-width:440px}
@media (min-width:900px){
  .pg-hero .hero__photo{height:clamp(400px,36vw,540px)}
}
.pg-hero+.sell{margin-top:clamp(36px,6vw,88px)}

/* ---------- Frase che distingue: la fascia .cta della home, solo testo, con più aria ---------- */
.pg-statement{padding-block:clamp(56px,7vw,104px)}
.pg-statement h2{font-size:clamp(30px,3.2vw,46px)}
.pg-statement .cta__text{max-width:600px}
.pg-statement .pg-statement__lead{max-width:640px;margin-top:18px;font:400 clamp(19px,1.6vw,22px)/1.5 var(--serif);color:var(--ink)}

/* ---------- Sezioni bianche di testo ---------- */
.pg-section{padding-block:clamp(56px,6.4vw,96px)}
.pg-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.pg-split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-split--center{align-items:center}
.pg-split>*{min-width:0}
.pg-split>.pills--grid{grid-area:auto;margin-top:0}
.pg-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pg-icon{width:44px;height:44px;color:var(--ink);stroke-width:1.25;transition:transform .5s var(--ease)}
.pg-head:hover .pg-icon{transform:rotate(-8deg) scale(1.06)}
.pg-title{font-size:clamp(30px,3.2vw,46px);line-height:1.08}
.pg-text{max-width:58ch;font-size:17px;line-height:1.6;color:var(--body)}
.pg-text+.pg-text{margin-top:14px}
.pg-fact{margin-top:24px;padding-left:20px;border-left:2px solid var(--accent);font:400 clamp(20px,1.85vw,26px)/1.38 var(--serif);color:var(--ink)}
.pg-big{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(18px,2.4vw,32px);margin-top:26px}
.pg-big__num{font:500 clamp(104px,11vw,156px)/.8 var(--serif);letter-spacing:-.04em;color:var(--accent)}
.pg-big .pg-text{max-width:34ch;font-size:18px}
.pg-photo{display:block;overflow:hidden;border-radius:18px}
.pg-photo img{width:100%;aspect-ratio:1.45;object-fit:cover;transition:transform 1.2s var(--ease)}
.pg-photo:hover img{transform:scale(1.04)}

/* ---------- Pillole (.pills della home) nella sezione ghiaccio ---------- */
.search .pills.pg-pills{margin-top:24px}
.search__text.pg-strong{margin-top:22px;font-weight:600;color:var(--ink)}
.ask .pg-ask-text{max-width:40ch;margin-top:16px}

/* ---------- Passaggi numerati (.steps della home): 5 in fila, o con l'icona ---------- */
@media (min-width:1260px){
  /* 5 in fila solo quando ogni colonna tiene «l’imbarcazione individuata.» su una riga (niente parole sole) */
  .steps.pg-steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pg-steps--5 li{padding-inline:14px}
  .pg-steps--5 li:first-child{padding-left:0}
  .pg-steps--5 li:last-child{padding-right:0}
  .pg-steps--5 p{font-size:16px}
}
.pg-step__icon{position:absolute;top:4px;right:clamp(16px,2.6vw,40px);width:36px;height:36px;color:var(--ink);stroke-width:1.25;transition:transform .5s var(--ease)}
.steps li:last-child .pg-step__icon{right:0}
.steps li:hover .pg-step__icon{transform:rotate(-8deg) scale(1.06)}

/* ---------- Domande frequenti: link nelle risposte ---------- */
.faq__answer a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(11,37,80,.45)}
.faq__answer a:hover{text-decoration-color:var(--ink)}

/* ---------- Modulo (fascia ghiaccio, scheda bianca) ---------- */
.pg-form-section{background:var(--ice);padding-block:clamp(56px,6.6vw,100px)}
.pg-form-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(32px,5.4vw,80px);align-items:start}
.pg-form-intro{position:sticky;top:calc(var(--header-c) + 28px)}
.pg-form-intro .pg-text{margin-top:18px}
.pg-why{margin-top:30px;padding-top:22px;border-top:1px solid rgba(11,37,80,.12)}
.pg-why h3{font:600 15px/1.4 var(--sans);letter-spacing:0;color:var(--ink)}
.pg-why p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--body)}
.pg-form-card{min-width:0;padding:clamp(24px,3.4vw,46px);border-radius:var(--radius);background:var(--white);box-shadow:0 1px 2px rgba(11,37,80,.05),0 10px 30px rgba(11,37,80,.08)}

.pg-form-card__head{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.pg-form-card__head .pg-title{font-size:clamp(26px,2.4vw,34px)}
.pg-form-card__head .pg-text{margin-top:10px}

.pg-form[hidden],.pg-done[hidden],.pg-field[hidden],.pg-summary[hidden],.pg-error[hidden]{display:none}
.pg-summary{display:flex;align-items:flex-start;gap:12px;margin-bottom:28px;padding:14px 18px;border-left:3px solid var(--pg-errore);border-radius:8px;background:color-mix(in srgb,var(--pg-errore) 7%,var(--white));color:var(--ink);font-weight:500;font-size:15px;line-height:1.45}
.pg-summary .i{width:22px;height:22px;color:var(--pg-errore);stroke-width:1.7}

.pg-group{min-width:0;margin:0;padding:0;border:0}
.pg-group+.pg-group,.pg-block+.pg-group,.pg-group+.pg-block,.pg-block+.pg-block{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.pg-legend{float:left;width:100%;padding:0;font:500 clamp(22px,1.9vw,26px)/1.2 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.pg-legend+*{clear:both}
.pg-group__note{padding-top:8px;font-size:14.5px;line-height:1.5;color:var(--body)}
.pg-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;padding-top:20px}
.pg-fields--top{padding-top:0}
.pg-field{min-width:0;margin:0;padding:0;border:0}
.pg-field--full{grid-column:1/-1}
.pg-label{display:block;float:none;width:100%;margin-bottom:8px;padding:0;font:500 14.5px/1.4 var(--sans);color:var(--ink)}
.pg-req{color:var(--teal);font-weight:600}
.pg-hint{margin-top:-2px;margin-bottom:8px;font-size:13.5px;line-height:1.45;color:var(--muted)}

.pg-input{display:block;width:100%;min-height:52px;padding:13px 16px;border:1px solid var(--pg-bordo);border-radius:8px;background:var(--white);color:var(--ink);font:400 16px/1.35 var(--sans);transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.pg-input::placeholder{color:var(--muted);opacity:1}
.pg-input{text-overflow:ellipsis}
@media (max-width:399.98px){.pg-input::placeholder{font-size:14px}}
.pg-input:hover{border-color:var(--ink)}
.pg-input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(103,184,198,.35)}
textarea.pg-input{min-height:112px;resize:vertical}
.pg-input[aria-invalid="true"]{border-color:var(--pg-errore);box-shadow:0 0 0 1px var(--pg-errore)}
.pg-input[aria-invalid="true"]:focus{box-shadow:0 0 0 1px var(--pg-errore),0 0 0 4px color-mix(in srgb,var(--pg-errore) 18%,transparent)}

/* le scelte: i chip dei filtri della home */
.pg-choices{display:flex;flex-wrap:wrap;gap:10px}
.pg-choices--top{padding-top:16px}
.pg-choice{position:relative;display:inline-flex;cursor:pointer}
.pg-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pg-choice span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 24px;border:1px solid var(--pg-bordo);border-radius:8px;background:var(--white);color:var(--ink);font:500 15px/1 var(--sans);transition:background-color .2s ease,border-color .2s ease,transform .15s ease}
.pg-choice span::before{content:"";width:16px;height:16px;flex:none;border:1.5px solid var(--ink);border-radius:50%;background:var(--white);transition:box-shadow .2s ease,background-color .2s ease}
.pg-choice:hover span{border-color:var(--ink);background:rgba(193,230,235,.35)}
.pg-choice:active span{transform:scale(.97)}
.pg-choice input:checked+span{border-color:var(--aqua);background:var(--aqua);font-weight:600}
.pg-choice input:checked+span::before{box-shadow:inset 0 0 0 3px var(--white);background:var(--navy);border-color:var(--navy)}
.pg-choice input:focus-visible+span{outline:3px solid var(--teal);outline-offset:3px}
.pg-field[data-invalid] .pg-choice span{border-color:var(--pg-errore)}

.pg-check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--body)}
.pg-check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--navy);cursor:pointer}
.pg-check a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.pg-field[data-invalid] .pg-check input{outline:2px solid var(--pg-errore);outline-offset:2px}

.pg-error{display:flex;align-items:flex-start;gap:7px;margin-top:8px;font:500 13.5px/1.4 var(--sans);color:var(--pg-errore)}
.pg-error .i{width:16px;height:16px;margin-top:1px;stroke-width:1.9}
.pg-field[data-invalid] .pg-error{animation:pg-in .3s var(--ease) both}

.pg-photo-note{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:10px;background:var(--ice)}
.pg-photo-note .i{width:26px;height:26px;color:var(--ink);stroke-width:1.4}
.pg-photo-note .pg-label{margin-bottom:2px}
.pg-photo-note p:last-child{font-size:14.5px;line-height:1.5;color:var(--body)}

.pg-send{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.pg-wa-note{display:flex;align-items:flex-start;gap:8px;margin-top:22px;font-size:13px;line-height:1.45;color:var(--muted)}
.pg-wa-note .i{width:16px;height:16px;margin-top:1px;stroke-width:1.7}
.pg-send .btn{margin-top:14px}

/* Richiesta pronta */
.pg-done{outline:0;animation:pg-in .5s var(--ease) both}
.pg-done__icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--aqua);color:var(--navy);animation:pop-in .6s var(--ease) .1s both}
.pg-done__icon .i{width:28px;height:28px;stroke-width:1.8}
.pg-done h3{margin-top:20px;font-size:clamp(28px,2.6vw,36px)}
.pg-done p{margin-top:14px;max-width:52ch;font-size:16.5px;line-height:1.55;color:var(--body)}
.pg-done .pg-done__ask{margin-top:26px;font-weight:600;color:var(--ink)}
.pg-done__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px}
@keyframes pg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Fino a 1260 px: 5 passaggi su 3 colonne ---------- */
@media (min-width:760px) and (max-width:1259.98px){
  .steps.pg-steps--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-steps--5 li:nth-child(3){padding-left:clamp(16px,2.6vw,40px)}
  .pg-steps--5 li:nth-child(3)::before{display:block}
  .pg-steps--5 li:nth-child(4){padding-left:0}
  .pg-steps--5 li:nth-child(4)::before{display:none}
  .pg-steps--icone li:nth-child(2) .pg-step__icon{right:0}
}

/* ---------- Tablet ---------- */
@media (max-width:899.98px){
  .pg-split,.pg-split--even{grid-template-columns:1fr;gap:28px}
  .pg-form-grid{grid-template-columns:1fr;gap:26px}
  .pg-form-intro{position:static}
}

/* ---------- Telefono ---------- */
@media (max-width:759.98px){
  .pg-hero h1{font-size:clamp(30px,8.4vw,36px);line-height:1.08}
  .pg-hero--lungo h1{font-size:clamp(21px,6.9vw,30px)}

  .pg-statement{padding-block:40px 42px}
  .pg-statement h2{font-size:clamp(26px,7.4vw,30px)}
  .pg-statement .pg-statement__lead{margin-top:12px;font-size:17px}

  .pg-section{padding-block:40px}
  .pg-title{font-size:clamp(26px,7.6vw,32px)}
  .pg-text{font-size:15.5px;line-height:1.55}
  .pg-icon{width:34px;height:34px}
  .pg-head{gap:10px}
  .pg-fact{margin-top:18px;padding-left:16px;font-size:19px}
  .pg-big{margin-top:18px;gap:16px}
  .pg-big__num{font-size:96px}
  .pg-big .pg-text{font-size:15.5px}
  .pg-photo{border-radius:12px}

  .search .pills.pg-pills{margin-top:16px}
  .pg-pills .pg-pills__wide{grid-column:1/-1}
  .search__text.pg-strong{margin-top:16px}
  .ask .pg-ask-text{margin-top:10px}

  .pg-step__icon,.steps li:last-child .pg-step__icon{top:16px;right:0;width:30px;height:30px}
  .pg-steps--icone p{padding-right:42px}

  .pg-form-section{padding-block:36px 40px}
  .pg-form-intro .pg-text{margin-top:12px}
  .pg-why{margin-top:20px;padding-top:16px}
  .pg-why p{font-size:14px}
  .pg-form-card{margin-inline:-6px;padding:22px 18px 24px;border-radius:12px}
  .pg-form-card__head{margin-bottom:22px;padding-bottom:18px}
  .pg-form-card__head .pg-title{font-size:clamp(24px,7vw,28px)}
  .pg-fields{grid-template-columns:1fr;gap:18px;padding-top:16px}
  .pg-fields--top{padding-top:0}
  .pg-group+.pg-group,.pg-block+.pg-group,.pg-group+.pg-block,.pg-block+.pg-block{margin-top:26px;padding-top:22px}
  .pg-legend{font-size:22px}
  .pg-group__note{font-size:14px}
  .pg-choice span{padding:10px 18px;font-size:14.5px}
  .pg-check{font-size:13.5px;line-height:1.45}
  .pg-send .btn{width:100%}
  .pg-done h3{font-size:28px}
  .pg-done p{font-size:15px}
  .pg-done__actions .btn{width:100%}
  .pg-done__actions .text-link{margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  .pg-done,.pg-done__icon,.pg-field[data-invalid] .pg-error{animation:none}
}

/* Modifiche 2 · titoli dei moduli: stessa misura su tutte le pagine, «Descrivi il tuo yacht» su una riga */
.pg-form-intro .pg-title{font-size:clamp(26px,2.4vw,34px);text-wrap:balance}
@media (max-width:759.98px){
  /* «Il tuo yacht in permuta»: il «2» sopra il testo, così il testo resta entro tre righe */
  .pg-big{grid-template-columns:1fr;gap:6px}
  .pg-big__num{font-size:72px}
}

/* ═══════════ Modifiche 3 (10/10 sera) · pagina Contatti ═══════════ */
.pg-tel{margin:0 0 14px;font:500 clamp(30px,3.4vw,46px)/1.1 var(--serif);letter-spacing:-.01em}
.pg-tel a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:8px;text-decoration-color:var(--accent);transition:text-decoration-color .2s ease,text-underline-offset .2s ease}
.pg-tel a:hover{text-decoration-color:var(--ink);text-underline-offset:10px}
.pg-text--permuta{margin-top:16px}
.pg--contatti .pg-hero h1{white-space:nowrap;font-size:clamp(38px,3.5vw,50px)}
@media (max-width:899.98px){.pg--contatti .pg-hero h1{font-size:clamp(28px,8vw,36px)}}
.cta__text a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(11,37,80,.45)}

/* 2 Step (12/10/2026) · contatti: il nome di chi segue le trattative, «Chiama» accanto a WhatsApp, «Dove siamo» */
.pg-person{margin:-4px 0 14px;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.pg-tel-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.pg-tel-actions .btn .i{width:18px;height:18px;margin-right:8px}
.pg-dove{padding-top:0}
.pg-address{margin:0 0 14px;font:500 clamp(20px,2vw,26px)/1.35 var(--serif);color:var(--ink)}
@media (max-width: 899.98px){
  .pg-person{font-size:14px;margin-bottom:12px}
  .pg-tel-actions{gap:10px;margin-top:18px}
  .pg-tel-actions .btn{flex:1 1 140px;justify-content:center}
  .pg-address{font-size:19px}
}
@media (max-width: 899.98px){.pg-address{font-size:17px}}