/* ===== Pagine interne: La nostra storia, Prezzi (la testata e la nav stanno in pagina.css) ===== */
body.interna { background: var(--lp-perla); color: var(--lp-navy); }
.bottone--onda-navy { color: var(--lp-navy); box-shadow: inset 0 0 0 1px rgba(22, 52, 89, .25); }
.bottone--onda-navy:hover { background: rgba(22, 52, 89, .06); }

/* ----- storia ----- */
.storia { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(72px, 10vw, 140px); }
.storia__blocco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.storia__blocco--testo { grid-template-columns: 1fr 1fr; margin-top: clamp(56px, 8vw, 110px); }
.storia__ritratto { margin: 0; position: sticky; top: 32px; }
.storia__ritratto img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 30px 60px -28px rgba(22, 52, 89, .5); }
.storia__ritratto figcaption { margin-top: 12px; font-size: 13.5px; color: var(--lp-grigio); }
.storia__testo h2 { margin: 0; font-weight: 600; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.storia__testo p { margin: 18px 0 0; max-width: 60ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: #2f4663; text-wrap: pretty; }
.storia__citazione { font-weight: 600; font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.3 !important; color: var(--lp-navy) !important; letter-spacing: -.015em; padding-top: 22px; border-top: 1px solid rgba(22, 52, 89, .13); margin-top: 28px !important; }
.storia__foto { margin: clamp(56px, 8vw, 110px) 0 0; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 30px 60px -28px rgba(22, 52, 89, .4); }
.storia__foto img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.storia__foto--drone img { aspect-ratio: 16 / 7; }
.storia__foto figcaption { padding: 12px 16px; font-size: 13.5px; color: var(--lp-grigio); background: #fff; }
.storia__missione { margin-top: clamp(64px, 9vw, 130px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(22, 52, 89, .13); max-width: 760px; }
.storia__missione h2 { margin: 0; font-weight: 500; font-size: 16px; color: var(--lp-grigio); }
.storia__missione p { margin: 14px 0 0; font-weight: 600; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.storia__azioni { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ----- prezzi ----- */
.prezzi--pagina { padding-top: clamp(40px, 6vw, 80px); }
.piani-estesi { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1180px) { .piani-estesi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.piano-esteso { display: flex; flex-direction: column; padding: 28px; border-radius: 16px; background: #fff; min-width: 0;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 18px 40px -22px rgba(22, 52, 89, .3); }
.piano-esteso h3 { margin: 0; font-weight: 600; font-size: 22px; letter-spacing: -.015em; }
.piano-esteso__chi { margin: 2px 0 0; font-size: 14px; color: var(--lp-grigio); }
.piano-esteso__prezzo { margin: 22px 0 0; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.piano-esteso__prezzo b { font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -.035em; }
.piano-esteso__prezzo span { font-size: 15px; color: var(--lp-grigio); }
.piano-esteso__anno { margin: 8px 0 0; font-size: 14px; color: var(--lp-azzurro-ink); }
.piano-esteso ul { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(22, 52, 89, .12); display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.piano-esteso li { padding-left: 24px; position: relative; }
.piano-esteso li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--lp-tenue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z' fill='%230a7299'/%3E%3C/svg%3E") center / 10px no-repeat; }
.piano-esteso .bottone { margin-top: auto; padding-top: 12px; padding-bottom: 12px; justify-content: center; }
.piano-esteso ul + .bottone { margin-top: 26px; }
.piano-esteso--pro { background: var(--lp-navy); color: var(--lp-perla); box-shadow: 0 24px 48px -24px rgba(22, 52, 89, .6); }
.piano-esteso--pro .piano-esteso__chi, .piano-esteso--pro .piano-esteso__prezzo span { color: var(--lp-schiuma); }
.piano-esteso--pro .piano-esteso__anno { color: var(--lp-azzurrino); }
.piano-esteso--pro ul { border-top-color: rgba(145, 220, 245, .25); }
/* Enterprise: non un piano più grande ma funzioni fatte apposta, quindi un'altra superficie (azzurro tenue, bordo tratteggiato) */
.piano-esteso--misura { background: var(--lp-tenue); box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--lp-azzurro) 55%, transparent); outline-offset: -1.5px; }
/* "Su misura" non è un prezzo: una parola sola, grande quanto il nome del piano (a 34 px sembrava un titolo) */
.piano-esteso--misura .piano-esteso__prezzo b { font-size: 22px; letter-spacing: -.015em; line-height: 1.2; }
.piano-esteso--pro li::before { background-color: rgba(145, 220, 245, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z' fill='%2391dcf5'/%3E%3C/svg%3E"); }

/* ----- contatti: il modulo in una scheda bianca, accanto i contatti diretti ----- */
.contatti { padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 8vw, 110px); scroll-margin-top: 80px; }
.contatti__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 40px; align-items: start; }
.modulo-contatti { position: relative; display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: 18px; background: #fff;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 24px 50px -28px rgba(22, 52, 89, .35); }
.modulo-contatti h2 { margin: 0; font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; }
.modulo-contatti__riga { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 7px; font-size: 14px; font-weight: 500; }
.campo small { font-weight: 400; color: var(--lp-grigio); }
.campo :is(input, select, textarea) { width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--lp-navy); padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(22, 52, 89, .2); background: var(--lp-perla); transition: border-color .2s, box-shadow .2s, background .2s; }
.campo textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.campo :is(input, select, textarea)::placeholder { color: #94a3b8; }
.campo :is(input, select, textarea):focus { outline: none; border-color: var(--lp-azzurro); background: #fff; box-shadow: 0 0 0 3px rgba(7, 188, 231, .22); }
.campo.is-errato :is(input, select, textarea) { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }
.modulo-contatti__privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--lp-grigio); }
.modulo-contatti__privacy input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--lp-navy); }
.modulo-contatti__privacy a { color: var(--lp-azzurro-ink); text-decoration: underline; text-underline-offset: 3px; }
.modulo-contatti__privacy.is-errato span { color: #b42318; }
.modulo-contatti .bottone { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.modulo-contatti .bottone:disabled { opacity: .6; cursor: progress; }
.modulo-contatti__esito:empty { display: none; }
.modulo-contatti__esito { margin: 0; font-size: 14.5px; }
.modulo-contatti__esito.is-errore { color: #b42318; }
.modulo-contatti__esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* inviato: la conferma prende il posto dei campi */
.modulo-contatti.is-inviato > :not(.modulo-contatti__ok) { display: none; }
.modulo-contatti__ok { text-align: center; padding: 28px 0; }
.modulo-contatti__ok p { margin: 8px auto 0; max-width: 40ch; color: var(--lp-grigio); }
.modulo-contatti__spunta { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: #d1fae5; }
.modulo-contatti__spunta svg { width: 28px; height: 28px; fill: none; stroke: #05603a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.contatti__lato h2 { margin: 0; font-weight: 600; font-size: 20px; letter-spacing: -.015em; }
.contatti__lato > p { margin: 8px 0 0; font-size: 15px; color: var(--lp-grigio); }
.contatti__voce { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: #fff;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08); transition: box-shadow .2s, translate .2s; }
.contatti__voce:hover { box-shadow: 0 0 0 1px var(--lp-azzurro), 0 12px 24px -16px rgba(22, 52, 89, .4); translate: 0 -2px; }
.contatti__voce svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: var(--lp-azzurro-ink); stroke-width: 1.8; stroke-linejoin: round; }
.contatti__voce span { display: grid; font-size: 15px; overflow-wrap: anywhere; }
.contatti__voce b { font-weight: 600; font-size: 13px; color: var(--lp-grigio); }
.contatti__sede { margin: 22px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--lp-grigio); }
@media (max-width: 900px) {
    .contatti__in { grid-template-columns: 1fr; }
    .modulo-contatti__riga { grid-template-columns: 1fr; }
    .modulo-contatti .bottone { justify-self: stretch; justify-content: center; }
}

/* ----- come si inizia (Prezzi e Contatti): tre passi in fila su navy, numeri grandi ----- */
.inizio { background: var(--lp-navy); color: var(--lp-perla); padding: clamp(64px, 8vw, 110px) var(--gutter); }
.inizio__in { max-width: 1180px; margin: 0 auto; }
.inizio__testa h2 { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.03em; }
.inizio__testa p { margin: 12px 0 0; font-size: clamp(16px, 1.25vw, 18px); color: var(--lp-schiuma); }
.inizio__passi { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; counter-reset: passo; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inizio__passi li { counter-increment: passo; position: relative; display: flex; flex-direction: column; padding: 26px 26px 24px; border-radius: 16px;
    background: rgba(252, 252, 252, .06); box-shadow: inset 0 0 0 1px rgba(145, 220, 245, .18); }
.inizio__passi li::before { content: counter(passo); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--lp-azzurro); color: var(--lp-navy-profondo); font-weight: 600; font-size: 17px; }
.inizio__passi h3 { margin: 18px 0 0; font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.015em; }
.inizio__passi p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--lp-schiuma); text-wrap: pretty; }
.inizio__passi a { margin-top: auto; padding-top: 18px; align-self: flex-start; color: var(--lp-azzurrino); font-weight: 600; font-size: 15px;
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(145, 220, 245, .45); }
.inizio__passi a:hover { text-decoration-color: currentColor; }
.inizio__nota { margin: 24px 0 0; font-size: 15px; font-weight: 500; color: var(--lp-azzurrino); }
@media (max-width: 900px) { .inizio__passi { grid-template-columns: 1fr; } }

.dettagli { background: #eef8fc; padding: clamp(64px, 9vw, 120px) var(--gutter); }
.dettagli__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); row-gap: 48px; }
.dettagli h2 { margin: 0; font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.dettagli h2 + h2 { margin-top: clamp(40px, 5vw, 64px); }
.dettagli__sotto { margin: 10px 0 0; font-size: 15.5px; color: var(--lp-grigio); }
.dettagli__lista { list-style: none; margin: 20px 0 0; padding: 0; }
.dettagli__lista li { padding: 12px 0 12px 26px; border-top: 1px solid rgba(22, 52, 89, .12); font-size: 15px; line-height: 1.55; position: relative; }
.dettagli__lista li:last-child { border-bottom: 1px solid rgba(22, 52, 89, .12); }
.dettagli__lista li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-azzurro); }
.dettagli__aggiunte { margin: 20px 0 0; }
.dettagli__aggiunte > div { padding: 12px 0; border-top: 1px solid rgba(22, 52, 89, .12); }
.dettagli__aggiunte > div:last-child { border-bottom: 1px solid rgba(22, 52, 89, .12); }
.dettagli__aggiunte dt { font-weight: 600; font-size: 15.5px; }
.dettagli__aggiunte dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--lp-grigio); text-wrap: pretty; }

@media (max-width: 900px) {
    .storia__blocco, .storia__blocco--testo { grid-template-columns: 1fr; row-gap: 32px; }
    .storia__ritratto { position: static; max-width: 420px; }
    .storia__foto img { aspect-ratio: 4 / 3; }
    .piani-estesi { grid-template-columns: 1fr; }
    .dettagli__in { grid-template-columns: 1fr; }
}

/* la testata delle pagine interne è larga come il contenuto (in pagina.css è stretta come la colonna di testo) */
.interna .testata__in { max-width: calc(1180px + 2 * var(--gutter)); padding-top: clamp(24px, 5vw, 56px); }
.testata__sotto { margin: 16px 0 0; max-width: 56ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--lp-schiuma); text-wrap: pretty; }