/* pagina iniziale: apertura, coppie di carte, griglia 2x2, prezzi, chiamata */

.apertura{padding-bottom:0}
.apertura h1{font-size:40px;line-height:44px;letter-spacing:-1.4px;text-align:center;margin:40px 0 12px}
.apertura__sub{
  max-width:640px;
  margin:0 auto 57px;              /* 57: rimasto da una prova, sta bene cosi */
  font-size:18px;
  line-height:26px;
  text-align:center;
  color:var(--colors-gray-9a);
}

.coppia{display:flex;flex-direction:column;align-items:center;gap:var(--gap-gap10)}

/* carte di apertura, con la foto che esce dal bordo basso */
.offerta{
  --transition-duration: .25s;
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:var(--card-max);
  height:480px;
  border-radius:24px;
  overflow:hidden;
}
.offerta--mare{background-image:linear-gradient(var(--colors-blue-6),var(--colors-blue-1))}
.offerta--inverno{background-image:linear-gradient(var(--colors-purple-3),var(--colors-purple-1))}
.offerta__testa{display:flex;flex-direction:column;align-items:center;padding:32px 32px 0;text-align:center}
.offerta__icona{width:36px;height:36px;margin-bottom:14px;transition-duration:.15s;transition-duration:var(--transition-duration);transition-property:transform}
.offerta__icona svg{width:100%;height:100%;fill:none;stroke:var(--colors-gray-13);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.offerta:hover .offerta__icona{transform:rotate(-1turn)}
.offerta__titolo{font-size:30px;font-weight:600;letter-spacing:-.5px;line-height:34px}
.offerta__desc{margin-top:10px;font-size:17px;line-height:24px;letter-spacing:-.2px;color:var(--colors-gray-9a)}
.offerta__btn{width:204px;margin-top:20px}
.offerta__foto{
  position:absolute;
  left:0;right:0;bottom:-30px;
  transition-duration:.15s;
  transition-duration:var(--transition-duration);
  transition-property:transform;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.offerta:hover .offerta__foto{transform:translateY(-22px)}
.offerta__foto img{width:82%;height:210px;margin:0 auto;object-fit:cover;border-radius:18px 18px 0 0;box-shadow:0 18px 40px #06061436}

/* intestazioni di sezione */
.blocco{padding-bottom:100px}
.blocco--stretto{padding-top:16px}
.blocco__testa{display:flex;flex-direction:column;align-items:center;margin-bottom:40px}
.blocco__titolo{font-size:38px;font-weight:600;line-height:42px;letter-spacing:-.5px;text-align:center}
.blocco__titolo .nero{font-weight:800}
.blocco__sub{margin:12px 0 0;font-size:17px;line-height:24px;text-align:center;color:var(--colors-gray-9a)}

/* carte con foto a tutto campo */
.scheda-foto{
  position:relative;
  width:100%;
  max-width:var(--card-max);
  height:520px;
  border-radius:24px;
  overflow:hidden;
}
.scheda-foto__testa{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:40px 32px;text-align:center}
.scheda-foto__titolo{font-size:26px;font-weight:600;letter-spacing:-.3px;color:var(--colors-base-white)}
.scheda-foto__desc{margin:10px 0 0;font-size:16px;line-height:23px;color:#ffffffa1}
.scheda-foto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.scheda-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(#06061487,#06061421 62%,#0606145e)}
.scheda-foto__testa{order:1}

/* griglia 2x2 di carte bianche */
.griglia{display:grid;grid-template-columns:1fr;justify-items:center;gap:var(--gap-gap10)}
.scheda{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:var(--card-max);
  min-height:480px;
  padding:40px 40px 20px;
  border-radius:24px;
  background-color:var(--colors-base-white);
}
.scheda__testa{display:flex;flex-direction:column;align-items:center;max-width:360px}
.scheda__titolo{font-size:23px;font-weight:600;letter-spacing:-.2px;line-height:28px;text-align:center}
.scheda__desc{margin-top:10px;font-size:16px;line-height:23px;text-align:center;color:var(--colors-gray-9a)}
.media{width:100%;max-width:360px;margin-top:24px}
.media__svg{width:100%;height:auto}
.assi{stroke:var(--colors-gray-2);stroke-width:2}
.assi--zero{stroke:var(--colors-gray-3);stroke-dasharray:4 5}
.barre rect{fill:var(--colors-blue-4)}
.barre rect:nth-child(n+5):nth-child(-n+8){fill:var(--colors-purple-8)}
.linea-fissi{stroke:#060614;stroke-width:2;stroke-dasharray:6 6;fill:none}
.linea-incassi{stroke:var(--colors-purple-8);stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round}
.punto{fill:#fff;stroke:#060614;stroke-width:2}
.area-sotto{fill:#fce5e4}
.linea-saldo{stroke:#060614;stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round}
.etichetta{font-size:13px;fill:var(--colors-gray-9a);font-family:'Manrope',sans-serif}

.calendario{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.calendario span{
  display:flex;align-items:center;justify-content:center;
  height:46px;border-radius:12px;
  background:var(--colors-gray-1);
  font-size:14px;font-weight:600;color:var(--colors-gray-9a);
}
.calendario .segno{background:var(--colors-blue-4);color:var(--colors-gray-13)}
.calendario .segno--forte{background:var(--colors-purple-8);color:#fff}
.calendario__nota{margin:12px 0 0;font-size:13px;text-align:center;color:var(--colors-gray-9a)}

.media--lista ul{text-align:left}
.media--lista li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--colors-gray-1);font-size:15px;line-height:21px}
.media--lista li:last-child{border-bottom:0}
.media--lista b{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:8px;
  background:var(--colors-purple-2);
  font-size:12px;
}
.media--lista .pill{margin-top:14px;width:100%}

/* prezzi: foto sotto, testo in basso */
.prezzo{position:relative;display:flex;width:100%;max-width:var(--card-max);height:520px;border-radius:24px;overflow:hidden}
.prezzo__img{position:absolute;inset:0 0 -94px;width:100%;height:calc(100% + 94px);object-fit:cover}
.prezzo::after{content:"";position:absolute;inset:0;background:linear-gradient(#06061421,#060614ad)}
.prezzo__testo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin:auto auto 0;padding:24px;text-align:center}
.prezzo__cifra{font-size:44px;font-weight:600;letter-spacing:-1px;color:var(--colors-base-white)}
.prezzo__cifra s{margin-right:8px;font-weight:300;font-size:30px;color:#ffffff63}
.prezzo__desc{width:290px;margin-top:8px;font-size:15px;line-height:22px;color:#ffffffa1}

/* chiamata finale */
.chiamata{padding-top:64px;padding-bottom:124px;text-align:center}
.chiamata h2{font-size:36px;line-height:42px;letter-spacing:-1px;margin-bottom:32px}
.chiamata__oppure{margin:18px 0 0;font-size:15px;color:var(--colors-gray-9a)}
.chiamata__oppure a{color:var(--colors-gray-13)}

@media(min-width:680px){
  .apertura h1{font-size:56px;line-height:60px;letter-spacing:-2px}
  .blocco__titolo{font-size:48px;line-height:52px}
  .chiamata h2{font-size:44px;line-height:50px}
}

@media(min-width:1024px){
  .apertura h1{font-size:68px;line-height:72px;letter-spacing:-2.2px;margin-top:60px}
  .blocco__titolo{font-size:60px;line-height:64px}
  .coppia{flex-direction:row;justify-content:center;align-items:stretch}
  .griglia{grid-template-columns:repeat(2,1fr)}
  .scheda-foto{height:586px}
  .chiamata h2{font-size:52px;line-height:58px}
}

/* un anno in tre fotografie */
.annata{display:grid;grid-template-columns:1fr;gap:var(--gap-gap10)}
.annata__voce{margin:0;border-radius:24px;overflow:hidden;background-color:var(--colors-base-white)}
.annata__voce img{width:100%;height:260px;object-fit:cover}
.annata figcaption{display:block;padding:22px 24px 26px}
.annata figcaption b{display:block;font-size:20px;font-weight:600;letter-spacing:-.2px;margin-bottom:8px}
.annata figcaption span{display:block;font-size:15px;line-height:23px;color:var(--colors-gray-9a)}

/* listino */
.listino{
  max-width:860px;
  margin:40px auto 0;
  padding:8px 24px;
  border-radius:24px;
  background-color:var(--colors-base-white);
}
.listino__testa{display:none}
.listino__riga{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding:18px 0;
  border-bottom:1px solid var(--colors-gray-1);
}
.listino__riga:last-child{border-bottom:0}
.listino__voce{font-size:17px;font-weight:600;letter-spacing:-.2px}
.listino__cifra{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--colors-purple-8)}
.listino__nota{font-size:14px;line-height:21px;color:var(--colors-gray-9a)}
.listino__coda{
  max-width:720px;
  margin:20px auto 0;
  font-size:14px;
  line-height:22px;
  text-align:center;
  color:var(--colors-gray-9a);
}

/* il piano in banca */
.banca{padding-bottom:100px}
.banca__griglia{display:flex;flex-direction:column;gap:26px;align-items:center}
.banca__img{width:100%;max-width:var(--card-max);height:320px;object-fit:cover;border-radius:24px}
.banca__testo{max-width:var(--card-max)}
.banca__testo h2{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.6px;margin-bottom:16px}
.banca__testo p{margin:0 0 14px;font-size:16px;line-height:26px;color:var(--colors-gray-9a)}
.banca__nota{
  margin-top:18px !important;
  padding:14px 18px;
  border-radius:16px;
  background-color:var(--colors-blue-1);
  color:var(--colors-gray-13) !important;
  font-size:15px !important;
}

@media(min-width:680px){
  .listino{padding:8px 40px}
  .listino__testa{
    display:grid;
    grid-template-columns:1fr 170px 1.15fr;
    gap:20px;
    padding:20px 0 12px;
    border-bottom:1px solid var(--colors-gray-2);
    font-size:12px;
    font-weight:600;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--colors-gray-9a);
  }
  .listino__riga{grid-template-columns:1fr 170px 1.15fr;gap:20px;align-items:baseline}
}

@media(min-width:1024px){
  .annata{grid-template-columns:repeat(3,1fr)}
  .annata__voce img{height:220px}
  .banca__griglia{flex-direction:row;justify-content:center;gap:50px;align-items:center}
  .banca__img{height:420px}
}

/* i quattro grafici sono disegnati a mano nell SVG: le coordinate vengono da un foglio
   di calcolo vero, per questo non sono numeri tondi. Non raddrizzarle. */