:root {
    --cream: #FDFAF5;
    --sand: #F7F3ED;
    --line: #E4DACB;
    --brown: #5C5548;
    --muted: #6E665A;
    --ink: #1A1A1A;
    --yellow: #FFD91F;
    --yellow-deep: #F2C900;
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --wrap: 1120px
}

* {
    box-sizing: border-box
}

.diretta-content section,
section.bar {
    background: transparent;
}

html {
    -webkit-text-size-adjust: 100%
}

body.diretta-iscrizione {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65
}

.diretta-iscrizione .diretta-content {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent
}

.diretta-iscrizione .bar, .diretta-iscrizione .hero, .diretta-iscrizione .story, .diretta-iscrizione .devi, .diretta-iscrizione .late, .diretta-iscrizione .legal {
    float: none;
    clear: both;
    width: 100%
}

.diretta-iscrizione img {
    max-width: 100%;
    display: block
}

.diretta-iscrizione a {
    color: var(--brown);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
}

.diretta-iscrizione .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px
}

.diretta-iscrizione .bar {
    padding: 22px 0 8px
}

.diretta-iscrizione .bar img {
    height: 62px;
    width: auto
}

.diretta-iscrizione .hero {
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    gap: 56px;
    align-items: start;
    padding-top: 28px;
    padding-bottom: 64px
}

.diretta-iscrizione .kicker {
    margin: 0 0 18px;
    font-size: .95rem;
    color: var(--brown);
    font-weight: 500
}

.diretta-iscrizione h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2.25rem, 5.1vw, 3.85rem);
    line-height: 1.08;
    letter-spacing: -.012em;
    margin: 0;
    text-wrap: balance
}

.diretta-iscrizione .sub {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 26px 0 0;
    max-width: 32em
}

.diretta-iscrizione .days {
    display: grid;
    grid-template-columns: repeat(28, 1fr);
    gap: 4px;
    max-width: 520px;
    height: 12px;
    margin: 30px 0 0
}

.diretta-iscrizione .days i {
    display: block;
    border-radius: 1px;
    background: var(--brown);
    transform-origin: bottom
}

.diretta-iscrizione .days i:nth-child(n+15) {
    opacity: .34
}

.diretta-iscrizione .days i:nth-child(n+16) {
    opacity: .16
}

.diretta-iscrizione .days i:nth-child(n+17) {
    opacity: .07
}

@media (prefers-reduced-motion:no-preference) {
    .diretta-iscrizione .days i {
        animation: diretta-rise .5s cubic-bezier(.2, .7, .2, 1) both
    }

    .diretta-iscrizione .days i:nth-child(n+15) {
        animation-name: diretta-fade
    }
}

@keyframes diretta-rise {
    from {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1)
    }
}

@keyframes diretta-fade {
    from {
        opacity: 0
    }
}

.diretta-iscrizione .card {
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 30px 28px 24px;
    position: sticky;
    top: 24px
}

.diretta-iscrizione .when {
    font-family: var(--serif) !important;
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0;
}

.diretta-iscrizione .where {
    margin: 8px 0 22px;
    color: var(--muted);
    font-size: .97rem;
    line-height: 1.5
}

.diretta-iscrizione label {
    display: block;
    font-size: .88rem;
    font-weight: 500;
    margin: 0 0 6px
}

.diretta-iscrizione input {
    width: 100%;
    height: 50px;
    border: 1px solid #D6CBB9;
    border-radius: 4px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: var(--ink);
    margin: 0 0 14px
}

.diretta-iscrizione input:focus {
    outline: 2px solid var(--brown);
    outline-offset: 1px;
    border-color: var(--brown)
}

.diretta-iscrizione .btn {
    display: block;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 4px;
    background: var(--yellow);
    color: var(--ink);
    font: 600 1.06rem/1 var(--sans);
    cursor: pointer;
    margin-top: 4px
}

.diretta-iscrizione .btn:hover {
    background: var(--yellow-deep)
}

.diretta-iscrizione .btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px
}

.diretta-iscrizione .btn[disabled] {
    cursor: wait;
    opacity: .7
}

.diretta-iscrizione .consent {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 14px 0 0
}

.diretta-iscrizione .form-message {
    min-height: 1.5em;
    margin: 10px 0 0;
    font-size: .82rem;
    color: #9c2d22
}

.diretta-iscrizione .story {
    padding-top: 8px;
    padding-bottom: 56px
}

.diretta-iscrizione .story-in {
    max-width: 680px
}

.diretta-iscrizione .voice {
    font-family: var(--serif) !important;
    font-size: 1.5rem;
    line-height: 1.55;
    margin: 0 0 22px;
    font-weight: bold;
}

.diretta-iscrizione .story p {
    margin: 0 0 18px
}

.diretta-iscrizione h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 40px 0 18px
}

.diretta-iscrizione ul.learn {
    list-style: none;
    margin: 0 0 24px;
    padding: 0
}

.diretta-iscrizione ul.learn li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 14px
}

.diretta-iscrizione ul.learn li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .8em;
    width: 16px;
    height: 2px;
    background: var(--brown)
}

.diretta-iscrizione .next {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    color: var(--muted)
}

.diretta-iscrizione .devi {
    background: var(--sand);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.diretta-iscrizione .devi .wrap {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 56px
}

.diretta-iscrizione .photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 4px;
    background: #E9E1D4
}

.diretta-iscrizione .devi h2 {
    margin-top: 0
}

.diretta-iscrizione .devi p {
    margin: 0 0 16px;
    max-width: 36em
}

.diretta-iscrizione .late {
    padding-top: 64px;
    padding-bottom: 72px
}

.diretta-iscrizione .late h2 {
    margin-top: 0
}

.diretta-iscrizione .late>p {
    max-width: 36em;
    margin: 0 0 26px
}

.diretta-iscrizione .inline {
    display: grid;
    grid-template-columns: 1fr 1.3fr auto;
    gap: 12px;
    align-items: end;
    max-width: 880px
}

.diretta-iscrizione .inline input {
    margin: 0
}

.diretta-iscrizione .inline .btn {
    width: auto;
    padding: 0 28px;
    margin: 0;
    white-space: nowrap
}

.diretta-iscrizione .late .consent {
    max-width: 880px;
    margin-top: 12px
}

.diretta-iscrizione .legal {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    border-top: 1px solid var(--line);
    padding: 26px 0 40px;
    font-size: .85rem;
    color: var(--muted);
    background: transparent
}

.diretta-iscrizione .legal a {
    margin-right: 18px
}

@media (max-width:900px) {
    .diretta-iscrizione .hero {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 48px
    }

    .diretta-iscrizione .card {
        position: static
    }

    .diretta-iscrizione .devi .wrap {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .diretta-iscrizione .photo {
        max-width: 280px
    }

    .diretta-iscrizione .inline {
        grid-template-columns: 1fr
    }

    .diretta-iscrizione .inline .btn {
        width: 100%
    }
}

@media (max-width:520px) {
    body.diretta-iscrizione {
        font-size: 16px
    }

    .diretta-iscrizione .bar img {
        height: 54px
    }

    .diretta-iscrizione .voice {
        font-size: 1.3rem
    }

    .diretta-iscrizione .card {
        padding: 24px 20px 20px
    }
}