/* Vipa Yachts · design del kit design-vipa-yachts, rifinito (step 5), vivo (5-bis), col copy (step 6) */

/* ---------- Font del kit (Lora + Inter, OFL), serviti dal sito ---------- */
@font-face{font-family:"Lora";src:url("../fonts/lora-var.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/lora-italic-var.woff2") format("woff2");font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* ---------- Colori misurati sul design (confronta-design.py --colori + campioni) ---------- */
:root{
  --navy:#0A2F59;          /* pulsanti */
  --ink:#0B2550;           /* titoli e testi forti */
  --body:#3F5370;          /* testo */
  --muted:#6F7E97;         /* testi secondari */
  --accent:#67B8C6;        /* accento dei titoli */
  --aqua:#C1E6EB;          /* chip attivo */
  --ice:#E5F6F8;           /* fondo ghiaccio */
  --line:#DCE5EB;          /* linee e separatori */
  --white:#FFFFFF;
  --teal:#276F7A;          /* anello del focus */
  --navy-hover:#163F6E;

  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --container:1280px;
  --gutter:clamp(20px,4vw,48px);
  --radius:14px;
  --header-h:124px;
  --header-c:78px;
  --hero-r:28px 0 0 28px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-c) + 16px);interpolate-size:allow-keywords}
body{margin:0;padding-top:var(--header-h);background:var(--white);color:var(--body);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,figure,ul,ol{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
p{text-wrap:pretty}
button,input{font:inherit}
a,button,input,label,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--white);color:var(--ink);padding:12px 18px;border-radius:6px;font-weight:600;box-shadow:0 8px 24px rgba(11,37,80,.18);transition:top .2s}
.skip:focus{top:12px}

/* ---------- Pulsanti e link ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 26px;border:1.5px solid var(--navy);border-radius:6px;background:var(--navy);color:var(--white);font:600 15px/1.2 var(--sans);letter-spacing:.005em;text-decoration:none;text-align:center;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.btn .i{width:17px;height:17px;stroke-width:1.8;transition:transform .2s ease}
.btn{text-align:center;text-wrap:balance}   /* se un pulsante va a capo, mai una parola sola sotto */
.btn:hover{background:var(--navy-hover);border-color:var(--navy-hover);transform:translateY(-1px);box-shadow:0 10px 22px rgba(10,47,89,.18)}
.btn:hover .i{transform:translate(2px,-2px)}
.btn:active{transform:scale(.97);box-shadow:none;transition-duration:.08s}
.btn--lg{min-height:60px;padding:16px 34px;font-size:17px}
.btn--md{min-height:52px;padding:14px 30px;font-size:15.5px}
.btn--nav{min-height:50px;padding:12px 28px;font-size:15px}
.btn--outline{background:transparent;color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:var(--white)}
.btn--wide{min-height:54px;padding:14px 48px}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(11,37,80,.45);transition:text-decoration-color .2s,text-underline-offset .25s var(--ease)}
.text-link:hover{text-decoration-color:var(--ink);text-underline-offset:7px}
.eyebrow,.band-title{font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Header (fisso, si compatta scorrendo) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--white);transition:box-shadow .35s ease}
.site-header.is-compact{box-shadow:0 1px 0 rgba(220,229,235,.9),0 12px 30px rgba(11,37,80,.07)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h);padding-block:8px;transition:min-height .4s var(--ease)}
.is-compact .header-inner{min-height:var(--header-c)}
.brand{display:block;flex:none;line-height:0;border-radius:6px}
.brand img{height:106px;width:auto;transition:height .4s var(--ease)}
.is-compact .brand img{height:62px}
.menu-toggle{display:none}
.main-nav{display:flex;align-items:center;gap:clamp(20px,2.8vw,44px)}
.main-nav__list{display:flex;align-items:center;gap:clamp(20px,2.8vw,44px);list-style:none;padding:0}
.main-nav__list a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.main-nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.main-nav__list a:hover::after{transform:scaleX(1)}
/* Modifiche 3 · quattro voci nel menu: fra 1024 e 1279 px voci più strette, sempre su una riga */
@media (min-width:1024px) and (max-width:1279.98px){
  .header-inner{gap:16px}
  .main-nav,.main-nav__list{gap:clamp(14px,1.6vw,22px)}
  .main-nav__list a{font-size:14px}
  .btn--nav{min-height:46px;padding:10px 18px;font-size:14px}
}
.nav-fav{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:44px;min-height:44px;color:var(--ink);text-decoration:none}
.nav-fav .i{width:26px;height:26px;transition:transform .2s ease}
.nav-fav:hover .i{transform:scale(1.1)}
.nav-fav__label{display:none}
.fav-count{position:absolute;top:2px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--navy);color:var(--white);font:600 11px/18px var(--sans);text-align:center}
.fav-count[hidden]{display:none}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,480px) [split] minmax(0,800px) [content-end] minmax(var(--gutter),1fr) [full-end];align-items:center;padding-top:6px;overflow-x:clip}
.hero__copy{grid-column:content-start/split;padding:24px 44px 24px 0}
.hero h1{margin-top:16px;font-size:clamp(40px,3.5vw,50px);line-height:1.06}
.hero__line{white-space:nowrap}
.hero h1 em{display:block;font-style:normal;color:var(--accent)}
.hero__lead{max-width:420px;margin-top:22px;font-size:19px;line-height:1.5;color:var(--body)}
.hero__actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:30px}
.hero__actions--due .btn{width:min(100%,340px)}
.hero__lead+.hero__lead{margin-top:10px}
.hero__media{grid-column:split/full-end;position:relative}
.hero__photo{width:100%;height:clamp(440px,41vw,610px);object-fit:cover;object-position:62% 55%;border-radius:var(--hero-r)}
.hero__mini{position:absolute;left:-48px;bottom:18px;width:clamp(150px,14.4vw,210px);aspect-ratio:1.38;border:5px solid var(--white);border-radius:18px;overflow:hidden;box-shadow:0 16px 34px rgba(11,37,80,.2)}
.hero__mini img{width:100%;height:100%;object-fit:cover;object-position:40% 70%;transition:transform .6s var(--ease)}
.hero__mini:hover img{transform:scale(1.06)}

/* ---------- Fascia «in breve» (la fascia dei benefici del design) ---------- */
.benefits{padding-top:30px}
.benefits__inner{padding-bottom:32px;border-bottom:1px solid var(--line)}
.band-title{margin-bottom:18px}
.benefits__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0}
.benefits__list li{position:relative;display:flex;align-items:center;gap:20px;padding-inline:clamp(16px,3.4vw,52px)}
.benefits__list li:first-child{padding-left:0}
.benefits__list li+li::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:var(--line)}
.benefit__icon{width:46px;height:46px;color:var(--ink);stroke-width:1.25;transition:transform .5s var(--ease)}
.benefits__list li:hover .benefit__icon{transform:rotate(-8deg) scale(1.06)}
.benefit__title{font:600 16px/1.35 var(--sans);color:var(--ink);text-wrap:balance}
.benefit__num{font:500 26px/1 var(--serif);color:var(--accent);margin-right:2px}

/* ---------- Titoli di sezione ---------- */
.section-head{display:flex;align-items:center;gap:clamp(24px,5vw,72px)}
.section-head h2{font-size:clamp(32px,3.45vw,50px);flex:none}
.wave{flex:0 1 460px;min-width:0;height:46px;margin-top:-18px;opacity:.85;overflow:visible}
.section-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;max-width:980px;margin-top:20px;font-size:17px;line-height:1.55}
.section-intro--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:12px 40px}

/* ---------- Barche in vendita ---------- */
.catalog{padding-block:58px 44px}
.filters{display:flex;align-items:center;margin-top:28px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:10px 30px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 15px/1 var(--sans);white-space:nowrap;transition:background-color .25s ease,color .25s ease,transform .15s ease}
.chip[data-filter="all"]{min-width:150px;justify-content:center;font-weight:600}
.chip .i{width:40px;height:28px;stroke-width:1.15}
.chip:hover{background:rgba(193,230,235,.45)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--aqua);font-weight:600}
.chip+.chip:not(:nth-child(2))::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:1px;background:var(--line)}
.chip[aria-pressed="true"]::before,.chip[aria-pressed="true"]+.chip::before{opacity:0}

.yacht-grid{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:28px 24px;margin-top:26px}
.yacht-grid--3{--cols:3}

/* Card riusabile: 2 o 3 per riga da computer, 2 da telefono */
.yacht-card{container-type:inline-size;position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius);box-shadow:0 1px 2px rgba(11,37,80,.05),0 10px 30px rgba(11,37,80,.08);transition:transform .25s ease,box-shadow .25s ease}
.yacht-card[hidden]{display:none}
.yacht-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(11,37,80,.05),0 18px 40px rgba(11,37,80,.12)}
.yacht-card:active{transform:translateY(-1px) scale(.99);transition-duration:.12s}
.yacht-card__media{position:relative;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.yacht-card__photo{width:100%;aspect-ratio:2.2;object-fit:cover;transition:transform .6s ease}
.yacht-card:hover .yacht-card__photo{transform:scale(1.03)}
.yacht-card__alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease,transform .6s ease;pointer-events:none}
.yacht-card__alt.is-on{opacity:1}
.yacht-card:hover .yacht-card__alt{transform:scale(1.03)}
.fav{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--white);filter:drop-shadow(0 1px 3px rgba(6,31,75,.45));transition:transform .2s ease}
.fav .i{width:30px;height:30px;stroke-width:1.6;transition:fill .2s ease}
.fav:hover{transform:scale(1.08)}
.fav[aria-pressed="true"] .i{fill:var(--white)}
.badges{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;gap:6px;pointer-events:none}
.badge{display:inline-flex;align-items:center;padding:9px 16px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--ink);font:600 13.5px/1 var(--sans);white-space:nowrap}
.badge--esempio{background:var(--ice)}
.badge--nuova{background:var(--navy);color:var(--white)}
.badge--venduta{background:var(--ink);color:var(--white)}
.yacht-card__body{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"thumbs text type" "thumbs price cta";gap:6px 26px;padding:16px 22px 16px 16px}
.yacht-card__thumbs{grid-area:thumbs;display:flex;gap:10px}
.yacht-card__thumbs [data-full]{position:relative;z-index:2;display:block;border-radius:7px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s ease}
.yacht-card__thumbs [data-full]:hover{transform:translateY(-2px)}
.yacht-card__thumbs [data-full].is-active{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--accent)}
.yacht-card__thumbs img{width:86px;height:104px;object-fit:cover;border-radius:7px}
.yacht-card__text{grid-area:text;align-self:center;min-width:0}
.yacht-card__title{font:600 20px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.yacht-card__title a{color:inherit;text-decoration:none}
.yacht-card__title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius)}
.yacht-card__title a:focus-visible{outline:0}
.yacht-card:has(.yacht-card__title a:focus-visible){outline:3px solid var(--teal);outline-offset:3px}
.yacht-card__meta{margin-top:3px;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.yacht-card__price{grid-area:price;align-self:end;font:600 17px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.yacht-card__type{grid-area:type;justify-self:end;align-self:start;width:36px;height:36px;margin-top:4px;color:var(--ink);stroke-width:1.15}
.yacht-card__cta{grid-area:cta;justify-self:end;align-self:end;display:inline-flex;align-items:center;gap:8px;font:600 15px/1.3 var(--sans);color:var(--ink);white-space:nowrap}
.yacht-card__cta .i{width:16px;height:16px;stroke-width:1.8;transition:transform .2s ease}
.yacht-card:hover .yacht-card__cta .i{transform:translate(2px,-2px)}
.yacht-card.is-sold .yacht-card__photo{filter:saturate(.75)}

@container (max-width:520px){
  .yacht-card__photo{aspect-ratio:16/10}
  .yacht-card__body{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"thumbs type" "text text" "price cta";gap:12px 16px;padding:14px 18px 18px}
  .yacht-card__thumbs img{width:72px;height:52px}
  .yacht-card__price{align-self:center}
  .yacht-card__cta{align-self:center}
}
@container (max-width:300px){
  .yacht-card__photo{aspect-ratio:4/3}
  .yacht-card__body{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "price" "cta";gap:4px;padding:10px 2px 0}
  .yacht-card__thumbs,.yacht-card__type{display:none}
  .yacht-card__text{align-self:start}
  .yacht-card__title{font-size:16px}
  .yacht-card__meta{margin-top:1px;font-size:13px}
  .yacht-card__price{font-size:min(14.5px,10.3cqi);white-space:nowrap}
  .yacht-card__cta{justify-self:start;margin-top:2px;font-size:14px;padding-block:4px}
  .badges{left:6px;right:6px;bottom:6px;gap:4px}
  .badge{padding:6px 10px;font-size:11px}
  .fav{top:2px;right:2px;width:44px;height:44px}
  .fav .i{width:26px;height:26px}
}

.catalog__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;margin-top:28px}
.caption{font-size:13px;color:var(--muted)}

/* ---------- Pillole con icona (dalla ricerca del design) ---------- */
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;padding:0;list-style:none}
.pills li{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 22px;border-radius:99px;background:var(--white);box-shadow:0 2px 10px rgba(11,37,80,.05);font-size:15px;line-height:1.3;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s ease}
.pills li:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,37,80,.08)}
.pills .i{width:22px;height:22px;color:var(--ink);stroke-width:1.4}

/* ---------- La ricerca su richiesta ---------- */
.search{background:var(--ice);padding-block:48px}
.search__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(560px,48%));gap:56px;align-items:center}
.search h2{font-size:clamp(32px,3.4vw,50px);line-height:1.08}
.search__text{margin-top:20px;font-size:17px;line-height:1.55;color:var(--body)}
.search__text--lead{margin-top:10px}
.search__copy .btn{margin-top:28px}
.search__photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.search__photos picture{display:block;overflow:hidden;border-radius:18px}
.search__photos img{width:100%;aspect-ratio:.84;object-fit:cover;transition:transform 1.2s var(--ease)}
.search__photos picture:hover img{transform:scale(1.04)}

/* ---------- Come funziona (forma della fascia dei benefici) ---------- */
.how{padding-block:64px 56px}
.steps{counter-reset:passo;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;padding:0 0 8px;list-style:none;border-bottom:1px solid var(--line)}
.steps li{counter-increment:passo;position:relative;padding:0 clamp(16px,2.6vw,40px) 28px}
.steps li:first-child{padding-left:0}
.steps li+li::before{content:"";position:absolute;left:0;top:6px;bottom:28px;width:1px;background:var(--line)}
.steps li::after{content:counter(passo,decimal-leading-zero);display:block;order:-1;font:500 44px/1 var(--serif);color:var(--accent);letter-spacing:-.02em}
.steps li{display:flex;flex-direction:column;gap:16px}
.steps p{font-size:16.5px;line-height:1.55;color:var(--ink);text-wrap:balance}
.steps a{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(11,37,80,.45)}
.steps a:hover{text-decoration-color:var(--ink)}

/* ---------- Permuta e vendita (blocco con la foto al tramonto) ---------- */
.sell{display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,640px) [mid] minmax(0,640px) [content-end] minmax(var(--gutter),1fr) [full-end];align-items:center;overflow-x:clip}
.sell__media{grid-column:full-start/mid;align-self:stretch;margin-right:44px;overflow:hidden}
.sell__media img{width:100%;height:100%;min-height:420px;object-fit:cover;object-position:50% 60%;transition:transform 1.2s var(--ease)}
.sell__media:hover img{transform:scale(1.04)}
.sell__copy{grid-column:mid/content-end;display:grid;gap:36px;padding-block:48px}
.sell__item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;align-items:start}
.sell__icon{width:38px;height:38px;margin-top:2px;color:var(--ink);stroke-width:1.25;transition:transform .5s var(--ease)}
.sell__item:hover .sell__icon{transform:rotate(-8deg) scale(1.06)}
.sell h2{font-size:clamp(26px,2.4vw,34px)}
.sell__item p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--body)}
.sell__item p+p{margin-top:6px}
.sell__item .text-link{margin-top:4px}
.sell__item .btn{margin-top:18px}

/* ---------- I dati della richiesta ---------- */
.ask{background:var(--ice);padding-block:52px}
.ask__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"title title" "list text";gap:24px 56px;align-items:center}
.ask h2{grid-area:title;font-size:clamp(28px,3vw,44px)}
.pills--grid{grid-area:list;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.ask__text{grid-area:text;font-size:17px;line-height:1.55}
.ask__text p+p{margin-top:10px;font-weight:600;color:var(--ink)}

/* ---------- Domande frequenti ---------- */
.faq{padding-block:64px 40px}
.faq__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:32px 64px;align-items:start}
.section-head--stack{flex-direction:column;align-items:flex-start;gap:6px}
.faq h2{font-size:clamp(30px,3vw,44px)}
.wave--faq{flex:none;width:min(100%,320px);height:40px;margin-top:0}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 4px 16px 0;font:600 17px/1.4 var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary span{text-wrap:balance}
.faq__item summary:hover{color:var(--navy-hover)}
.faq__icon{width:22px;height:22px;stroke-width:1.6;transition:transform .35s var(--ease)}
.faq__item[open] .faq__icon{transform:rotate(180deg)}
.faq__answer p{max-width:62ch;padding:0 0 20px;font-size:16px;line-height:1.6;color:var(--body)}
.faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.faq__item[open]::details-content{block-size:auto}

/* ---------- CTA finale ---------- */
.cta{padding-block:44px 52px;text-align:center}
.cta__inner{position:relative}
.cta h2{font-size:clamp(28px,3vw,44px);line-height:1.1}
.cta__wave{display:block;width:clamp(200px,24vw,340px);height:34px;margin:6px auto 0;opacity:.85;overflow:visible}
.cta__text{max-width:660px;margin:10px auto 0;font-size:17px}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-top:30px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.footer__grid{display:grid;grid-template-columns:auto minmax(200px,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:start;gap:36px}
.footer__brand{display:block;line-height:0;border-radius:6px}
.footer__brand img{height:92px;width:auto}
.footer__title{margin-bottom:4px;font-weight:600;color:var(--ink);font-size:14px}
.footer__nav{padding-left:36px;border-left:1px solid var(--line)}
.footer__nav ul,.footer__legal{list-style:none;padding:0}
.footer__nav a,.footer__legal a,.footer__wa{display:inline-flex;align-items:center;min-height:28px;color:var(--muted);text-decoration:none;transition:color .2s}
.footer__wa{color:var(--ink);font-weight:600}
.footer__contact p{margin-top:4px}
.footer__nav a:hover,.footer__legal a:hover,.footer__wa:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.footer__legal{padding-left:36px;border-left:1px solid var(--line)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:26px;padding-block:16px 22px;border-top:1px solid var(--line);font-size:12.5px}
.credit a{color:var(--ink);font-weight:600;text-decoration:none}
.credit a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Banner cookie (una riga) ---------- */
.cookie-bar{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 16px;background:var(--white);border-top:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--body);box-shadow:0 -6px 20px rgba(11,37,80,.06)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{white-space:nowrap}
.cookie-bar a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cookie-bar__ok{flex:none;min-width:44px;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);font:600 13px/1 var(--sans)}
.cookie-bar__ok:hover{border-color:var(--ink)}

/* ---------- Pagine semplici (privacy, 404) ---------- */
.page__section{padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,112px);border-top:1px solid var(--line)}
.page__inner{max-width:760px}
.page h1{font-size:clamp(34px,4.4vw,56px)}
@media (max-width:399.98px){.page h1{font-size:clamp(28px,9vw,34px)}}   /* «Pagina non trovata» su una riga anche a 320 px */
.page h2{margin-top:36px;font-size:clamp(22px,2.4vw,30px)}
.page p{margin-top:14px;font-size:17px;line-height:1.6}
.page__lead{font-size:18px}
.page__inner--legal p{font-size:16px}
.page__inner--legal a{color:var(--ink);text-underline-offset:3px}
.page__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:30px}

/* ---------- 5-bis · il sito vivo ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes unveil{from{clip-path:inset(0 0 0 14% round var(--hero-r));transform:scale(1.05)}to{clip-path:inset(0 0 0 0 round var(--hero-r));transform:none}}
@keyframes pop-in{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes heart{0%{transform:scale(1)}35%{transform:scale(1.32)}65%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes card-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bar-up{from{transform:translateY(105%)}to{transform:none}}

/* la prima schermata che entra */
.hero__copy>*{animation:rise .85s var(--ease) both}
.hero__copy>:nth-child(2){animation-delay:.08s}
.hero__copy>:nth-child(3){animation-delay:.18s}
.hero__copy>:nth-child(4){animation-delay:.28s}
.hero__photo{animation:unveil 1.25s var(--ease) both}
.hero__mini{animation:pop-in .9s var(--ease) .55s both}

/* le sezioni che arrivano allo scroll */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
.js [data-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
.js [data-reveal="zoom"]{transform:scale(.96)}
.js [data-reveal].is-visible{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* risposte al dito: cuore, filtro */
.yacht-card.is-entering{animation:card-in .5s var(--ease) both;animation-delay:calc(var(--d,0)*60ms)}
.fav.is-pop .i{animation:heart .45s var(--ease)}
.cookie-bar:not([hidden]){animation:bar-up .6s var(--ease) .9s both}

/* ---------- Fino a 1100 px ---------- */
@media (max-width:1100px){
  .footer__grid{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:24px 36px}
  .footer__brand{grid-row:span 2}
  .footer__about{grid-column:2/-1}
  .footer__nav,.footer__legal{padding-left:0;border-left:0}
  .footer__legal{grid-column:2/-1}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .steps li:nth-child(3){padding-left:0}
  .steps li:nth-child(3)::before{display:none}
}

/* ---------- Menu a tendina sotto i 1024 px ---------- */
@media (max-width:1023.98px){
  :root{--header-h:96px;--header-c:70px}
  .brand img{height:80px}
  .is-compact .brand img{height:54px}
  .menu-toggle{position:relative;display:grid;place-items:center;width:48px;height:48px;margin-right:-8px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink)}
  .menu-toggle .i{position:absolute;width:32px;height:32px;stroke-width:1.6;transition:opacity .25s ease,transform .35s var(--ease)}
  .menu-toggle .i-chiudi{opacity:0;transform:rotate(-90deg) scale(.6)}
  .menu-toggle[aria-expanded="true"] .i-menu{opacity:0;transform:rotate(90deg) scale(.6)}
  .menu-toggle[aria-expanded="true"] .i-chiudi{opacity:1;transform:none}
  .main-nav{flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gutter) 22px;background:var(--white)}
  .js .main-nav{position:absolute;top:100%;left:0;right:0;border-top:1px solid var(--line);box-shadow:0 22px 34px rgba(11,37,80,.12);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .35s var(--ease),visibility 0s linear .35s}
  .js .main-nav.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .35s var(--ease),visibility 0s}
  .js .main-nav.is-open .main-nav__list li,.js .main-nav.is-open>a{animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0)*45ms + 60ms)}
  .main-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .main-nav__list a{display:flex;min-height:54px;font-size:18px;border-bottom:1px solid var(--line)}
  .main-nav__list a::after{display:none}
  .nav-fav{justify-content:flex-start;min-height:54px;font-size:18px;font-weight:500;border-bottom:1px solid var(--line)}
  .nav-fav__label{display:inline}
  .fav-count{position:static}
  .main-nav .btn{margin-top:18px}
}

/* ---------- Tablet ---------- */
@media (max-width:899.98px){
  .hero{display:block;padding-top:4px}
  .hero__copy{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto;padding:8px 0 0}
  .hero__media{margin:20px 12px 0}
  .hero__photo{height:auto;aspect-ratio:1.47}
  .hero__mini{left:12px;bottom:12px}
  .search__grid{grid-template-columns:1fr;gap:24px}
  .search__photos img{aspect-ratio:1.45}
  .search__photos picture{border-radius:12px}
  .yacht-grid--3{--cols:2}
  .faq__grid{grid-template-columns:1fr;gap:20px}
  .ask__grid{grid-template-columns:1fr;grid-template-areas:"title" "list" "text";gap:20px}
  .section-intro{grid-template-columns:1fr}
}

/* ---------- Telefono ---------- */
@media (max-width:759.98px){
  :root{--gutter:20px;--header-h:80px;--header-c:64px;--hero-r:18px}
  body{font-size:15px}
  .header-inner{padding-block:6px}
  .brand img{height:68px}
  .is-compact .brand img{height:52px}

  .hero__copy{padding-top:4px}
  .eyebrow,.band-title{font-size:12px;letter-spacing:.1em}
  .hero h1{margin-top:10px;font-size:clamp(27px,8.2vw,34px);line-height:1.08}
  .hero__line{white-space:normal}
  .br-desk{display:none}
  .hero__lead{margin-top:12px;font-size:15.5px;line-height:1.5}
  .hero__actions{margin-top:18px;gap:4px}
  .hero__actions--due{gap:10px}
  .hero__actions .btn{width:min(100%,320px)}
  .btn--lg{min-height:52px;padding:13px 24px;font-size:16px}
  .hero__media{margin:14px 12px 0}
  .hero__mini{left:10px;bottom:10px;width:31%;border-width:3px;border-radius:12px}

  .benefits{padding-top:22px}
  .benefits__inner{padding-bottom:20px}
  .band-title{margin-bottom:14px;text-align:center}
  .benefits__list li,.benefits__list li:first-child{flex-direction:column;justify-content:flex-start;gap:8px;padding-inline:6px;text-align:center}
  .benefit__icon{width:34px;height:34px}
  .benefits__list li,.benefits__list li:first-child{padding-inline:3px}
  .benefit__title{font-size:12.5px;line-height:1.3}
  .benefit__num{font-size:20px}

  .catalog{padding-block:30px 34px}
  .section-head{position:relative;display:block}
  .section-head h2{font-size:clamp(28px,8.4vw,34px)}
  .wave{display:block;width:170px;height:22px;margin:6px 0 0}
  .section-intro{margin-top:12px;gap:8px;font-size:15px}
  .filters{margin:18px calc(-1*var(--gutter)) 0;padding-inline:var(--gutter)}
  .chip{min-height:44px;padding:8px 16px;font-size:14px;gap:10px}
  .chip[data-filter="all"]{min-width:0;padding-inline:18px}
  .chip .i{width:32px;height:24px}
  .chip+.chip:not(:nth-child(2))::before{top:12px;bottom:12px}
  .yacht-grid{gap:24px 12px;margin-top:16px}
  .yacht-card{box-shadow:none;background:transparent;border-radius:0}
  .yacht-card:hover{transform:none;box-shadow:none}
  .yacht-card__media{border-radius:12px}
  .yacht-card__title a::after{border-radius:12px}
  .catalog__foot{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
  .caption{font-size:12px}
  .catalog__foot .btn{align-self:center;width:min(100%,320px);min-height:50px;padding:12px 20px}

  .pills{gap:8px;margin-top:14px}
  .pills li{min-height:46px;padding:8px 14px;gap:10px;font-size:14px;border-radius:10px}
  .pills .i{width:20px;height:20px}
  .search{padding-block:32px 28px}
  .search h2{font-size:clamp(26px,7.6vw,32px)}
  .search__text{margin-top:12px;font-size:15px}
  .search__copy .btn{width:100%;margin-top:18px}
  .search__grid{gap:18px}
  .search__photos{gap:10px}

  .how{padding-block:38px 30px}
  .how h2{font-size:clamp(28px,8.4vw,34px)}
  .steps{grid-template-columns:1fr;margin-top:18px;padding-bottom:0;border-bottom:0}
  .steps li,.steps li:first-child,.steps li:nth-child(3){flex-direction:row;align-items:flex-start;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
  .steps li:last-child{border-bottom:1px solid var(--line)}
  .steps li+li::before{display:none}
  .steps li::after{flex:none;width:44px;font-size:30px}
  .steps p{font-size:15px}

  .sell{display:block}
  .sell__media{margin:0}
  .sell__media img{min-height:0;height:auto;aspect-ratio:3/1}
  .sell__copy{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto;gap:26px;padding:22px 0 32px}
  .sell__item{grid-template-columns:32px minmax(0,1fr);gap:14px}
  .sell__icon{width:30px;height:30px}
  .sell h2{font-size:clamp(23px,6.6vw,27px)}
  .sell__item p{margin-top:8px;font-size:15px}
  .sell__item .btn{width:100%}

  .ask{padding-block:34px}
  .ask h2{font-size:clamp(25px,7vw,30px)}
  .pills--grid{grid-template-columns:1fr}
  .ask__text{font-size:15px}

  .faq{padding-block:38px 24px}
  .faq h2{font-size:clamp(28px,8.4vw,34px)}
  .wave--faq{position:static;width:200px;height:26px}
  .faq__item summary{min-height:58px;font-size:15.5px}
  .faq__answer p{font-size:15px}

  .cta{padding-block:34px 40px}
  .cta h2{font-size:clamp(26px,7.4vw,30px)}
  .cta__wave{width:200px;height:24px}
  .cta__text{font-size:15px}
  .cta__actions{flex-direction:column;align-items:stretch;max-width:320px;margin-inline:auto}

  .site-footer{padding-top:24px}
  .footer__grid{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px 20px}
  .footer__brand{grid-row:span 1}
  .footer__brand img{height:78px}
  .footer__about{grid-column:2;font-size:13px}
  .footer__nav,.footer__contact,.footer__legal{grid-column:1/-1}
  .footer__nav{padding-top:12px;border-top:1px solid var(--line)}
  .footer__nav a,.footer__legal a,.footer__wa{min-height:40px;font-size:14px}
  .footer__bottom{flex-direction:column;justify-content:center;gap:4px;margin-top:18px;padding-block:14px 18px;text-align:center;font-size:12px}

  .cookie-bar{gap:10px;padding:7px 12px;font-size:12.5px}
}

@media (max-width:559.98px){
  /* da telefono le tre frasi non stanno in tre colonne senza parole sole: una voce per riga, icona a sinistra */
  .benefits__list{grid-template-columns:1fr;row-gap:14px}
  .benefits__list li,.benefits__list li:first-child{flex-direction:row;justify-content:flex-start;gap:14px;padding-inline:0;text-align:left}
  .benefits__list li+li::before{display:none}
  .benefit__icon{flex:none;width:30px;height:30px}
  .benefit__title{font-size:14.5px;line-height:1.4}
  .benefits .band-title{text-align:left}
}
@media (min-width:760px) and (max-width:1099.98px){
  /* tablet: icona sopra e frase centrata, così le tre voci stanno su due righe ciascuna */
  .benefits__list li,.benefits__list li:first-child{flex-direction:column;justify-content:flex-start;gap:10px;text-align:center}
  .benefits__list li:first-child{padding-left:clamp(16px,3.4vw,52px)}
  .benefit__icon{width:38px;height:38px}
  .benefit__title{font-size:15px}
}
@media (max-width:359.98px){
  .btn{gap:8px;padding-inline:14px}
  .btn--lg{font-size:15px}
  .benefit__title{font-size:13.5px}
  .cookie-bar p{white-space:normal}
}


/* ═══════════ Modifiche 1 (09/10) · stesso schema e stesso ritmo su tutte le pagine ═══════════
   occhiello + titolo → contenuto del compito → modulo → domande → footer; bianco e ghiaccio alternati */
:root{--sec-y:clamp(56px,6vw,88px);--h2:clamp(30px,3.2vw,46px)}
main>section.sec{padding-block:var(--sec-y)}
main>section.sec--white{background:var(--white)}
main>section.sec--ice{background:var(--ice)}
main>section.sell.sec{padding-block:0}
main>section.sell.sec .sell__copy{padding-block:var(--sec-y)}
.sec-eyebrow{margin-bottom:12px}
.section-head h2,.search h2,.ask h2,.faq h2,.cta h2,.sell__copy--block h2{font-size:var(--h2)}
.sec--ice .faq__list,.sec--ice .faq__item,.sec--ice .steps{border-color:rgba(11,37,80,.13)}
.sec--ice .steps li+li::before{background:rgba(11,37,80,.13)}
.sec--white .pills li{box-shadow:0 0 0 1px var(--line),0 2px 10px rgba(11,37,80,.04)}
.sec--white .pills li:hover{box-shadow:0 0 0 1px var(--aqua),0 8px 18px rgba(11,37,80,.08)}
.benefits--breve .benefits__inner{padding-bottom:0;border-bottom:0}
@media (min-width:760px){
  .sec .steps{border-bottom:0;padding-bottom:0}
  .sec .steps li{padding-bottom:0}
  .sec .steps li+li::before{bottom:0}
}
@media (max-width:759.98px){.sec--ice .steps li{border-color:rgba(11,37,80,.13)}}
.sell__item h2{font-size:var(--h2)}
.sec--ice .specs,.sec--ice .spec{border-color:rgba(11,37,80,.13)}
/* la frase subito sotto l'apertura: stessa zona bianca, separata da una linea */
main>section.sec.sec--seguito{padding-top:0}
.sec--seguito>.container{padding-top:var(--sec-y);border-top:1px solid var(--line)}

/* «Vendere» della home: un blocco solo, col tramonto */
.sell__copy--block{display:block}
.sell__copy--block h2{margin-top:0}
.sell__text{max-width:52ch;margin-top:16px;font-size:17px;line-height:1.55;color:var(--body)}
.sell__copy--block .btn{margin-top:28px}

/* «Cosa vuoi fare»: tre porte, nella forma della fascia dei benefici */
.doors{padding-top:30px}
.doors__inner{padding-bottom:30px;border-bottom:1px solid var(--line)}
.doors__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.doors__list li{position:relative;display:flex}
.doors__list li+li::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--line)}
.door{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:16px;margin:0 8px;padding:16px 18px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background-color .25s ease,transform .2s ease}
.doors__list li:first-child .door{margin-left:-18px}
.doors__list li:last-child .door{margin-right:-18px}
.door:hover{background:var(--ice)}
.door:active{transform:scale(.985)}
.door__icon{width:42px;height:42px;color:var(--ink);stroke-width:1.25;transition:transform .5s var(--ease)}
.door:hover .door__icon{transform:rotate(-8deg) scale(1.06)}
.door__title{display:block;font:600 16.5px/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.door__line{display:block;margin-top:5px;font-size:14px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.door__arrow{width:18px;height:18px;margin-top:2px;stroke-width:1.8;transition:transform .2s ease}
.door:hover .door__arrow{transform:translate(3px,-3px)}
.doors .band-title{text-align:left}
.doors--pagina{padding-top:var(--sec-y,80px)}
.doors--pagina .doors__inner{padding-bottom:0;border-bottom:0}
.doors--pagina .section-head{margin-bottom:22px}
.doors--pagina .door:hover{background:var(--white)}


@media (max-width:899.98px){
  .door{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .door__arrow{display:none}
}
@media (max-width:759.98px){
  :root{--sec-y:46px;--h2:clamp(26px,7.6vw,32px)}
  .sell__text{font-size:15px}
  .sell__copy--block .btn{width:100%}
}

/* da telefono (Modifiche 3, 10/10): tre righe compatte con icona, nome e freccia, subito sotto la foto;
   la riga sotto il nome resta per i lettori di schermo (nella home) o si vede (pagina Contatti) */
@media (max-width:767.98px){
  .doors{padding-top:12px}
  .doors__inner{padding-bottom:10px}
  .doors .band-title{margin-bottom:2px;text-align:left}
  .doors--pagina .door{padding-block:12px}
  .doors__list{grid-template-columns:1fr}
  .doors__list li+li::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .door,.doors__list li:first-child .door,.doors__list li:last-child .door{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 -10px;padding:9px 10px}
  .door__icon{width:30px;height:30px}
  .door__title{font-size:16px}
  .door__arrow{display:block;width:16px;height:16px;margin:0}
  .doors:not(.doors--pagina) .door__line{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .doors--pagina .door{align-items:start}
  .doors--pagina .door__icon{margin-top:2px}
  .doors--pagina .door__arrow{margin-top:4px}
}


/* Modifiche 2 · da telefono i titoli di sezione sono un po' più piccoli e mai più grandi dell'H1 della pagina
   (l'H1 della home sta in 3 righe a circa 25 px: gli H2 restano sotto, 24-25 px a 390, 22-23 a 360) */
@media (max-width:759.98px){
  main h2:not(.band-title):not(.visually-hidden){font-size:clamp(20px,6.3vw,26px)}
}

/* ---------- Meno movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;clip-path:none}
  .hero__copy>*,.hero__photo,.hero__mini{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Modifiche 3 · voce 8 (11/10): da telefono, nella home, le tre porte stanno intere nella prima schermata
   (390×844, sopra il banner dei cookie): foto un po' più bassa e secondo pulsante leggero, come un link */
@media (max-width:759.98px){
  .hero:not(.pg-hero) .hero__photo{aspect-ratio:1.9;object-position:62% 60%}
  .hero:not(.pg-hero) .hero__media{margin-top:12px}
  .hero__actions--due{gap:2px}
  .hero__actions--due .btn--outline{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:15px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(11,37,80,.45);justify-content:flex-start;width:auto}
  .hero__actions--due .btn--outline:hover{background:none;color:var(--ink);box-shadow:none;transform:none;text-decoration-color:var(--ink)}
}

/* 2 Step (12/10/2026) · footer: i dati della società dalla visura */
.footer__company{max-width:78ch;line-height:1.55}
@media (max-width:899.98px){.footer__company{max-width:none}}

/* 2 Step (12/10/2026) · modelli su richiesta: card con una sola immagine, badge «Su richiesta», griglia per cantiere */
.badge--richiesta{background:var(--navy);color:var(--white)}
@container (min-width:301px){.yacht-card__body--solo{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text type" "price cta"}}
.modelli__intro{max-width:62ch;margin-top:18px;font-size:17px;line-height:1.55;color:var(--body)}
.modelli__gruppo{margin-top:clamp(34px,4vw,52px)}
.modelli__gruppo .yacht-grid{margin-top:16px}
.modelli__cantiere{padding-bottom:10px;border-bottom:1px solid var(--line);font:500 clamp(24px,2.2vw,30px)/1.15 var(--serif);color:var(--ink)}
.modelli__caption{margin-top:28px}
@media (max-width:899.98px){
  .modelli__intro{font-size:15.5px;margin-top:12px}
  .modelli__cantiere{font-size:22px}
}

/* 2 Step, secondo giro: nelle card strette (2 per riga da telefono) il pulsante va a capo e resta dentro la card */
@container (max-width:300px){.yacht-card__cta{white-space:normal;max-width:100%}}
.modelli__chips{margin-top:22px}
.footer__company .nw{white-space:nowrap}