/* ==========================================================================
   Natura e Buona Vita — Pagine dei servizi (css/servizio.css)

   Componenti delle pagine di servizio, costruiti sul sistema della home:
   token, tipografia, pulsanti, sezioni, presentazione, FAQ e comparsa
   all'ingresso arrivano da css/home.css, caricato prima di questo file.
   Qui solo ciò che le pagine dei servizi aggiungono (prefisso sv-).
   Compatibilità: nessuna proprietà "inset" o logica (Safari < 14.1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Presentazione
   -------------------------------------------------------------------------- */
.sv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin: 0 0 14px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--nh-sage);
}

.sv-eyebrow span { color: var(--nh-ink-2); font-weight: 500; }

/* Titoli dei servizi più lunghi di quello della home: scala ridotta, i pulsanti restano in vista */
.sv-hero__title { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); }

.sv-hero__frame img { object-position: 50% 62%; }
.sv-hero__frame--bia img { object-position: 50% 45%; }
.sv-hero__frame--square img { object-position: 50% 30%; }

/* Riquadro scuro dietro la fotografia, coerente con il riquadro della home */
.sv-hero .nh-hero__frame { background: var(--nh-sage-deep); }

.sv-hero__meta {
    display: grid;
    gap: 10px;
}

.sv-hero__meta p { margin: 0; }

.sv-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .9375rem;
    color: var(--nh-ink-2);
}

.sv-check i { color: var(--nh-sage); }

/* --------------------------------------------------------------------------
   Testo e lista con segni di spunta
   -------------------------------------------------------------------------- */
.sv-split {
    display: grid;
    gap: clamp(32px, 5vw, 72px);
}

@media (min-width: 960px) {
    .sv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.sv-prose {
    display: grid;
    gap: 18px;
    max-width: 36em;
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    line-height: 1.55;
    color: var(--nh-ink-2);
}

.sv-prose p { margin: 0; }
.sv-prose .nh-h2 { margin-bottom: 6px; color: var(--nh-ink); }

.sv-aside { display: grid; gap: 14px; }
.sv-prose strong { color: var(--nh-ink); font-weight: 600; }

.sv-benefits {
    list-style: none;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.sv-benefit {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 22px;
    border-radius: var(--nh-r-m);
    background: var(--nh-mist);
}

.nh-section--mist .sv-benefit { background: var(--nh-paper); }

.sv-benefit h3 { font-weight: 700; margin: 0 0 4px; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.018em; }
.sv-benefit p { margin: 0; color: var(--nh-ink-2); line-height: 1.5; }

.sv-dot {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--nh-sage-tint);
    color: var(--nh-sage);
    font-size: 1rem;
}

.sv-note {
    margin: 0;
    padding: 20px 22px;
    border-left: 3px solid var(--nh-sage);
    border-radius: 0 var(--nh-r-m) var(--nh-r-m) 0;
    background: var(--nh-sage-tint);
    color: var(--nh-ink);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Schede in griglia (passaggi, indicazioni)
   -------------------------------------------------------------------------- */
.sv-cards {
    list-style: none;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .sv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
    .sv-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sv-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 3vw, 32px);
    border-radius: var(--nh-r-l);
    background: var(--nh-paper);
}

.nh-section:not(.nh-section--mist) .sv-card { background: var(--nh-mist); }

.sv-card__n {
    font-size: .875rem;
    font-weight: 600;
    color: var(--nh-sage);
}

.sv-card h3 { font-weight: 700; margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.sv-card p { margin: 0; color: var(--nh-ink-2); line-height: 1.5; }

.sv-card--row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.sv-card--row h3 { margin-bottom: 6px; }

.sv-center { margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* --------------------------------------------------------------------------
   Fasi del percorso: sezione scura con bordo superiore arrotondato,
   come la scena del metodo nella home
   -------------------------------------------------------------------------- */
.sv-dark {
    border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
    background: var(--nh-sage-deep);
    color: #fff;
}

.sv-dark .nh-lead { color: rgba(255, 255, 255, .72); }

.sv-phases {
    list-style: none;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
}

@media (min-width: 900px) {
    .sv-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sv-phase {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(26px, 3vw, 36px);
    border-radius: var(--nh-r-l);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(159, 209, 201, .18);
}

.sv-phase__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sv-phase__step {
    font-size: .875rem;
    font-weight: 600;
    color: var(--nh-mint);
}

.sv-phase .sv-dot { background: rgba(159, 209, 201, .14); color: var(--nh-mint); }
.sv-phase h3 { font-weight: 700; margin: 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.024em; }
.sv-phase p { margin: 0; color: rgba(255, 255, 255, .76); line-height: 1.55; }

/* Percorso a tre tappe: linea che unisce le fasi (solo su schermi larghi) */
@media (min-width: 900px) {
    .sv-phases { position: relative; }
    .sv-phase { position: relative; }
    .sv-phase + .sv-phase::before {
        content: "";
        position: absolute;
        top: 52px;
        left: -16px;
        width: 16px;
        height: 1.5px;
        background: rgba(159, 209, 201, .4);
    }
}

/* --------------------------------------------------------------------------
   Due pannelli affiancati: verifiche preliminari e controindicazioni
   -------------------------------------------------------------------------- */
.sv-duo {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 900px) {
    .sv-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-duo--one { grid-template-columns: minmax(0, 1fr); }
}

.sv-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(26px, 3vw, 36px);
    border-radius: var(--nh-r-l);
    background: var(--nh-sage-tint);
}

.sv-panel h3 { font-weight: 700; margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.sv-panel p { margin: 0; color: var(--nh-ink-2); line-height: 1.55; }

.sv-panel .sv-dot { background: var(--nh-paper); }
.sv-panel--rose { background: var(--nh-blush); }
.sv-panel--rose .sv-dot { background: #f6dbe2; color: var(--nh-rose); }

.sv-panel__head { display: flex; align-items: center; gap: 14px; }

.sv-ticks {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    color: var(--nh-ink-2);
}

.sv-ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; line-height: 1.45; }
.sv-ticks i { margin-top: .25em; color: var(--nh-sage); font-size: .875rem; }

/* --------------------------------------------------------------------------
   Invito finale
   -------------------------------------------------------------------------- */
.sv-cta {
    display: grid;
    justify-items: center;
    gap: 20px;
    text-align: center;
}

.sv-cta .nh-lead { max-width: 30em; }
.sv-cta .nh-actions { justify-content: center; }

/* Presentazione: in movimento la fotografia scende appena, il testo resta leggibile */
@media (min-width: 960px) {
    .sv-hero .nh-hero__intro { padding-top: 12px; }
}

/* --------------------------------------------------------------------------
   Varianti condivise dalle pagine dei servizi
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .sv-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sv-card--rose { background: var(--nh-blush); }
.nh-section:not(.nh-section--mist) .sv-card--rose { background: var(--nh-blush); }
.sv-card--rose .sv-card__n { color: var(--nh-rose); text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; }
.sv-card--rose .sv-dot { background: #f6dbe2; color: var(--nh-rose); }

.sv-hero--rose .sv-eyebrow { color: var(--nh-rose); }
.sv-hero__frame--square { aspect-ratio: 1 / 1; }

.sv-prose .nh-actions { margin-top: 10px; }
.sv-center .nh-small { margin-top: 14px; }

/* Riquadro illustrato della presentazione (al posto della fotografia) */
.sv-visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: clamp(28px, 6%, 48px);
}

.sv-visual--tele {
    align-items: center;
    background: linear-gradient(160deg, #eef5f3 0%, var(--nh-sage-tint) 100%);
}

.sv-visual--tele .nh-call {
    width: min(100%, 400px);
    gap: 26px;
    padding: 24px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 60px -30px rgba(13, 38, 37, .35), inset 0 0 0 1px var(--nh-line);
}

.sv-visual--tele .nh-call__bar { font-size: .9375rem; }
.sv-visual--tele .nh-call__avatar { width: 76px; height: 76px; font-size: 28px; }
.sv-visual--tele .nh-call__wave { gap: 6px; height: 48px; }
.sv-visual--tele .nh-call__wave i { width: 5px; }
.sv-visual--tele .nh-call__controls { gap: 14px; }
.sv-visual--tele .nh-call__controls i { width: 46px; height: 46px; font-size: 16px; background: var(--nh-mist); }

/* Promo sposi: fedi ingrandite e offerta (animazioni di css/home.css, .nh-tile--sposi) */
.sv-visual--sposi { justify-content: flex-end; gap: 18px; }

.sv-rings { display: block; width: 148px; height: 124px; }
.sv-rings .nh-rings { transform: scale(2); transform-origin: 0 0; }

.sv-visual--sposi .nh-offer { margin: 0; }
.sv-visual--sposi .nh-offer__pct { font-size: clamp(4rem, 2.8rem + 4.6vw, 7rem); }
.sv-visual--sposi .nh-offer__on { font-size: 1.0625rem; }

.sv-visual__sub {
    display: block;
    padding-top: 16px;
    border-top: 1px solid rgba(163, 38, 79, .18);
    font-size: 1rem;
    color: #6e4a55;
}

/* Offerta in due schede (Promo sposi) */
.sv-offers {
    display: grid;
    gap: 16px;
}

@media (min-width: 760px) {
    .sv-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sv-offer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(26px, 3vw, 40px);
    border-radius: var(--nh-r-l);
    background: linear-gradient(160deg, #fdf1f4 0%, #f7d6df 100%);
}

.sv-offer .sv-dot { background: #fff; color: var(--nh-rose); }
.sv-offer h3 { margin: 6px 0 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }

.sv-offer__pct {
    font-size: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--nh-rose);
}

.sv-offer p { margin: 0; color: #6e4a55; line-height: 1.5; }

.sv-badge {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--nh-rose);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Corpi e bandi (Concorsi Forze Armate) */
.sv-corps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) { .sv-corps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sv-corps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sv-corps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 14px;
    border-radius: var(--nh-r-m);
    background: var(--nh-mist);
    text-align: center;
    font-weight: 600;
    line-height: 1.25;
}

.sv-corps .sv-dot { width: 52px; height: 52px; font-size: 1.25rem; }

.sv-wide-note { max-width: 46em; margin: clamp(28px, 4vw, 40px) auto 0; }

/* Browser senza aspect-ratio (Safari < 15): riquadro quadrato */
@supports not (aspect-ratio: 1 / 1) {
    .sv-hero__frame--square { padding-top: 100%; }
}

/* ==========================================================================
   Promo sposi
   ========================================================================== */

/* Riflesso sul titolo in rosa e oro (stesso movimento della home) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sv-hero--rose .nh-sheen {
        background-image: linear-gradient(96deg,
            var(--nh-ink) 4%, var(--nh-rose) 16%, #b8862f 22%, var(--nh-ink) 34%,
            var(--nh-ink) 54%, var(--nh-rose) 66%, #b8862f 72%, var(--nh-ink) 84%,
            var(--nh-ink) 100%);
    }
}

/* --------------------------------------------------------------------------
   Partecipazione nella busta: la busta si apre, il biglietto sale, il numero
   gira, le fedi si uniscono. Solo transform e opacity; senza animazioni il
   biglietto è già fuori dalla busta.
   -------------------------------------------------------------------------- */
.sv-visual--invito { --nh-gold: #c99a4a; background: linear-gradient(160deg, #fdf1f4 0%, #f5d3dc 100%); }

.sv-env {
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 8%;
    height: 38%;
    perspective: 1400px;
}

.sv-env__back,
.sv-env__pocket,
.sv-env__flap { position: absolute; left: 0; right: 0; }

.sv-env__back {
    top: 0;
    bottom: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #e3a1b3 0%, #eab3c2 100%);
}

.sv-env__card {
    position: absolute;
    z-index: 2;
    left: 7%;
    right: 7%;
    bottom: 6%;
    height: 190%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 24px;
    border-radius: 10px;
    background: #fffaf8;
    box-shadow: 0 18px 40px -22px rgba(120, 30, 60, .45);
}

.sv-env__date {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nh-rose);
}

.sv-env__card .sv-rings { width: 104px; height: 82px; margin-top: 14px; }
.sv-env__card .sv-rings .nh-rings { transform: scale(1.4); }
.sv-env__card .nh-offer { margin: 0; }
.sv-env__card .nh-offer__pct { font-size: clamp(3.25rem, 2.4rem + 3.2vw, 5.5rem); }
.sv-env__card .nh-offer__on { font-size: 1rem; }

.sv-env__pocket {
    z-index: 3;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 7%;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, #f6d0da 0%, #f1c0cd 100%);
    -webkit-clip-path: polygon(0 30%, 50% 64%, 100% 30%, 100% 100%, 0 100%);
    clip-path: polygon(0 30%, 50% 64%, 100% 30%, 100% 100%, 0 100%);
    font-size: .9375rem;
    font-weight: 600;
    color: #8a3a55;
}

.sv-env__flap {
    z-index: 1;
    top: 0;
    height: 100%;
    transform-origin: 50% 0;
    transform: rotateX(180deg);
    background: linear-gradient(180deg, #eeb6c5 0%, #e9a8b9 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 60%);
    clip-path: polygon(0 0, 100% 0, 50% 60%);
}

.sv-env__seal {
    position: absolute;
    top: 49%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--nh-rose);
    color: #fde7ee;
    font-size: 14px;
    opacity: 0;
}

/* Sequenza animata (solo con .nh-motion) */
.nh-motion .sv-env__flap { animation: sv-flap 1s cubic-bezier(.5, 0, .2, 1) .5s both; }
.nh-motion .sv-env__seal { animation: sv-seal .9s ease .1s both; }
.nh-motion .sv-env__card { animation: sv-card 1.1s var(--nh-ease) 1.2s both; }
.nh-motion .sv-invito .nh-ring--a { animation: sv-ring-a 1.1s var(--nh-ease) 2.1s both; }
.nh-motion .sv-invito .nh-ring--b { animation: sv-ring-b 1.1s var(--nh-ease) 2.1s both; }
.nh-motion .sv-invito .nh-heart { animation: sv-heart .7s var(--nh-ease) 3s both; }
.nh-motion .sv-invito .nh-heart > span { animation: nh-sway 3.2s ease-in-out 3.7s infinite; }
.nh-motion .sv-invito .nh-heart i { animation: nh-beat 1.6s ease-in-out 3.7s infinite; }

@keyframes sv-flap {
    0%   { transform: rotateX(0deg);   z-index: 4; }
    49%  { z-index: 4; }
    50%  { z-index: 1; }
    100% { transform: rotateX(180deg); z-index: 1; }
}

@keyframes sv-seal {
    0%, 60% { opacity: 1; transform: scale(1); }
    100%    { opacity: 0; transform: scale(.6); }
}

/* Il ritaglio inferiore segue la salita: la parte del biglietto ancora nella busta
   non sporge mai sotto il bordo della busta (82% = parte che supera il fondo all'inizio). */
@keyframes sv-card {
    from { transform: translate3d(0, 85%, 0); -webkit-clip-path: inset(0 0 82% 0); clip-path: inset(0 0 82% 0); }
    to   { transform: none; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}

@keyframes sv-ring-a { from { transform: translate3d(-14px, 0, 0); } to { transform: none; } }
@keyframes sv-ring-b { from { transform: translate3d(14px, 0, 0); } to { transform: none; } }
@keyframes sv-heart  { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.3); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   "Quando vi sposate?"
   -------------------------------------------------------------------------- */
.sv-planner {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(28px, 4vw, 56px);
    border-radius: var(--nh-r-xl);
    background: linear-gradient(160deg, #fdf1f4 0%, #f7d6df 100%);
}

@media (min-width: 900px) {
    .sv-planner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

.sv-planner__ask { display: grid; gap: 16px; justify-items: start; }

.sv-date {
    display: grid;
    gap: 8px;
    width: min(100%, 340px);
    font-size: .875rem;
    font-weight: 600;
    color: #6e4a55;
}

.sv-date input {
    min-height: 54px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(163, 38, 79, .25);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nh-ink);
}

.sv-date input:focus-visible { outline: 3px solid rgba(163, 38, 79, .4); outline-offset: 2px; }

.sv-planner__out {
    display: grid;
    gap: 10px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--nh-r-l);
    background: #fff;
    min-height: 220px;
    align-content: center;
}

.sv-planner__days {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
}

.sv-planner__days .nh-odo {
    font-size: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--nh-rose);
}

.sv-planner__days > span:last-child { font-size: 1.125rem; font-weight: 600; color: var(--nh-ink); }
.sv-planner__phase { margin: 4px 0 0; font-weight: 700; color: var(--nh-rose); }
.sv-planner__advice { margin: 0; color: var(--nh-ink-2); line-height: 1.5; }
.sv-planner__out .nh-actions { margin-top: 8px; }

.sv-planner__out .sv-planner__empty { display: none; margin: 0; color: var(--nh-ink-2); }
.sv-planner__out[data-state="empty"] .sv-planner__empty { display: block; }
.sv-planner__out[data-state="empty"] > :not(.sv-planner__empty),
.sv-planner__out[data-state="past"] > :not(.sv-planner__days) { display: none; }
.sv-planner__out[data-state="past"] .sv-planner__days .nh-odo { display: none; }

/* Fase evidenziata nella cronologia */
.sv-card[data-current] { box-shadow: inset 0 0 0 2px var(--nh-rose); }
.sv-card[data-current] .sv-card__n::after { content: " · Sei qui"; }

/* Fedi accanto al titolo della sezione scura */
.sv-rings-head { display: inline-block; margin-bottom: 8px; background: none; }
.sv-rings-head .nh-heart { display: none; }

/* --------------------------------------------------------------------------
   Barra fissa su mobile (lascia libero l'angolo destro per il pulsante della chat)
   -------------------------------------------------------------------------- */
.sv-bar { display: none; }

@media (max-width: 767px) {
    .sv-bar {
        position: fixed;
        z-index: 40;
        left: 12px;
        right: 88px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        display: flex;
        gap: 8px;
        padding: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        box-shadow: 0 12px 30px -12px rgba(13, 38, 37, .35);
        opacity: 0;
        transform: translate3d(0, 140%, 0);
        transition: transform .5s var(--nh-ease), opacity .3s ease;
        pointer-events: none;
    }
    .sv-bar[hidden] { display: none; }
    .sv-bar[data-show] { opacity: 1; transform: none; pointer-events: auto; }
    .sv-bar .nh-btn { flex: 1 1 auto; min-height: 44px; }
    .sv-bar__wa {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #25d366;
        color: #fff;
        font-size: 1.25rem;
    }
}

/* Busta su schermi stretti: biglietto più alto e testi più compatti */
@media (max-width: 599px) {
    .sv-env { left: 7%; right: 7%; }
    .sv-env__card { height: 215%; gap: 8px; padding: 16px 18px; }
    .sv-env__card .sv-rings { width: 84px; height: 66px; margin-top: 10px; }
    .sv-env__card .sv-rings .nh-rings { transform: scale(1.1); }
    .sv-env__card .nh-offer__pct { font-size: 3rem; }
    .sv-env__card .nh-offer__on { font-size: .875rem; }
    .sv-env__date { font-size: .6875rem; }
    .sv-env__pocket { font-size: .75rem; padding-left: 10px; padding-right: 10px; text-align: center; }
}

/* Schermi molto stretti (320–420 px): i pulsanti con testo lungo vanno a capo invece di uscire dal margine */
@media (max-width: 420px) {
    .nh .nh-btn {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* Telefoni e tablet in orizzontale (600–959 px): blocchi affiancati come su PC,
   invece di una lunga colonna unica larga quanto lo schermo. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 959px) {
    .sv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .sv-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-duo--one { grid-template-columns: minmax(0, 1fr); }
    .sv-planner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
    .sv-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .sv-phase { padding: 20px; }
    .sv-phase__top { flex-wrap: wrap; }
    .sv-phase h3 { font-size: 1.25rem; }
}