/* pagine-istituzionali.css - /chi-siamo, /contatti, /lavora-con-noi, /parita-di-genere. Le classi cs-*, wrap, btn-*, why-*, faq-*, cta-final restano quelle gia presenti
   nel blocco <style> di /chi-siamo: spostarle in un CSS condiviso (es. assets/css/pagine-istituzionali.css) caricato da entrambe le pagine. */

.text-link{color:var(--pink-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.text-link:hover{color:var(--pink)}

/* card "persone / altre esigenze" */
.people-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.people-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.people-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.people-card{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--card-border);border-radius:1.125rem;padding:1.5rem;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.people-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.people-card h3{font-family:var(--font-display);font-weight:800;font-size:1.0625rem;letter-spacing:-.005em}
.people-card p{font-size:.875rem;line-height:1.6;color:var(--muted);flex:1}
.people-card .spec-link{--accent:var(--pink-dark)}


/* form + colonna laterale */
.contact-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media(min-width:960px){.contact-layout{grid-template-columns:7fr 5fr;gap:3rem}}
.contact-side{display:flex;flex-direction:column;gap:1rem}
@media(min-width:960px){.contact-side{position:sticky;top:calc(var(--vg-header-h,7.5rem) + 1rem)}}
.info-card{background:#fff;border:1px solid var(--card-border);border-radius:1.125rem;box-shadow:var(--shadow);padding:1.5rem}
.info-card h3{font-family:var(--font-display);font-weight:800;font-size:1.0625rem;margin-bottom:.875rem}
.info-card p{font-size:.9063rem;line-height:1.65;color:#26303f}
.info-card p + p{margin-top:.75rem}
.info-card a{color:var(--pink-dark);font-weight:600}
.address-card p a{display:inline-block;padding:.65rem 0;overflow-wrap:anywhere}
.address-card{font-style:normal}
.next-steps{counter-reset:ns;display:flex;flex-direction:column;gap:.875rem}
.next-steps li{counter-increment:ns;position:relative;padding-left:2.5rem;font-size:.9063rem;line-height:1.6;color:#26303f}
.next-steps li::before{content:counter(ns);position:absolute;left:0;top:0;width:1.75rem;height:1.75rem;border-radius:50%;background:#fde9f0;color:var(--pink-dark);font-family:var(--font-display);font-weight:800;font-size:.8125rem;display:inline-flex;align-items:center;justify-content:center}
.hours-list{display:flex;flex-direction:column}
.hours-list div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(20,27,43,.06);font-size:.875rem}
.hours-list div:last-child{border-bottom:0}
.hours-list dt{font-weight:700;color:var(--ink)}
.hours-list dd{color:var(--muted);text-align:right}
@media(max-width:479px){.hours-list div{flex-direction:column;gap:.15rem}.hours-list dd{text-align:left}.info-card{padding:1.25rem}}

/* striscia di link correlati (fondo pagina) */
.link-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15)}
.link-strip a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--font-display);font-weight:600;font-size:.8125rem;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.28);border-radius:9999px;padding:.45rem .95rem;transition:background .2s ease,border-color .2s ease}
.link-strip a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}


.spec-link{min-height:44px}
.faq-q{min-height:56px}

/* =====================================================================
   HERO ALLINEATA AL SITO (stessa famiglia di .nozze-hero / .vv-hero)
   Struttura: section.page-hero > picture.page-hero-pic + .page-hero-overlay + .page-hero-content
   seguita da .info-bar e nav.bc (stessi blocchi di /viaggi-di-nozze).
   Leo: aggiungere .page-hero alle liste :is(.nozze-hero, .catalog-hero, .tour-hero, .avv-hero) del CSS condiviso page-has-hero
   (margin-top, min-height, padding-top del contenuto, overlay, regole mobile). Qui sotto ci sono gia gli equivalenti, scoped.
   ===================================================================== */
.page-hero{position:relative;display:flex;align-items:flex-end;background:#0f1822;color:#fff;overflow:hidden;min-height:34rem}
.page-hero-pic{position:absolute;inset:0;z-index:0;display:block}
.page-hero-pic img{width:100%;height:100%;object-fit:cover}
.page-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,24,34,.18) 0%,rgba(15,24,34,.46) 48%,rgba(15,24,34,.82) 100%)}
.page-hero-content{position:relative;z-index:5;width:100%;max-width:80rem;margin:0 auto;padding:7rem 1.35rem 4rem}
@media(min-width:768px){.page-hero-content{padding:12rem 2rem 4.5rem}}
.page-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#ffb0cb}
.page-kicker .material-symbols-outlined{font-size:1rem}
.page-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.85rem,5.2vw,3.5rem);line-height:1.08;letter-spacing:-.015em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35);margin:0 0 1rem;max-width:22ch;text-wrap:balance}
.page-h1 .accent{display:block;color:#ffb0cb}
.page-sub{font-family:var(--font-display);font-size:1rem;line-height:1.5;color:rgba(255,255,255,.92);margin:0 0 1.75rem;max-width:44rem}
@media(min-width:768px){.page-sub{font-size:1.1875rem}}
/* .page-snippet: non piu usato nelle hero istituzionali (sostituito da .page-answer sotto il breadcrumb) */
.page-snippet{max-width:38rem;margin:1.25rem 0;padding:1rem 1.125rem;background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);border-radius:.75rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.825rem;line-height:1.65}
.page-snippet strong{color:#fff}
.page-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:1.5rem}
@media(min-width:640px){.page-ctas{flex-direction:row;flex-wrap:wrap;align-items:center}}
.page-cta-primary{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.875rem 1.5rem;background:var(--pink);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1rem;border-radius:.75rem;transition:background .2s ease,transform .15s ease}
.page-cta-primary:hover{background:var(--pink-dark);transform:translateY(-1px)}
.page-cta-ghost{display:inline-flex;align-items:center;gap:.375rem;min-height:48px;padding:.875rem 1.25rem;background:rgba(255,255,255,.08);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.9375rem;border:1px solid rgba(255,255,255,.22);border-radius:.75rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s ease}
.page-cta-ghost:hover{background:rgba(255,255,255,.16)}
@media(max-width:560px){.page-cta-primary,.page-cta-ghost{width:100%;justify-content:center}}
body.page-has-hero main > .page-hero:first-child{margin-top:-1.5rem}
@media(min-width:768px){body.page-has-hero main > .page-hero:first-child{margin-top:-5rem;min-height:calc(76vh + 5rem)}}
@media(min-width:1024px){body.page-has-hero main > .page-hero:first-child{min-height:calc(80vh + 5rem)}}
@media(max-width:767px){body.page-has-hero main > .page-hero:first-child{min-height:calc(72vh + 1.5rem)}}

/* info-bar e breadcrumb: stessi blocchi di /viaggi-di-nozze (se il CSS e gia globale, eliminare questi duplicati) */
.info-bar{background:linear-gradient(135deg,#0f1822 0%,#1a1f2e 100%);padding:.85rem 1.25rem}
.info-bar-inner{max-width:80rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem}
@media(min-width:768px){.info-bar-inner{flex-direction:row;gap:1.5rem}}
.info-bar p{font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.78);text-align:center}
.info-bar p strong{color:#fff;font-weight:700}
.pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.audience-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .55rem;background:rgba(255,255,255,.04);color:#ffb0cb;border:1px solid rgba(255,176,203,.35);border-radius:9999px;font-family:var(--font-display);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
nav.bc{background:var(--page);padding:.875rem 1.25rem;font-size:.75rem;line-height:1.5;color:var(--muted)}
.bc-inner{max-width:80rem;margin:0 auto;display:flex;align-items:center;gap:.5rem;min-height:44px}
.bc-inner a{display:inline-flex;align-items:center;gap:.25rem;min-height:44px;color:var(--pink-dark);font-weight:600}
.bc-inner [aria-current]{color:var(--ink);font-weight:600}

/* form contatto SEMPLICE (pagina /contatti): niente campi viaggio */
.vv-contact-form{display:grid;gap:1rem;margin-top:1.25rem;background:#fff;border:1px solid var(--card-border);border-radius:1.25rem;box-shadow:var(--shadow);padding:1.5rem}
@media(min-width:768px){.vv-contact-form{padding:2rem}}
.vv-contact-form .row2{display:grid;gap:1rem}
@media(min-width:640px){.vv-contact-form .row2{grid-template-columns:1fr 1fr}}
.vv-contact-form label{display:block;font-family:var(--font-display);font-weight:700;font-size:.8125rem;margin-bottom:.35rem;color:var(--ink)}
.vv-contact-form label small{font-weight:500;color:var(--muted)}
.vv-contact-form input[type=text],.vv-contact-form input[type=email],.vv-contact-form input[type=tel],.vv-contact-form input[type=url],.vv-contact-form select,.vv-contact-form textarea{width:100%;min-height:48px;padding:.75rem .9rem;border:1px solid #868e9c;border-radius:.75rem;background:#fff;font:inherit;font-size:1rem;color:var(--ink)}
.vv-contact-form textarea{min-height:9rem;resize:vertical}
.vv-contact-form input:focus,.vv-contact-form select:focus,.vv-contact-form textarea:focus{outline:3px solid rgba(237,39,140,.35);outline-offset:1px;border-color:var(--pink)}
.vv-contact-form .consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.vv-contact-form .consent input{margin-top:.2rem;width:1.25rem;height:1.25rem;flex-shrink:0;accent-color:var(--pink)}
.vv-contact-form .consent a{color:var(--pink-dark);text-decoration:underline}
.vv-contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vv-contact-form .btn-send{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.875rem 1.75rem;background:var(--pink);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1rem;border-radius:.75rem;transition:background .2s ease}
.vv-contact-form .btn-send:hover{background:var(--pink-dark)}
.vv-contact-form .form-status{font-size:.875rem;min-height:1.25rem}
.quote-cta{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:.9063rem;color:var(--muted)}
.quote-cta a{color:var(--pink-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}


/* =====================================================================
   COMPONENTI v3 (ottobre 2026)
   ===================================================================== */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pink{color:var(--pink-dark)}
.audience-pill .material-symbols-outlined{font-size:.75rem}
.cs-section--tight{padding:2.5rem 0}
@media(min-width:768px){.cs-section--tight{padding:3rem 0}}
main [id]{scroll-margin-top:calc(var(--vg-header-h,5.5rem) + 1rem)}

/* hero /contatti piu bassa: la pagina deve arrivare subito ai canali */
body.page-has-hero main > .page-hero--compact:first-child{min-height:calc(62vh + 1.5rem)}
@media(min-width:768px){body.page-has-hero main > .page-hero--compact:first-child{min-height:calc(70vh + 5rem)}}

/* breadcrumb come lista ordinata (semantica corretta) */
ol.bc-inner{list-style:none;padding-left:1.25rem;padding-right:1.25rem;margin:0 auto}
nav.bc{padding-left:0;padding-right:0}
ol.bc-inner li{display:inline-flex;align-items:center;gap:.5rem}
ol.bc-inner li + li::before{content:"/";opacity:.5}
ol.bc-inner li[aria-current]{color:var(--ink);font-weight:600}
.bc-inner .material-symbols-outlined{font-size:.875rem}

/* risposta citabile (sotto la hero di /contatti) */
.page-answer{max-width:52rem;margin:0 auto 1.75rem;text-align:center;font-size:1rem;line-height:1.7;color:#26303f;text-wrap:pretty}
.page-answer strong{color:var(--ink)}

/* tile canali (/contatti) */
.quick-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:.625rem}
@media(min-width:640px){.quick-grid{grid-template-columns:1fr 1fr;gap:.75rem}}
@media(min-width:960px){.quick-grid{grid-template-columns:repeat(4,1fr);gap:1rem}}
.quick-tile{height:100%;display:flex;flex-direction:column;gap:.2rem;background:#fff;border:1px solid var(--card-border);border-radius:1.125rem;padding:1.125rem;box-shadow:var(--shadow);color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.quick-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:rgba(237,39,140,.35)}
.quick-tile:focus-visible{outline:3px solid rgba(237,39,140,.45);outline-offset:2px}
.quick-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.75rem;background:#fde9f0;color:var(--pink-dark);margin-bottom:.5rem}
.quick-icon--wa{background:#dcfce7;color:#15803d}
.quick-label{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.quick-value{font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}
.quick-hint{font-size:.8rem;line-height:1.45;color:var(--muted)}
@media(max-width:639px){
  .quick-tile{display:grid;grid-template-columns:auto 1fr;column-gap:.875rem;align-items:center;padding:.75rem 1rem;min-height:64px}
  .quick-icon{grid-row:span 2;margin:0}
  .quick-hint{display:none}
}

/* campi form: stati, aiuto, errori, contatore, esito */
.vv-contact-form .field{position:relative;min-width:0}
.field-help{font-size:.78rem;line-height:1.5;color:var(--muted);margin-top:.4rem}
.field-error{font-size:.8rem;line-height:1.45;color:#b42318;font-weight:600;margin-top:.4rem}
.vv-contact-form [aria-invalid="true"]{border-color:#b42318!important;background:#fff8f7}
.char-count{display:block;text-align:right;margin-top:.3rem;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.vv-contact-form input[type=file]{width:100%;min-height:48px;padding:.6rem;border:1px dashed rgba(20,27,43,.25);border-radius:.75rem;background:var(--page);font-size:.875rem}
.vv-contact-form input[type=file]::file-selector-button{margin-right:.75rem;padding:.5rem .9rem;border:0;border-radius:.6rem;background:var(--navy);color:#fff;font-weight:700;cursor:pointer}
.vv-contact-form .btn-send{width:100%;border:0;cursor:pointer}
@media(min-width:640px){.vv-contact-form .btn-send{width:auto;justify-self:start}}
.vv-contact-form .btn-send[disabled]{opacity:.7;cursor:progress}
.vv-contact-form .consent{cursor:pointer;margin:0;font-family:inherit;font-weight:400}
.form-alert{padding:.875rem 1rem;border-radius:.75rem;background:#fef3f2;color:#912018;font-size:.875rem;line-height:1.5}
.form-alert a{color:inherit;font-weight:700;text-decoration:underline}
.form-confirm,.form-done{display:flex;gap:.875rem;align-items:flex-start;margin-top:1.25rem;padding:1.5rem;border-radius:1.25rem;background:#ecfdf3;border:1px solid #abefc6;color:#05603a;font-size:.9375rem;line-height:1.6}
.form-confirm::before{content:"";flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:#12b76a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/1rem no-repeat}
.form-done .material-symbols-outlined{color:#12b76a;font-size:1.75rem}
.form-confirm:focus,.form-done:focus{outline:3px solid rgba(18,183,106,.4);outline-offset:2px}
.cf-turnstile{min-height:0}
.quote-cta{display:block;padding:1rem 1.125rem 1rem 3rem;position:relative;border-radius:1rem;background:#fdf2f7;color:#26303f;line-height:1.6}
.quote-cta > .material-symbols-outlined{position:absolute;left:1rem;top:1.05rem}
.quote-cta .material-symbols-outlined{color:var(--pink-dark)}

/* indirizzo */
.address-card .address-note{font-size:.85rem;color:var(--muted);margin:.75rem 0 1rem}
.address-card .btn-navy{color:#fff;min-height:44px}

/* link "altre esigenze" */
.mini-links{list-style:none;padding:0;margin:0 auto;max-width:64rem;display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.mini-links{grid-template-columns:1fr 1fr}}
.mini-links a{display:flex;gap:.875rem;align-items:center;min-height:64px;padding:.875rem 1.125rem;background:#fff;border:1px solid var(--card-border);border-radius:1rem;color:var(--muted);font-size:.85rem;line-height:1.4;transition:border-color .2s ease,box-shadow .2s ease}
.mini-links a:hover{border-color:rgba(237,39,140,.35);box-shadow:var(--shadow)}
.mini-links .material-symbols-outlined{flex-shrink:0;width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.75rem;background:#fde9f0;color:var(--pink-dark)}
.mini-links b{display:block;font-family:var(--font-display);color:var(--ink);font-size:.95rem}

/* liste semantiche con l'aspetto delle card esistenti */
ul.stat-card,ol.steps-grid,.principle-grid,.chip-grid{list-style:none;margin:0}
ul.stat-card{padding:1.75rem}
ol.steps-grid{padding:0}
.step-card h3{font-family:var(--font-display);font-weight:800;font-size:1rem;margin-bottom:.35rem}
.step-card p{font-size:.875rem;line-height:1.6;color:var(--muted)}
@media(min-width:1024px){.steps-grid--6{grid-template-columns:repeat(3,1fr)}}
.why-card h3,.principle-grid h3{font-family:var(--font-display);font-weight:800;font-size:1rem;margin-bottom:.35rem}
.why-card p{font-size:.875rem;line-height:1.6;color:var(--muted)}
@media(min-width:1024px){.why-grid--3{grid-template-columns:repeat(3,1fr)}}

/* certificazioni */
.cert-duo{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.25rem}
@media(min-width:900px){.cert-duo{grid-template-columns:1fr 1fr;gap:1.25rem}}
.cert-card{--c:#15803d;--c-bg:#dcfce7;display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid var(--card-border);border-top:3px solid var(--c);border-radius:1.25rem;box-shadow:var(--shadow);padding:1.5rem}
.cert-card--violet{--c:#6d28d9;--c-bg:#ede9fe}
.cert-card h3{font-family:var(--font-display);font-weight:800;font-size:1.0625rem}
.cert-card p{font-size:.9rem;line-height:1.65;color:#26303f}
.cert-card .spec-link{--accent:var(--c);color:var(--c);margin-top:.25rem}
.cert-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.875rem;background:var(--c-bg);color:var(--c);flex-shrink:0}
.cert-note{font-size:.8rem!important;color:var(--muted)!important}
@media(min-width:768px){.cert-card--wide{flex-direction:row;gap:1.5rem;padding:2.25rem 2.5rem}}

/* dati societari a scomparsa */
.legal-details > summary{display:flex;align-items:center;gap:.6rem;min-height:56px;padding:1rem 1.5rem;cursor:pointer;font-family:var(--font-display);font-weight:800;list-style:none}
.legal-details > summary::-webkit-details-marker{display:none}
.legal-details > summary::after{content:"+";margin-left:auto;font-size:1.25rem;color:var(--pink-dark)}
.legal-details[open] > summary::after{content:"-"}
.legal-details > summary .material-symbols-outlined{color:var(--pink-dark)}
.legal-details dl{border-top:1px solid rgba(20,27,43,.06)}
.legal-row dt{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legal-row dd{font-size:.9rem;color:var(--ink)}
.legal-row a{color:var(--pink-dark);font-weight:600}
@media(min-width:768px){.legal-row{flex-direction:row;align-items:baseline}.legal-row dt{flex:0 0 15rem}}

.role-icon{flex-shrink:0;width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.75rem;background:#fde9f0;color:var(--pink-dark)}
.fact-grid{max-width:56rem;margin:1.5rem auto 0;display:grid;grid-template-columns:1fr;gap:.625rem}
@media(min-width:640px){.fact-grid{grid-template-columns:1fr 1fr}}
.fact-grid > div{padding:1rem 1.125rem;border-radius:1rem;background:var(--page);border:1px solid var(--card-border)}
.fact-grid dt{display:flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:800;font-size:.9rem;margin-bottom:.25rem}
.fact-grid dt .material-symbols-outlined{color:var(--pink-dark);font-size:1.1rem}
.fact-grid dd{font-size:.85rem;line-height:1.55;color:var(--muted)}

/* partner */
.partner-box{max-width:64rem;margin:0 auto;padding:1.5rem;border-radius:1.5rem;background:linear-gradient(135deg,#f3f6fc 0%,#fdf2f7 100%);border:1px solid var(--card-border)}
@media(min-width:768px){.partner-box{padding:2.5rem}}
.chip-grid{padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.chip-grid li{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .875rem;border-radius:9999px;background:#fff;border:1px solid var(--card-border);font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--ink)}
.chip-grid .material-symbols-outlined{font-size:1.05rem;color:var(--navy)}
.more-box{margin-bottom:1.25rem;background:#fff;border:1px solid var(--card-border);border-radius:1rem}
.more-box > summary{min-height:52px;display:flex;align-items:center;padding:.75rem 1.125rem;cursor:pointer;font-family:var(--font-display);font-weight:800;list-style:none}
.more-box > summary::-webkit-details-marker{display:none}
.more-box > summary::after{content:"+";margin-left:auto;font-size:1.25rem;color:var(--pink-dark)}
.more-box[open] > summary::after{content:"-"}
.more-box p{padding:0 1.125rem 1rem;font-size:.875rem;line-height:1.65;color:#26303f}
.partner-box .btn-navy{min-height:48px}

/* principi parita */
.principle-grid{padding:0;display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.principle-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.principle-grid{grid-template-columns:repeat(5,1fr);gap:1rem}}
.principle-grid li{background:#fff;border:1px solid var(--card-border);border-radius:1.125rem;padding:1.25rem;box-shadow:var(--shadow)}
.principle-grid p{font-size:.85rem;line-height:1.55;color:var(--muted)}
@media(max-width:639px){.principle-grid li{display:grid;grid-template-columns:auto 1fr;column-gap:.875rem}.principle-grid .why-icon{grid-row:span 2;margin:0}}
.report-cta{margin-top:1.75rem;display:flex;flex-direction:column;align-items:center;gap:.875rem;text-align:center}
.report-cta p{font-size:.875rem;color:var(--muted);max-width:40rem}
.report-cta a:not(.btn-primary){color:var(--pink-dark);font-weight:600;overflow-wrap:anywhere}

/* WhatsApp: verde piu scuro per il contrasto AA del testo bianco (4.5:1). Leo: valutare lo stesso valore nel CSS globale */
.cta-final .btn-wa{background:#15803d}
.cta-final .btn-wa:hover{background:#166534}

/* Contrasto AA (4.5:1) per testo bianco su rosa: #DB1F7C e quasi identico a #ED278C a occhio, ma passa (4.67 contro 3.98).
   Leo: proposta di usarlo per tutti i pulsanti rosa del sito (variabile --pink-btn). */
:root{--pink-btn:#DB1F7C}
.page-cta-primary,.vv-contact-form .btn-send,.cta-final .btn-primary,.report-cta .btn-primary{background:var(--pink-btn)}
.page-cta-primary:hover,.vv-contact-form .btn-send:hover,.cta-final .btn-primary:hover,.report-cta .btn-primary:hover{background:var(--pink-dark)}
.spec-card .spec-link{color:color-mix(in srgb,var(--accent) 78%,#000)}

/* mobile: card compatte con icona a sinistra (pagine piu corte, stessa grafica) */
@media(max-width:639px){
  .why-card,.people-card,.spec-card{display:grid;grid-template-columns:auto 1fr;column-gap:.875rem;row-gap:.25rem;align-items:start;padding:1.125rem}
  .why-card > .why-icon,.people-card > .why-icon,.spec-card > .spec-icon{grid-row:span 3;margin:0}
  .why-card > *:not(.why-icon),.people-card > *:not(.why-icon),.spec-card > *:not(.spec-icon){grid-column:2}
  .step-card{padding:1rem 1rem 1rem 3.5rem}
  .step-card::before{position:absolute;left:1rem;top:.95rem;font-size:1.35rem;margin:0;line-height:1}
}

/* =====================================================================
   v4: confronto, modulo breve chi siamo, garanzie, ruoli a card
   ===================================================================== */
/* confronto "portale self-service" vs Vagovia (tabella ARIA, impilata su mobile) */
.compare{max-width:60rem;margin:0 auto;border:1px solid var(--card-border);border-radius:1.25rem;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.compare-head,.compare-row{display:grid;grid-template-columns:1fr 1fr 1.2fr}
.compare-head span{padding:.875rem 1.125rem;font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--page)}
.compare-head span:last-child{background:var(--navy);color:#fff}
.compare-row span{padding:.95rem 1.125rem;font-size:.9rem;line-height:1.5;border-top:1px solid rgba(20,27,43,.07);color:#26303f}
.compare-row span:first-child{font-family:var(--font-display);font-weight:800;color:var(--ink)}
.compare-row span:last-child{background:#f3f6fc;font-weight:600;color:var(--navy)}
@media(max-width:699px){
  .compare-head{display:none}
  .compare-row{grid-template-columns:1fr 1.3fr;padding:.25rem 0}
  .compare-row span:first-child{grid-column:1/-1;padding-bottom:.25rem;border-top:1px solid rgba(20,27,43,.07)}
  .compare-row:first-of-type span:first-child{border-top:0}
  .compare-row span:not(:first-child){border-top:0;font-size:.85rem;padding-top:.35rem}
  .compare-row span:nth-child(2)::before{content:"Portale";display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
  .compare-row span:nth-child(3)::before{content:"Vagovia Viaggi";display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-dark);margin-bottom:.15rem}
  .compare-row span:nth-child(3){border-radius:.75rem;margin:0 .5rem .5rem 0}
}

/* banda "Scrivici" in /chi-siamo */
.write-band{background:linear-gradient(135deg,#0f2c55 0%,#164383 60%,#3b2a6b 100%);color:#fff}
.write-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media(min-width:960px){.write-grid{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}}
.write-intro .eyebrow{color:#ffb0cb}
.write-intro .h2{color:#fff}
.write-intro .h2 em{color:#ffb0cb}
.write-intro .lead{color:rgba(255,255,255,.88)}
.write-points{list-style:none;padding:0;margin:1.25rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.write-points li{display:flex;gap:.5rem;align-items:center;font-size:.95rem;color:#fff}
.write-points .material-symbols-outlined{color:#6ee7b7;font-size:1.25rem}
.write-alt{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.5rem}
.write-alt-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.7rem 1.1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.35);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.9rem;background:rgba(255,255,255,.06)}
.write-alt-btn:hover{background:rgba(255,255,255,.14)}
.write-alt-btn--wa{background:#15803d;border-color:#15803d}
.write-alt-btn--wa:hover{background:#166534}
.write-form .vv-contact-form{margin-top:0;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.write-form .form-done,.write-form .form-confirm{margin-top:0}
.vv-contact-form--short textarea{min-height:7rem}

/* tre garanzie */
.guarantee-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin-bottom:1.25rem}
@media(min-width:768px){.guarantee-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
.guarantee{display:flex;gap:.875rem;align-items:flex-start;background:#fff;border:1px solid var(--card-border);border-radius:1.125rem;padding:1.125rem 1.25rem;box-shadow:var(--shadow)}
.guarantee > .material-symbols-outlined{flex-shrink:0;width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.75rem;background:#e8eef8;color:var(--navy)}
.guarantee h3{font-family:var(--font-display);font-weight:800;font-size:.98rem;margin-bottom:.2rem}
.guarantee p{font-size:.85rem;line-height:1.55;color:var(--muted)}

/* ruoli a card */
.role-grid{display:grid;grid-template-columns:1fr;gap:.875rem}
@media(min-width:720px){.role-grid{grid-template-columns:1fr 1fr}}
.role-card{display:flex;flex-direction:column;gap:.75rem;background:#fff;border:1px solid var(--card-border);border-radius:1.125rem;padding:1.25rem;box-shadow:var(--shadow)}
.role-top{display:flex;gap:.75rem;align-items:center}
.role-icon{flex-shrink:0;width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.75rem;background:#fde9f0;color:var(--pink-dark)}
.role-card h3{font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1.3}
.role-dl{display:flex;flex-direction:column;gap:.5rem;flex:1}
.role-dl dt{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.role-dl dd{font-size:.875rem;line-height:1.55;color:#26303f}
.role-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--pink-dark);font-family:var(--font-display);font-weight:800}
.network-line{display:flex;gap:.75rem;align-items:flex-start;max-width:60rem;margin:0 auto 1.25rem;padding:1rem 1.25rem;border-radius:1rem;background:#f3f6fc;border:1px solid var(--card-border);font-size:.9rem;line-height:1.6;color:#26303f}
.network-line .material-symbols-outlined{color:var(--navy);flex-shrink:0;margin-top:.1rem}
/* parita + segnalazioni nella stessa pagina */
#segnala{padding-bottom:1rem}
#segnala + #modulo,#segnala ~ #modulo{padding-top:1.5rem}
@media(min-width:1024px){.principle-grid--6{grid-template-columns:repeat(3,1fr)}}
.doc-link{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1.25rem 0 .5rem}
.doc-link .btn-navy{min-height:48px;color:#fff}
.doc-meta{font-size:.8rem;color:var(--muted)}
.cert-card--blue{--c:#164383;--c-bg:#e8eef8}
@media(min-width:1100px){.cert-duo{grid-template-columns:repeat(3,1fr)}}

/* banda "I nostri viaggi": porta chi arriva da /chi-siamo e /contatti verso home, offerte e preventivo */
.shop-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:.875rem}
@media(min-width:768px){.shop-grid{grid-template-columns:repeat(3,1fr);gap:1.125rem}}
.shop-tile{height:100%;display:flex;flex-direction:column;gap:.4rem;background:#fff;border:1px solid var(--card-border);border-radius:1.25rem;padding:1.375rem;box-shadow:var(--shadow);color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.shop-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:rgba(237,39,140,.35)}
.shop-tile:focus-visible{outline:3px solid rgba(237,39,140,.45);outline-offset:2px}
.shop-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.875rem;background:#fde9f0;color:var(--pink-dark);margin-bottom:.35rem}
.shop-title{font-family:var(--font-display);font-weight:800;font-size:1.0625rem}
.shop-text{font-size:.875rem;line-height:1.55;color:var(--muted);flex:1}
.shop-go{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;font-family:var(--font-display);font-weight:800;font-size:.9rem;color:var(--pink-dark)}
.shop-more{text-align:center;margin-top:1.75rem}
.shop-more .btn-primary{background:var(--pink-btn,#DB1F7C);color:#fff}
.shop-more .btn-primary:hover{background:var(--pink-dark)}
@media(max-width:639px){.shop-tile{display:grid;grid-template-columns:auto 1fr;column-gap:.875rem;padding:1.125rem}.shop-icon{grid-row:span 3;margin:0}.shop-tile > *:not(.shop-icon){grid-column:2}.shop-more .btn-primary{width:100%;justify-content:center}}

/* Welcome Travel Network: logo in negativo su fondo scuro */
.network-band{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:60rem;margin:0 auto 1.25rem;padding:1.5rem;border-radius:1.25rem;background:linear-gradient(135deg,#0f2c55 0%,#164383 100%);color:rgba(255,255,255,.88);font-size:.92rem;line-height:1.6}
.network-band img{display:block;width:160px;height:40px}
.network-band strong{color:#fff}
.network-btn{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.6rem 1.1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.4);color:#fff;font-family:var(--font-display);font-weight:700;white-space:nowrap}
.network-btn:hover{background:rgba(255,255,255,.12)}
@media(min-width:768px){.network-band{flex-direction:row;align-items:center;gap:1.5rem;padding:1.5rem 2rem}.network-band p{flex:1}}