:root {
    --navy: #252535;
    --navy-hover: #1f1f2d;
    --lime: #c8d400;
    --lime-soft: #e6f6d2;
    --grey: #f3f3f3;
    --blue: #d6e5f2;
    --line: #d6d6d6;
    --muted: #56586f;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0px; font: 400 0.9375rem/1.5 "Open Sans", Arial, sans-serif; color: #212529; background: #FFF; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3, h4 { font-family: Outfit, Arial, sans-serif; line-height: 1.2; margin: 0px 0 1rem; color: var(--navy); }
h1 { font-size: 1.9375rem; font-weight: 400; }
h2 { font-size: 1.5625rem; font-weight: 400; }
h3 { font-size: 1.1875rem; font-weight: 700; }
p { margin: 0px 0 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0px 0px 0); }
.container { width: 100%; max-width: 1095px; margin: 0px auto; padding: 0px 0.9375rem; }
.row { display: flex; flex-wrap: wrap; margin: 0px -0.9375rem; }
.row > [class*="col"] { padding: 0px 0.9375rem; width: 100%; min-width: 0px; }
.text-center { text-align: center; }
.section { padding: 2.5rem 0px; }
.section--grey { background: var(--grey); }
.section--blue { background: var(--blue); }
.kicker { font-size: 1rem; margin-bottom: 0.5rem; }

/* testata con la pillola bianca */
.site-header { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 30; height: 80px; padding-top: 10px; }
.pillola-nav { display: flex; align-items: center; gap: 1rem; min-height: 60px; padding: 8px 8px 8px 18px; background: #FFF; border-radius: 8px; box-shadow: 0px 0 40px rgba(74, 98, 120, 0.2); }
.pillola-nav__logo img { width: 170px; height: auto; }
.pillola-nav__links { display: none; }
.pillola-nav__links a { font: 400 1rem/1.1 Outfit, Arial, sans-serif; color: var(--navy); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.15s ease-in-out; padding: 0.75rem 0px; display: inline-block; }
.pillola-nav__links a:hover { text-decoration-color: var(--lime); }
.con-tendina { position: relative; display: inline-block; }
.tendina { position: absolute; top: 100%; left: -1rem; min-width: 260px; background: #FFF; border-radius: 8px; padding: 0.5rem 1rem; filter: drop-shadow(0 0.5rem 1.5rem rgba(74, 98, 120, 0.25)); display: none; }
.tendina a { display: block; padding: 0.5rem 0px; }
.con-tendina:hover .tendina, .con-tendina:focus-within .tendina { display: block; }
.chip-login { margin-left: auto; background: var(--lime-soft); color: var(--navy); border-radius: 3px; padding: 10px 14px; text-decoration: none; font-weight: 700; font-size: 0.875rem; }
.burger { width: 44px; height: 44px; border: 0px; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; }
.burger i { display: block; height: 2px; background: var(--navy); }
.pannello-mobile { position: fixed; inset: 0px; top: 80px; background: #F6F7F9; padding: 1.5rem; display: flex; flex-direction: column; animation: scivola 0.4s cubic-bezier(.22,1,.36,1); }
.pannello-mobile[hidden] { display: none; }
@keyframes scivola { from { transform: translateX(100%); } to { transform: none; } }
.pannello-mobile a { font: 700 1.25rem Outfit, Arial, sans-serif; color: var(--navy); text-decoration: none; padding: 0.875rem 0px; border-bottom: 1px solid var(--line); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* bottoni con la riga lime sotto */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px; padding: 15px 20px; font: 700 0.9375rem/1 "Open Sans", Arial, sans-serif; text-decoration: none; border: 0px; cursor: pointer; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.btn--navy { background: var(--navy); color: #FFF; }
.btn--navy::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 3px; background: var(--lime); }
.btn--navy:hover { background: var(--navy-hover); }
.btn--outline { background: transparent; color: var(--navy); box-shadow: inset 0px 0px 0 2px var(--navy); }
.btn--outline:hover { background: var(--navy); color: #FFF; }
.btn--block { width: 100%; margin-top: auto; }
.btn--sm { padding: 10px 14px; font-size: 0.8125rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* hero */
.hero { position: relative; height: 420px; overflow: hidden; }
.hero__img { width: 100vw; height: 100%; object-fit: cover; }
.badge-sticker { position: absolute; right: 6%; bottom: 24px; width: 150px; height: 150px; border-radius: 50%; background: var(--navy); box-shadow: 0px 0px 0px 4px #FFF, 0px 0px 0 7px var(--lime); display: flex; align-items: center; justify-content: center; text-align: center; color: #FFF; font: 700 1.125rem/1.2 Outfit, Arial, sans-serif; transform: rotate(-8deg); }

/* striscia con le spunte */
.usp-strip { border-bottom: 2px solid var(--line); }
.usp-strip__list { list-style: none; margin: 0px; padding: 1.25rem 0px; display: flex; flex-direction: column; gap: 0.5rem; font-weight: 700; }
.usp-strip__list li::before { content: "✓"; color: #6F7A00; margin-right: 0.5rem; }

.intro__lead { max-width: 1065px; }

/* carte gemelle */
.twin { row-gap: 1rem; }
.info-card { background: #FFF; border-radius: 3px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); padding: 0px 1.5rem 1.5rem; height: 100%; display: flex; flex-direction: column; }
.info-card__img { margin: 0px -1.5rem 1.25rem; width: calc(100% + 3rem); max-width: none; height: 200px; object-fit: cover; border-radius: 3px 3px 0 0px; }
.info-card__title { font-size: 1.375rem; }
.info-card__row { display: flex; gap: 14px; padding: 14px 0px; border-top: 1px solid var(--line); }
.info-card__row svg { flex: none; }
.info-card__row b { display: block; }
.info-card__row:last-of-type { margin-bottom: 1.25rem; }

/* ritratti */
.ritratti { margin-top: 2rem; row-gap: 2rem; text-align: left; }
.ritratti img { border-radius: 3px; aspect-ratio: 59 / 86; object-fit: cover; width: 100%; margin-bottom: 1rem; }

/* fascia azzurra */
.badge-row { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin: 1.5rem 0 2rem; }
.cerchio { width: 160px; height: 160px; border-radius: 50%; background: #FFF; border: 2px solid var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cerchio b { font: 700 1.125rem Outfit, Arial, sans-serif; }
.cerchio small { color: var(--muted); }
.cerchio--pieno { background: var(--navy); color: #FFF; }
.cerchio--pieno small { color: #DFE2E8; }

/* slider su striscia lime */
.slider-section .container { position: relative; }
.slider-section .container::before { content: ""; position: absolute; left: 50%; bottom: -2.5rem; width: 100vw; height: 50%; transform: translateX(-50%); background: var(--lime-soft); z-index: -1; }
.slider-section { position: relative; z-index: 0; }
.slider-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.slider-arrows { display: flex; gap: 8px; }
.slider-arrow { width: 48px; height: 48px; border-radius: 3px; border: 0px; background: var(--navy); color: #FFF; font-size: 1.5rem; cursor: pointer; }
.slider-track { display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 1rem; }
.slider-track::-webkit-scrollbar { display: none; }
.slide-card { flex: 0 0 85%; scroll-snap-align: start; background: #F6F7F9; border-radius: 3px; overflow: hidden; padding-bottom: 1rem; }
.slide-card img { aspect-ratio: 9 / 5; object-fit: cover; width: 100%; margin-bottom: 1rem; }
.slide-card h3, .slide-card p { padding: 0px 1rem; }

/* tasselli */
.avvertenze { row-gap: 1rem; margin-top: 1.5rem; }
.avvertenza { display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--navy); padding-top: 12px !important; }
.avvertenza b { font: 700 1.1875rem Outfit, Arial, sans-serif; color: var(--navy); }
.avvertenza--nota { border-top-color: var(--lime); }

.h3-bold { font-size: 1.375rem; font-weight: 700; }
.wide-img { max-width: 1245px; margin: 1.5rem auto 0px; padding: 0px 0.9375rem; }
.wide-img img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; border-radius: 3px; }

/* passi */
.arrow-link { text-decoration: none; font-weight: 700; }
.arrow-link:hover { text-decoration: underline; }
.steps .row { row-gap: 1rem; margin-top: 1rem; }
.step-card { border: 1px solid #DDE1EA; border-radius: 3px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; height: 100%; }

/* domande a schede */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.tab { border: 0px; border-radius: 3px; padding: 10px 16px; background: #FFF; box-shadow: inset 0px 0px 0 2px var(--navy); color: var(--navy); font: 700 0.9375rem "Open Sans", Arial, sans-serif; cursor: pointer; min-height: 44px; }
.tab.is-active { background: var(--navy); color: #FFF; }
.tab-panel details { border-bottom: 1px solid var(--line); }
.tab-panel summary { list-style: none; cursor: pointer; padding: 27px 40px 27px 0px; font: 700 1rem Outfit, Arial, sans-serif; position: relative; }
.tab-panel summary::-webkit-details-marker { display: none; }
.tab-panel summary::after { content: "+"; position: absolute; right: 4px; top: 22px; font: 300 1.5rem Outfit, Arial, sans-serif; }
.tab-panel details[open] summary::after { content: "−"; }
.tab-panel details p { padding-bottom: 1rem; }

/* piede */
.fondo-blu { background: var(--navy); color: #FFF; padding: 3rem 0 1.5rem; border-top: 1px solid var(--muted); }
.fondo-blu .row { row-gap: 2rem; }
.fondo-blu__h { font: 700 1rem Outfit, Arial, sans-serif; margin-bottom: 1rem; position: relative; padding-bottom: 0.5rem; }
.fondo-blu__h::after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 40%; height: 1px; background: var(--lime); }
.fondo-blu a, .fondo-blu span { display: block; color: #FFF; text-decoration: none; margin-bottom: 20px; overflow-wrap: anywhere; }
.fondo-blu a:hover { text-decoration: underline; }
.fondo-blu__copy { border-top: 1px solid var(--muted); margin-top: 2rem; padding-top: 1rem; font-size: 0.875rem; }
.link-btn { background: none; border: 0px; color: #FFF; text-decoration: underline; cursor: pointer; font: inherit; padding: 0px; min-height: 24px; }

/* cookie in angolo */
.cookie-angolo { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 50; background: #FFF; border-radius: 8px; padding: 1.25rem; box-shadow: 0px 0 40px rgba(74, 98, 120, 0.3); }
.cookie-angolo[hidden] { display: none; }
.cookie-angolo__check { display: flex; gap: 8px; align-items: center; margin-bottom: 0.75rem; }
.cookie-angolo__btns { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 36rem) {
    .slide-card { flex-basis: 48%; }
    .cookie-angolo { left: auto; max-width: 420px; }
}
@media (min-width: 48rem) {
    .usp-strip__list { flex-direction: row; justify-content: space-around; text-align: center; }
    .badge-row { flex-direction: row; justify-content: center; }
    .hero { height: 520px; }
    .badge-sticker { width: 200px; height: 200px; font-size: 1.375rem; }
}
@media (min-width: 62rem) {
    .section { padding: 3.75rem 0px; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.75rem; }
    .container { padding: 0px 1.875rem; }
    .pillola-nav__links { display: flex; gap: 1.75rem; margin-left: 2rem; }
    .burger { display: none; }
    .hero { height: 585px; }
    .col-lg-6 { width: 50% !important; }
    .col-lg-4 { width: 33.333% !important; }
    .col-lg-3 { width: 25% !important; }
    .avvertenze .col { width: 20% !important; }
    .ritratti { column-gap: 0px; }
    .slide-card { flex-basis: 32%; }
    /* old: padding-top: 48px; */
    .steps { padding-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* sottopagine */
.page-top { padding: 120px 0 2.5rem; }
.page-top h1 { margin-bottom: 0.75rem; }
.align-row { align-items: center; row-gap: 1.5rem; }
.foto-arr { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; border-radius: 3px; }
.foto-larga { margin: 2rem 0px; }
.foto-larga img { width: 100%; aspect-ratio: 7 / 3; object-fit: cover; border-radius: 3px; }
.foto-larga figcaption { font-size: 0.875rem; color: var(--muted); margin-top: 0.5rem; }
.legale-testo { max-width: 900px; }
.legale-testo h3 { margin: 2rem 0 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.legale-testo h3:first-child { margin-top: 0px; }
.modulo-box { background: var(--grey); border-radius: 3px; padding: 2rem 1.5rem; max-width: 720px; margin-bottom: 3rem; }
.passi-segno { list-style: none; padding: 0px; margin: 0px 0 1.5rem; display: flex; gap: 0.5rem; counter-reset: p; }
.passi-segno li { counter-increment: p; flex: 1; padding-top: 0.5rem; border-top: 3px solid var(--line); font-weight: 700; font-size: 0.875rem; }
.passi-segno li::before { content: counter(p) ". "; }
.passi-segno li.attivo { border-top-color: var(--lime); }
.passo { border: 0px; padding: 0px; margin: 0px; }
.passo legend { font: 400 1.375rem Outfit, Arial, sans-serif; color: var(--navy); margin-bottom: 1rem; padding: 0px; }
.campo-v { display: block; font-weight: 700; margin: 0.75rem 0 0.375rem; }
.passo input[type="text"], .passo input[type="email"], .passo select { width: 100%; height: 48px; border: 1px solid #DDE1EA; border-radius: 3px; padding: 0.5rem 0.75rem; font: 400 1rem "Open Sans", Arial, sans-serif; background: #FFF; }
.passo input:invalid:not(:placeholder-shown) { border-color: #B3261E; }
.scelte { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.scelte label { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 36px; }
.consenso-v { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0px; }
.consenso-v input { margin-top: 3px; }
.nascosto { position: absolute; left: -9999px; }
.passo .btn-row { margin-top: 1.25rem; }
.tre-passi__esito { margin: 1rem 0 0px; font-weight: 700; min-height: 1.5em; }
.dopo-modulo { margin-top: 1rem; }
.intro h1 { font-size: clamp(1.9375rem, 1.2rem + 2vw, 2.5rem); text-wrap: balance; }
.intro__lead, .info-card p { text-wrap: pretty; }
.passi-num { list-style: none; counter-reset: n; padding: 0px; margin: 1.5rem 0 0px; display: grid; gap: 1rem; }
.passi-num li { counter-increment: n; border: 1px solid #DDE1EA; border-radius: 3px; padding: 18px 20px 18px 64px; position: relative; display: flex; flex-direction: column; gap: 4px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.06); }
.passi-num li::before { content: counter(n); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: #252535; color: #FFF; display: grid; place-items: center; font: 700 1rem Outfit, Arial, sans-serif; }
.fondo-blu a, .fondo-blu span { min-height: 24px; }
.dropdown-menu a, .tendina a { min-height: 32px; }
@media (min-width: 62rem) { .passi-num { grid-template-columns: repeat(3, 1fr); } }

/* fogli dell'anno */
.fogli-anno { padding: 3.5rem 0px 3rem; }
.fogli-anno-intro { max-width: 38rem; color: var(--muted); }
.fogli-anno-riga { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.fogli-anno-voce { border-left: 4px solid var(--lime); background: var(--grey); padding: 1.25rem 1.25rem 0.75rem; }
.fogli-anno-quando { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0.75rem 0px 0.25rem; }
.fogli-anno-voce h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
@media (min-width: 48rem) {
    .fogli-anno-riga { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
}