/* Lettura Previdente
   fogli: base, testata, hero, fasce, schede, modulo, piede
*/

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0px 0px 0px 0px;
  overflow-x: clip;
  color: #54595F;
  background: #FFFFFF;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65em;
}
img { display: block; max-width: 100%; height: auto; }
a { color: #1461AC; }
a:hover { color: #00254a; }
h1, h2, h3 { margin: 0 0 .6em; color: #00254A; font-weight: 400; line-height: 1.2em; text-wrap: balance; }
p { text-wrap: pretty; }
h3 { font-size: 21px; font-weight: 600; }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.box-1330 { max-width: 1330px; margin: 0 auto; padding: 0em 2em 0em 2em; }
.testo-centro { text-align: center; }

/* doppia voce dei titoli: serif maiuscolo sopra, condensato corsivo sotto */
.voce-doppia { margin: 0 0 .9em; }
.voce-doppia__serif {
  display: block;
  color: #00254A;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.voce-doppia__corsivo {
  display: block;
  margin-top: .35em;
  color: #1461ac;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.2em;
}
.voce-doppia--35 .voce-doppia__serif { font-size: 35px; }
.voce-doppia--centro { text-align: center; }

/* pulsanti a pillola */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.pill-btn {
  display: inline-block;
  padding: 0.85em 2.1em 0.85em 2.1em;
  border: 1px solid #6c747b;
  border-radius: 52px;
  color: #ffffff;
  background: #6C747B;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2em;
  text-decoration: none;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}
.pill-btn:hover, .pill-btn:focus-visible { border-color: #00254A; color: #fff; background: #00254A; }
.pill-btn--line { color: #00254A; background: transparent; border-color: #00254A; }
.pill-btn--small { padding: .55em 1.3em; font-size: 14px; }
.pill-btn--white { color: #fff; background: transparent; border-color: #FFFFFF; }

/* barra in alto */
.site-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  padding: 1.6em 3em 1.6em 5em;
}
.site-top__logo img { width: 141px; height: auto; }
.site-top__nav { display: flex; align-items: center; gap: 2em; }
.site-top__nav a {
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.site-top__nav a:hover { color: #C9DAEA; }
.site-top__nav .site-top__cta { padding: .5em 1.4em; border: 1px solid #fff; border-radius: 52px; }
.hamburger { display: none; }

/* fila di contatti a sinistra */
.contact-rail {
  position: fixed;
  top: 40%;
  left: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
}
.contact-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background: #00254A;
  transition: background .3s;
}
.contact-rail a:hover { background: #1461AC; }

/* hero */
.hero-veil { position: relative; min-height: 97vh; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; background: #00254A; }
.hero-veil__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veil::after { content: ""; position: absolute; inset: 0; background: rgba(0, 37, 74, .6); }
.hero-veil__text { position: relative; z-index: 2; text-shadow: 0 1px 14px rgba(0, 20, 40, .45); max-width: 760px; padding: 8em 7em 4em 2em; text-align: right; }
.hero-veil h1 .voce-doppia__serif { color: #fff; font-size: clamp(32px, 4vw, 50px); font-weight: 400; }
.hero-veil h1 .voce-doppia__corsivo { color: #e1ebf5; font-size: 30px; }
.hero-veil__nota { margin: 1.4em 0 0; color: #ffffff; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }

.punti-strip { background: #1461AC; }
.punti-strip__list { display: flex; justify-content: center; flex-wrap: wrap; gap: .4em 3em; margin: 0; padding: 1.1em 2em; list-style: none; }
.punti-strip__list li { color: #fff; font-size: 15px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }

/* introduzione con il filetto a destra */
.intro-split { padding: 6em 0em 5em 0em; }
.intro-split__row { display: grid; grid-template-columns: 4fr 7fr; gap: 4em; align-items: start; }
.intro-split__left { padding-right: 1.6em; border-right: 7px solid #1461AC; text-align: right; }

/* fascia blu con la foto che sporge */
.navy-band { margin-bottom: 7em; padding: 5em 0em 0em 0em; background: #00254a; }
.navy-band__row { display: grid; grid-template-columns: 5fr 6fr; gap: 4em; align-items: start; }
.navy-band__photo { margin-bottom: -5em; }
.navy-band__photo img { width: 100%; border-radius: 0px 40px 0px 40px; }
.navy-band__text { padding-bottom: 4em; }
.navy-band .voce-doppia__serif { color: #ffffff; }
.navy-band .voce-doppia__corsivo { color: #A9C6E4; }
.limiti-list { margin: 0; padding: 0; list-style: none; }
.limiti-list li { padding: .7em 0em .7em 0em; border-bottom: 1px solid rgba(255, 255, 255, .18); color: #dde6ef; }
.limiti-list b { display: block; color: #fff; font-family: "Roboto Condensed", Arial, sans-serif; font-style: italic; font-weight: 300; font-size: 19px; }
.limiti-list__vero { border-bottom: 0 !important; }
.limiti-list__vero b { color: #F0C674; }

/* fasce bianche */
.sezione-bianca { padding: 5em 0em 5em 0em; }
.sezione-bianca--stretta { padding-top: 1em; }
.due-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; margin-top: 2em; }
.doc-card { padding: 0em 0em 2.4em 0em; border-radius: 40px; overflow: hidden; background: #F5F7FA; }
.doc-card img { width: 100%; margin-bottom: 1.6em; }
.doc-card h3, .doc-card p, .doc-card ul, .doc-card .pill-btn { margin-left: 2.2rem; margin-right: 2.2rem; }
.doc-card__righe { padding: 0; list-style: none; }
.doc-card__righe li { padding: .5em 0; border-top: 1px solid #DDE3EA; }
.doc-card__righe b { display: block; color: #00254A; }

.tre-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; margin-top: 2.4em; }
.card-tonda { overflow: hidden; border-radius: 40px; background: #FFFFFF; box-shadow: 0px 6px 26px rgba(0, 37, 74, .1); }
.card-tonda img { width: 100%; aspect-ratio: 806 / 394; object-fit: cover; }
.card-tonda h3, .card-tonda p { padding: 0em 1.6em 0em 1.6em; }
.card-tonda h3 { margin-top: 1.2em; }
.card-tonda p { padding-bottom: 1.6em; }

/* griglia di icone */
.sezione-icone { padding: 5em 0em 5em 0em; background: #F7F7F7; }
.sezione-icone__intro { max-width: 640px; }
.icone-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3em 3em; margin-top: 3em; }
.icona-voce svg { margin-bottom: 1em; }
.icona-voce__quando { margin: 0 0 .3em; color: #1461AC; font-family: "Roboto Condensed", Arial, sans-serif; font-style: italic; font-size: 16px; }

/* fascia prenotazione con le punte */
.booking-band { position: relative; padding: 6em 0em 6em 0em; background: #efefef; }
.booking-band::before, .booking-band::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 34px solid transparent; border-right: 34px solid transparent; }
.booking-band::before { top: 0; border-top: 22px solid #fff; }
.booking-band::after { bottom: 0; border-bottom: 22px solid #fff; }
.booking-band--passi { background: #F1F3F6; }
.cicli-row { display: flex; justify-content: center; gap: 1.6em; flex-wrap: wrap; margin: 2.4em 0em 2.4em 0em; }
.ciclo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 220px;
  padding: 1.6em 2em 1.6em 2em;
  border-radius: 40px;
  background: #FFFFFF;
  text-align: center;
}
.ciclo-box__mese { color: #00254A; font-family: "Bodoni Moda", Georgia, serif; font-size: 26px; text-transform: uppercase; }
.ciclo-box small { color: #6C747B; font-size: 14px; }
.ciclo-box--navy { color: #fff; background: #00254A; }
.ciclo-box--navy .ciclo-box__mese, .ciclo-box--navy small { color: #ffffff; }

/* le dieci mattine: quattro schede ferme, due per due */
.mattine-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; margin-top: 2em; }

/* striscia foto */
.photo-strip { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-strip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-strip::after { content: ""; position: absolute; inset: 0; background: rgba(0, 37, 74, .55); }
.photo-strip__text { position: relative; z-index: 2; text-shadow: 0 1px 12px rgba(0, 20, 40, .5); max-width: 760px; padding: 4em 2em 4em 2em; color: #fff; text-align: center; }
.photo-strip__text h2 { color: #ffffff; font-family: "Bodoni Moda", Georgia, serif; font-size: 36px; text-transform: uppercase; }

/* passi */
.passi-split { display: grid; grid-template-columns: 5fr 7fr; gap: 4em; align-items: center; margin-top: 2em; }
.passi-split__photo img { border-radius: 40px 0px 40px 0px; }
.passi-lista { margin: 0 0 1.4em; padding: 0; list-style: none; counter-reset: passo; }
.passi-lista li { position: relative; padding: .6em 0em .9em 3.4em; counter-increment: passo; }
.passi-lista li::before {
  content: counter(passo);
  position: absolute;
  top: .4em;
  left: 0;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  color: #fff;
  background: #00254A;
  font-weight: 600;
  line-height: 2.2em;
  text-align: center;
}
.passi-lista b { display: block; color: #00254A; }
.citazione-destra { margin: 2em 0 0; padding-right: 1em; border-right: 7px solid #1461AC; color: #00254A; font-family: "Roboto Condensed", Arial, sans-serif; font-style: italic; font-size: 22px; text-align: right; }

/* faq per argomento */
.tab-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 2em 0em 2em 0em; }
.tab-pill { padding: .6em 1.6em; border: 1px solid #6c747b; border-radius: 52px; color: #54595F; background: transparent; font-family: inherit; font-size: 15px; cursor: pointer; }
.tab-pill--on { border-color: #00254A; color: #fff; background: #00254A; }
.faq-gruppo { max-width: 860px; margin: 0 auto; }
.faq-gruppo details { border-bottom: 1px solid #DDE3EA; }
.faq-gruppo summary { padding: 1em 2em 1em 0em; color: #00254A; font-weight: 600; cursor: pointer; }
.faq-gruppo details p { padding-bottom: .6em; }

/* pagine interne */
.testata-pagina { padding: 10em 0em 4em 0em; background: #00254A; color: #DDE6EF; }
.testata-pagina h1 { color: #fff; font-family: "Bodoni Moda", Georgia, serif; font-size: 44px; text-transform: uppercase; }
.occhiello { margin: 0 0 .6em; color: #A9C6E4; font-family: "Roboto Condensed", Arial, sans-serif; font-style: italic; font-size: 20px; }
.testo-guida { max-width: 780px; font-size: 19px; }
.riga { display: flex; gap: 4em; }
.riga--centro { align-items: center; }
.meta { flex: 1 1 0; min-width: 0; }
.foto-tonda { border-radius: 40px; }
.fascia-navy { padding: 4em 0em 4em 0em; background: #1461AC; color: #fff; }
.fascia-navy h2, .fascia-navy a { color: #ffffff; }
.fascia-navy .pill-btn { background: #00254A; border-color: #00254A; }
.foto-piena { margin: 2em 0em 2em 0em; }
.foto-piena img { width: 100%; border-radius: 40px; }
.foto-piena figcaption { margin-top: .6em; color: #6C747B; font-size: 15px; font-style: italic; }
.testo-legale { max-width: 860px; }
.testo-legale h3 { margin-top: 1.6em; }

/* modulo in tre passi */
.modulo-cornice { max-width: 720px; margin: 0 auto 4em; padding: 2.4em 3em 2.4em 3em; border-radius: 40px; background: #EFEFEF; }
.segna-passi { display: flex; gap: 1em; margin: 0 0 1.6em; padding: 0; list-style: none; counter-reset: segno; }
.segna-passi li { flex: 1; padding-top: .5em; border-top: 4px solid #C9CFD5; color: #5d646a; font-size: 15px; counter-increment: segno; }
.segna-passi li::before { content: counter(segno) ". "; }
.segna-passi .fatto { border-color: #00254A; color: #00254A; font-weight: 600; }
.modulo-lp fieldset { margin: 0; padding: 0; border: 0; }
.modulo-lp legend { margin-bottom: .8em; color: #00254A; font-family: "Bodoni Moda", Georgia, serif; font-size: 26px; text-transform: uppercase; }
.etichetta { display: block; margin: 1em 0 .3em; color: #00254A; font-weight: 600; }
.modulo-lp select, .modulo-lp input[type=text], .modulo-lp input[type=email] {
  width: 100%;
  padding: .7em 1em;
  border: 1px solid #c9cfd5;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
}
.opzioni { display: flex; flex-wrap: wrap; gap: .6em 1.6em; }
.consenso { display: block; margin-top: 1.2em; font-size: 15px; }
.fuori-vista { position: absolute; left: -9999px; }
.modulo-lp__esito { margin-top: 1em; color: #00254A; font-weight: 600; }
.dopo-invio { margin-top: 1em; }

/* piede */
.sub-footer { padding: 4em 0em 2em 0em; background: #00254A; color: #C9D6E3; font-size: 15px; }
.sub-footer img { width: 160px; margin-bottom: 1.6em; }
.footer-list { display: flex; flex-wrap: wrap; gap: .4em 2em; margin: 0 0 .8em; padding: 0; list-style: none; }
.footer-list a, .footer-contatti a { color: #FFFFFF; text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-list--legale a { color: #a9c6e4; }
.footer-contatti { margin-top: 1.4em; }
.footer-copy { margin: 2em 0 0; padding-top: 1.4em; border-top: 1px solid rgba(255, 255, 255, .15); }
.link-cookie { padding: 0; border: 0; color: inherit; background: none; font: inherit; text-decoration: underline; cursor: pointer; }

/* avviso cookie */
.cookie-navy {
  position: fixed;
  left: 50px;
  bottom: 20px;
  z-index: 40;
  max-width: 440px;
  padding: 1.4em 1.6em 1.4em 1.6em;
  border-radius: 24px;
  color: #fff;
  background: #00254A;
  font-size: 15px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, .25);
}
.cookie-navy[hidden] { display: none; }
.cookie-navy a { color: #A9C6E4; }
.cookie-navy__check { display: block; margin: .4em 0 1em; }
.cookie-navy__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* 1024 */
@media (max-width: 1024px) {
  .site-top { padding: 1.2em 2em 1.2em 3.4em; }
  .site-top__nav { gap: 1.2em; }
  .hero-veil__text { padding: 8em 4em 4em 2em; }
  .voce-doppia__serif { font-size: 36px; }
  .icone-griglia { grid-template-columns: 1fr 1fr; }
  .tre-col { grid-template-columns: 1fr 1fr; }
  .navy-band__row, .passi-split { gap: 2.4em; }
}

/* 767 */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .box-1330 { padding: 0em 1em 0em 1em; }
  .site-top { padding: 1em 1em 1em 1em; }
  .site-top__logo img { width: 118px; }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .hamburger span:not(.sr-only) { display: block; height: 2px; background: #fff; }
  .site-top__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6em 1em 1.2em 1em;
    background: #00254A;
  }
  .site-top__nav.is-open { display: flex; }
  .site-top__nav a { padding: .8em 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .site-top__nav .site-top__cta { margin-top: .8em; text-align: center; }
  .contact-rail { top: auto; bottom: 0; left: 0; right: 0; flex-direction: row; justify-content: center; }
  .contact-rail a { flex: 1; height: 42px; }
  .hero-veil { min-height: 88vh; }
  .hero-veil__text { padding: 7em 1em 3em 1em; }
  .hero-veil h1 .voce-doppia__serif { font-size: 32px; }
  .hero-veil h1 .voce-doppia__corsivo { font-size: 22px; }
  .voce-doppia__serif, .voce-doppia--35 .voce-doppia__serif { font-size: 28px; }
  .voce-doppia__corsivo { font-size: 20px; }
  .intro-split { padding: 3.4em 0em 3em 0em; }
  .intro-split__row, .navy-band__row, .due-col, .tre-col, .icone-griglia, .mattine-griglia, .passi-split { grid-template-columns: 1fr; gap: 2em; }
  .intro-split__left { padding-right: 1em; }
  .navy-band { margin-bottom: 5em; padding-top: 3em; }
  .navy-band__photo { order: 2; margin-bottom: -3em; }
  .sezione-bianca, .sezione-icone, .booking-band { padding: 3.4em 0em 3.4em 0em; }
  .doc-card h3, .doc-card p, .doc-card ul, .doc-card .pill-btn { margin-left: 1.2rem; margin-right: 1.2rem; }
  .ciclo-box { min-width: 0; width: 100%; }
  .photo-strip__text h2 { font-size: 26px; }
  .testata-pagina { padding: 7.4em 0em 2.6em 0em; }
  .testata-pagina h1 { font-size: 30px; }
  .riga { flex-direction: column; gap: 2em; }
  .modulo-cornice { padding: 1.6em 1.2em 1.6em 1.2em; border-radius: 24px; }
  .sub-footer { padding-bottom: 4em; }
  .cookie-navy { left: 10px; right: 10px; bottom: 52px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
