/* Display/heading font: the real Acumin Variable Concept (variable font,
   wght 100–900). Served as woff2 with a woff fallback. */
@font-face {
  font-family: 'Acumin Variable Concept';
  src: url('/fonts/acumin.woff2') format('woff2'),
       url('/fonts/acumin.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Desanidado de &.fixed */
.lancio-header.fixed {
    top: -42px;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .lancio-header.fixed {
        top: -62px;
    }
}

/* Desanidado de .lancio-container */

/* Desanidado de las listas de navegación */

.lancio-header--nav nav ul li a.active {
    font-weight: 700;
}

/* Selector de idiomas */
.lancio-header--nav .language-selector {
    display: flex;
    font-size: 12px;
    position: relative;
    cursor: pointer;
}

.lancio-header--nav .language-selector .lang-btn {
    font-size: 12px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    background-repeat: no-repeat;
    background-position: right center;
    padding: 0 12px;
}

/* Desplegable de idiomas */
.lancio-header--nav .lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
    display: none;
    flex-direction: column;
    width: auto;
    z-index: 10;
}

.lancio-header--nav .lang-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 5px 10px;
}

.lancio-header--nav .lang-dropdown.active {
    display: flex;
}

.lancio-header--nav .lang-dropdown a {
    padding: 5px 0;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    display: block;
}

/* ==========================================================================
   MENU MOBILE (DESANIDADO)
   ========================================================================== */

.lancio-header .lancio-menumobile.show {
    left: 0;
    transition: all 0.3s ease;
}

.lancio-header .lancio-menumobile .language-selector {
    display: flex;
    font-size: 12px;
    position: relative;
    margin: 30px 20px 30px auto;
}

.lancio-header .lancio-menumobile .language-selector .lang-btn-wrapper {
    position: relative;
    padding: 4px 50px 4px 4px;
}

.lancio-header .lancio-menumobile .language-selector .lang-btn {
    font-size: 12px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    background-repeat: no-repeat;
    background-position: right center;
    padding: 0 12px;
}

.lancio-header .lancio-menumobile .language-selector .lang-btn.lang-btn-mobile {
    text-transform: none;
    font-weight: normal;
    background-image: none;
    padding: 0;
}

.lancio-header .lancio-menumobile .language-selector .lang-btn.lang-btn-mobile .current-lang {
    font-weight: bold;
    margin-left: 6px;
}

.lancio-header .lancio-menumobile .language-selector .lang-btn .lang-native-select {
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    padding-right: 20px;
    background-repeat: no-repeat;
    background-position: center right 5px;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: right;
}

.lancio-header .lancio-menumobile .language-selector .lang-dropdown {
    display: none;
}

#skip-main {
    display: none;
}

section.newsletter {
    background: #f7c800 !important;
    display: block !important;
    padding: 2rem 2rem;
}

section.newsletter .legal-row-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
}

section.newsletter p.f3 {
    font-size: 0.85rem !important;
    color: #000 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

section.newsletter .inputnewsletter[type="checkbox"] {
    accent-color: #000 !important;
    border-radius: 0px !important;
    transform: scale(1.1) !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

section.newsletter .cc-newsletter-wrapper {
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
}

section.newsletter .cc-newsletter-wrapper .col-lg-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
}

@media (min-width: 992px) {
    section.newsletter .cc-newsletter-wrapper > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 30px !important;
    }

    section.newsletter .cc-newsletter-wrapper .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        align-items: flex-start !important;
        text-align: left !important;
    }

    section.newsletter .cc-newsletter-wrapper .col-lg-7 {
        flex: 0 0 45.333% !important;
        max-width: 45.333% !important;
        margin-left: auto !important;
    }
}

@media (max-width: 991.98px) {
    section.newsletter .cc-newsletter-wrapper > .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    section.newsletter .cc-newsletter-wrapper .col-lg-3,
    section.newsletter .cc-newsletter-wrapper .col-lg-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

section.newsletter .form-grid-override {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

section.newsletter .form-col-half {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
}

section.newsletter .form-col-full {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 10px 5px;
    box-sizing: border-box !important;
}

#web2lead .form-col-full.justify-content-end {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
}

@media (max-width: 576px) {
    section.newsletter .form-col-half {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

section.newsletter h3 {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #000 !important;
}

section.newsletter .custom-label {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #000 !important;
    margin-bottom: 0.4rem !important;
    margin-top: 0.6rem !important;
    display: inline-block !important;
}

section.newsletter .form-control,
section.newsletter .form-select {
    width: 100% !important;
    height: 42px !important;
    padding: 8px 12px !important;
    border: 2px solid #000000 !important;
    border-radius: 0px !important;
    background-color: #ffffff !important;
    font-size: 0.95rem !important;
    color: #000000 !important;
    box-shadow: none !important;
    outline: none !important;
}

.select-wrapper {
    position: relative;
    width: 100%;
}

.custom-no-arrow {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    padding-right: 2rem;
}

.select-wrapper::after {
    content: '▾';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
}

.nationality-options {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 264px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.nationality-options[hidden] {
    display: none;
}

.nationality-options li {
    padding: 10px 12px;
    font-size: 0.95rem;
    color: #000;
    cursor: pointer;
}

.nationality-options li:hover,
.nationality-options li.is-highlighted {
    background: #f2f2f2;
}

#web2lead .cf-turnstile {
    margin-top: 10px;
}

.ev-booking .cf-turnstile {
    margin-top: 12px;
}

section.newsletter .inputnewsletter[type="checkbox"] {
    accent-color: #000 !important;
    border-radius: 0px !important;
    transform: scale(1.1) !important;
}

#web2lead button.button {
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14rem !important;
    height: 3.2rem !important;
    border: none !important;
    border-radius: 0px !important;
    color: #fff !important;
    background: #000 !important;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

#web2lead button.button span.submit {
    position: static !important;
}

#HuBOL {
    @media (max-width: 599.95px) {
        position: fixed;
        z-index: 9999;
    }
}
h3 {
    font-size: 22px;
    font-weight: 700;

}
p{
    font-size: 18px;
    line-height: 23px;
}

.map-label.active span {

    transition: transform 0.2s;
    transform: scale(1.2);

}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Barlow', sans-serif;
    background-color: #fcfbfa;
    color: #222222;
    overflow-x: hidden;
    line-height: 1.6;
    padding: 0;
    margin: 0;
}

h1, h2, h3, .btn-yellow, .btn-black, .btn-outline-black {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.btn-outline-black {
    display: inline-block;
    background-color: #fff;
    border: 2px solid #111;
    color: #111;
    padding: 10px 30px;
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 48px;
}

.btn-outline-black:hover {
    background-color: #111;
    color: #fff;
}

.lang-switch a.active, .lang-switch a:hover {
    color: #fff;
}

.hero {
    background: #e52629;
    color: #fff;
    text-align: center;
    padding: 60px 24px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mare {
    background-color: #e8b4c8;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 50px 30px
}

.eventi {
    padding: 50px 30px;
    text-align: center;
    background-color: #f2d9c0;
}

.required-field{
    color: #B32D24;
    font-weight: bolder;
    display: none;
}

.nl-illustration {
    width: min(250px, 80%);
    height: auto;
    display: block;
    margin-top: 0.5rem !important;
}

section.newsletter h3.nl-title {
    font-weight: 700 !important;
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
    color: #fff !important;
    text-transform: none !important;
    margin-bottom: 1rem !important;
}

section.newsletter .newsletter-content p {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    color: #fff !important;
    margin-bottom: 2rem !important;
    max-width: 240px !important;
}

.legal-row-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.text-container {
    display: flex;
    flex-direction: column;
}

.read-more-btn {
    display: none;
}

@media (max-width: 991px) {

    .text-collapsed {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .read-more-btn {
        display: inline-block;
        background: none;
        border: none;
        color: #000000;
        padding: 0;
        font-size: 0.85rem;
        cursor: pointer;
        margin-top: 4px;
        text-decoration: underline;
        text-align: left;
    }
}

footer {
    background-color: #111;
    color: #fff;
    padding: 60px 5% 40px 5%;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 15px;
}

.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 15px;
}
.footer-contact-list { align-self: flex-start; }

.footer-ant-small {
    max-width: 60px;
    height: auto;
    align-self: center;
}
.footer-ant-cluster { max-width: 100px; align-self: center }

.footer-links-list { list-style: none; align-self: center; line-height: 1!important; padding-left: 0!important}
.footer-links-list li { margin-bottom: 10px; }
.footer-links-list a { font-size: 0.85rem; color: #888; letter-spacing: 1px; }
.footer-links-list a {
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 1px;
    text-transform: lowercase;
    line-height: 0.6 !important;
    text-decoration: underline;
    text-decoration-color: currentColor !important;
    text-underline-offset: 3px;
}

.footer-links-list a:hover {
    color: #fff;
}

.footer-address { font-size: 1rem; color: #ccc; margin-bottom: 15px; }

.footer-map-link {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}
.footer-map-link:hover { color: #fff; border-bottom-color: #fff; }

.footer-orari-band {
    margin: -60px -5% 44px;
    padding: 20px 5%;
    border-bottom: 2px solid #e4262a;
}
.footer-orari-summary {
    display: none;
    list-style: none;
    cursor: pointer;
}
.footer-orari-summary::-webkit-details-marker { display: none; }
.footer-orari-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 40px;
    text-align: center;
}
.footer-orari-col { font-size: 14px; line-height: 1.5; color: #fff; }
.footer-orari-col strong { display: block; font-weight: 700; }
.footer-orari-hours { white-space: pre-line; }

.footer-social { display: flex; justify-content: center; gap: 20px;}
.footer-social a:hover svg { stroke: #ffcc00; transform: scale(1.1); }

.footer-legal { font-size: 0.75rem; color: #888; }
.footer-mobile-top { display: none; }

@media (max-width: 992px) {
    .newsletter { grid-template-columns: 1fr; gap: 30px; padding: 40px 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .footer-left, .footer-right { justify-content: center; align-items: center; }
}

@media (max-width: 600px) {
    .btn-yellow, .btn-black, .btn-outline-black { width: 100%; text-align: center; }

    footer {
        min-height: 646px;
        padding: 78px 25px 48px;
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        text-align: left;
    }

    .footer-mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }

    .footer-mobile-top nav {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .footer-mobile-top nav a {
        color: #fff;
        font-size: 15px;
        line-height: 1.15;
    }

    .footer-mobile-language {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #fff;
        font-size: 14px;
        text-transform: lowercase;
    }

    .footer-mobile-flag {
        width: 26px;
        height: 26px;
        border: 1px solid rgba(255, 255, 255, .8);
        border-radius: 50%;
        background: linear-gradient(90deg, #178b4b 0 33.333%, #fff 33.333% 66.666%, #d72b35 66.666%);
    }

    .footer-right,
    .footer-address,
    .footer-map-link {
        display: none;
    }

    /* Legal links (privacy policy, …) shown centered on mobile (Figma 244-70);
       .footer-left was hidden, so nothing appeared. */
    .footer-left {
        width: 100%;
        align-items: center;
        text-align: center;
        margin-top: 24px;
    }
    .footer-left .footer-ant-small { display: none; }
    .footer-left .footer-links-list { align-self: center; }

    .footer-center {
        align-items: flex-start;
        text-align: left;
        gap: 0;
        width: 100%;
    }

    .footer-orari-band {
        margin: -78px -25px 32px;
        padding: 20px 25px 24px;
    }

    .footer-orari-summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
    .footer-orari-summary::after {
        content: "";
        width: 10px;
        height: 10px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-135deg);
        transition: transform .2s ease;
    }
    .footer-orari-band:not([open]) .footer-orari-summary::after {
        transform: rotate(45deg);
    }

    .footer-orari-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 14px;
        margin-top: 18px;
    }

    .footer-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 24px;
    }
    .footer-right .footer-ant-small { display: none; }
    .footer-contact-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        margin: 0;
    }
    .footer-contact-list li { margin-bottom: 0; }

    .footer-social {
        order: 1;
        justify-content: flex-start;
        margin-top: 72px;
    }

    .footer-ant-cluster {
        order: 2;
        align-self: center;
        margin-top: 94px;
        max-width: 94px;
    }

    .footer-legal {
        order: 3;
        align-self: center;
        margin: 34px 0 0;
        color: #ccc;
        font-size: 12px;
        line-height: 1.65;
        text-align: center;
    }
}

/* ==========================================================================
   Header — red nav bar (site-wide)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Header-menu anchors on the home page; offset clears the sticky header. */
#menu, #prenota, #parco, #contatti { scroll-margin-top: 76px; }

.cc-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background-color: #e52629;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cc-header--inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 24px;
}

.cc-header--logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cc-header--logo img {
    height: 34px;
    width: auto;
}

.cc-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.cc-nav ul {
    display: flex;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-nav a {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.cc-nav a:hover,
.cc-nav a.active {
    border-bottom-color: #fff;
    font-weight: 700;
}

.cc-header--right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.cc-header--right .language-selector { position: relative; }

.cc-header--right .lang-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cc-header--right .lang-btn .arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #fff;
    display: inline-block;
}

.cc-header--right .lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    display: none;
    min-width: 70px;
    z-index: 10;
}

.cc-header--right .lang-dropdown.active { display: block; }

.cc-header--right .lang-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.cc-header--right .lang-dropdown a {
    display: block;
    padding: 6px 16px;
    color: #111;
    font-weight: 700;
    font-size: 0.8rem;
}

.cc-header--right .lang-dropdown a:hover { background: #f3f3f3; }

.cc-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.cc-burger span {
    display: block;
    height: 2px;
    width: 22px;
    background: #fff;
    border-radius: 2px;
}

@media (max-width: 860px) {
    /* Full-screen red overlay menu (Figma mobile-menu, node 223:686) */
    .cc-nav {
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: #e52629;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        padding: 96px 32px 40px;
        overflow-y: auto;
    }
    .cc-nav.is-open { display: flex; }
    .cc-nav::before {
        content: '';
        flex-shrink: 0;
        height: 56px;
        margin: 0 auto 64px;
        width: 190px;
        background: url('/images/Circa_circo_square.webp') center -65px / 190px 190px no-repeat;
    }
    .cc-nav ul { flex-direction: column; gap: 28px; width: 100%; }
    .cc-nav li { width: 100%; text-align: left; }
    .cc-nav a {
        display: inline-block;
        padding: 4px 0;
        border-bottom: none;
        font-size: 24px;
        font-weight: 400;
    }
    .cc-burger { display: flex; }

    /* .cc-nav leaves the flow (fixed overlay), so push lang + burger to the right edge */
    .cc-header--right { margin-left: auto; }
    .cc-header--right .language-selector { display: none; }

    /* Keep the lang chip + burger clickable above the overlay; burger becomes an X */
    .cc-nav.is-open ~ .cc-header--right { position: relative; z-index: 1002; }
    .cc-nav.is-open ~ .cc-header--right .language-selector {
        display: block;
        position: fixed;
        left: 32px;
        bottom: 34px;
    }
    .cc-nav.is-open ~ .cc-header--right .lang-btn {
        border: 0;
        padding: 4px 0;
        font-size: 20px;
        font-weight: 400;
        text-transform: lowercase;
        color: #fff;
    }
    /* The chip sits at the bottom of the overlay, so open the dropdown UPWARD and
       align it to the chip's left edge. Opening downward (the desktop default)
       pushed the only option below the viewport, where it was cut off and untappable. */
    .cc-nav.is-open ~ .cc-header--right .lang-dropdown {
        top: auto;
        bottom: 100%;
        left: 0;
        right: auto;
        margin-top: 0;
        margin-bottom: 8px;
    }
    .cc-nav.is-open ~ .cc-header--right .cc-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .cc-nav.is-open ~ .cc-header--right .cc-burger span:nth-child(2) { opacity: 0; }
    .cc-nav.is-open ~ .cc-header--right .cc-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ==========================================================================
   Events — listing page
   ========================================================================== */
.ev-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    background-color: #2a3e91;
    background-image: url('/images/esperienze.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
}

.ev-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.ev-hero--overlay {
    position: relative;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px 48px;
}

.ev-hero--eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #f7c800;
    opacity: 1;
}

.ev-hero--title {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 6.25vw, 90px);
    line-height: 1.02;
    margin: 0 0 12px;
}

.ev-hero--sub {
    max-width: 540px;
    font-size: 1.05rem;
    margin: 0;
}

.ev-list {
    background-color: #f4aecb;
    padding: 56px 0 72px;
}

.ev-list--inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.ev-list--heading {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 4.2vw, 60px);
    color: #2a3e91;
    margin: 0 0 12px;
}

/* Hidden until "+ Filtri" opens it (all viewports, Figma 116-1327). The
   negative top margin pulls the row to 12px below the filter bar while the
   bar keeps its own 36px gap to the card grid when the row is closed. */
.ev-filters {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin: -24px 0 36px;
}

.ev-filters.is-open { display: flex; }

.ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 54px;
    background: #fff;
    border: 1px solid #2a3e91;
    color: #2a3e91;
    border-radius: 10px;
    padding: 0 16px;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ev-chip--icon { flex: none; width: 24px; height: 24px; }

.ev-chip:hover { background: #eaeefb; }

.ev-chip.is-active {
    background: #2a3e91;
    color: #fff;
}

.ev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ev-card {
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.ev-card[hidden] { display: none; }

.ev-card--media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: #ddd;
    overflow: hidden;
}

.ev-card--media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-card--ribbon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f7c800;
    color: #111;
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
}

.ev-card--body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 22px;
    flex: 1;
}

.ev-card--title {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.05;
    text-transform: none;
    margin: 0;
    color: #111;
}

.ev-card--title a { color: inherit; }

.ev-card--meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ev-card--date {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    color: #e52629;
}

.ev-card--day {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
}

.ev-card--month {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.ev-card--facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ev-fact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: #444;
}

.ev-fact--time::before {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e52629' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.ev-fact--cat::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e52629;
}

/* Per-category icon (Aloe tag -> Figma UIcons glyph). Replaces the fallback
   dot above whenever the tag has a mapped icon; unmapped tags keep the dot. */
.ev-fact--cat > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #e52629;
}

.ev-fact--cat:has(> svg)::before { display: none; }

.ev-card--cta {
    margin-top: auto;
    display: block;
    text-align: center;
    box-sizing: border-box;
    background: #e52629;
    color: #fff;
    border: 1px solid #e52629;
    border-radius: 5px;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 11px 16px;
}

.ev-card--cta:hover { background: #c41f23; border-color: #c41f23; color: #fff; }

/* "Scopri"/discover CTA — outlined, not filled like "Prenota" (Figma 116-1498:
   1px #e52629 border, transparent fill, red label; fills red on hover). */
.ev-card--cta--ghost {
    background: #fff;
    color: #e52629;
    border-color: #e52629;
}

.ev-card--cta--ghost:hover { background: #e52629; border-color: #e52629; color: #fff; }

/* 404 / not-found — brand-toned, reuses the palette + button pattern. */
.nf {
    background: #fddbbb;
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 24px;
}

.nf--inner { max-width: 640px; }

.nf--ill {
    width: clamp(150px, 30vw, 260px);
    height: auto;
    display: block;
    margin: 0 auto 4px;
}

.nf--code {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(84px, 15vw, 160px);
    line-height: 0.9;
    letter-spacing: 2px;
    color: #e52629;
    margin: 0;
}

.nf--title {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    color: #2a3e91;
    margin: 4px 0 12px;
}

.nf--text {
    font-size: 1.05rem;
    color: #333;
    max-width: 46ch;
    margin: 0 auto 26px;
}

.nf--actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.nf--cta {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    padding: 0 20px;
    background: #e52629;
    color: #fff;
    border: 1px solid #e52629;
    border-radius: 5px;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nf--cta:hover { background: #c41f23; border-color: #c41f23; color: #fff; }

.nf--cta--ghost { background: #fff; color: #e52629; }

.nf--cta--ghost:hover { background: #e52629; color: #fff; }

.ev-empty {
    text-align: center;
    color: #111;
    font-weight: 600;
    padding: 24px 0;
}

.ev-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 44px;
}

.ev-page-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2a3e91;
    color: #fff;
    font-size: 1.1rem;
}

.ev-page-arrow.is-disabled { opacity: 0.35; cursor: default; }

.ev-page-count {
    color: #2a3e91;
    font-weight: 700;
}

.ev-total {
    text-align: center;
    color: #2a3e91;
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .ev-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ev-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Events — single event page
   ========================================================================== */
.ev-breadcrumb {
    background: #f4aecb;
}

.ev-breadcrumb--inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c41f23;
    display: flex;
    gap: 8px;
}

.ev-breadcrumb--inner a { color: #c41f23; }
.ev-breadcrumb--inner a:hover { text-decoration: underline; }

.ev-detail--inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.ev-detail--back {
    display: inline-block;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #111;
    margin-bottom: 12px;
}

.ev-detail--title {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.02;
    text-transform: none;
    margin: 0 0 6px;
    color: #111;
}

.ev-detail--location {
    font-style: italic;
    color: #555;
    margin: 0 0 24px;
}

.ev-detail--hero {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    margin-bottom: 16px;
}

.ev-detail--price {
    color: #e52629;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 28px;
}

.ev-detail--cols {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}

.ev-detail--main { min-width: 0; }

.ev-block { margin-bottom: 32px; }

.ev-block h2 {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: none;
    margin: 0 0 12px;
    color: #111;
}

.ev-prose { color: #333; line-height: 1.7; }
.ev-prose p { margin: 0 0 14px; }
.ev-prose ul { margin: 0 0 14px; padding-left: 20px; }
.ev-prose li { margin-bottom: 6px; }

.ev-prose--check {
    list-style: none;
    padding-left: 0;
}

.ev-prose--check li {
    position: relative;
    padding-left: 26px;
}

.ev-prose--check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e52629' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.ev-quickfacts {
    list-style: none;
    margin: 0 0 32px;
    padding: 16px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.ev-quickfacts .ev-fact { font-size: 0.95rem; color: #333; }

.ev-help-btn { margin-top: 4px; }

/* Booking widget */
.ev-booking { position: sticky; top: 90px; }

.ev-booking--card {
    border: none;
    border-radius: 10px;
    padding: 22px;
    /* Figma booking sidebar is a flat peach/cream card. Asana 1216378216888230. */
    background: #fbdcbe;
}

.ev-booking--date {
    font-weight: 700;
    color: #2a3e91;
    margin: 0 0 16px;
}

.ev-booking--tickets {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.ev-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
}

.ev-ticket--info { display: flex; flex-direction: column; }
.ev-ticket--label { font-weight: 600; color: #111; }
.ev-ticket--price { font-size: 0.85rem; color: #666; }

/* A chosen ticket (qty > 0) turns into the red option bar from the Figma. */
.ev-ticket--selected { background: #e52629; }
.ev-ticket--selected .ev-ticket--label,
.ev-ticket--selected .ev-ticket--price { color: #fff; }

.ev-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.ev-stepper--btn {
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: #e52629;
}

.ev-stepper--btn:hover { background: #fdecec; }

.ev-stepper--val {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
}

.ev-booking--total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 14px;
    margin-bottom: 16px;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    /* Figma "Totale" (node 116-2106, style "H3 - carousel"): Acumin Condensed
       Bold 700, 34px, line-height 100%. */
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
}

.ev-booking--cta {
    display: block;
    text-align: center;
    background: #e52629;
    color: #fff;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 13px 16px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.ev-booking--cta:hover { background: #c41f23; color: #fff; }

@media (max-width: 880px) {
    .ev-detail--cols { grid-template-columns: 1fr; gap: 32px; }
    .ev-booking { position: static; }
}

/* ==========================================================================
   Home — redesign (desktop-index.html)
   ========================================================================== */
.home-h2 {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 4.2vw, 60px);
    line-height: 1.04;
    text-transform: none;
    margin: 0 0 18px;
    color: #111;
}

.home-h2--red { color: #e52629; }

.home-prose { color: #333; line-height: 1.7; }
.home-prose p { margin: 0 0 14px; }
.home-prose ul { margin: 0 0 14px; padding-left: 20px; }

/* 1. Hero */
.home-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    /* Slides (.cc-caro-slide) always cover this area and carry the real image;
    a baked-in photo here would download 800+ KB that is never seen. */
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45)), #e52629;
    color: #fff;
}

.home-hero--inner {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px 64px;
}

.home-hero--title {
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    /* Opt out of the global h1/h2/h3 uppercase — keep the authored casing. */
    text-transform: none;
    /* Brand red, matching Figma (node 369-1279). Reads on a light hero photo;
       the editors set a light image for it. */
    color: #e52629;
    font-size: clamp(48px, 6.25vw, 90px);
    line-height: 1.0;
    margin: 0 0 14px;
    max-width: 16ch;
}

.home-hero--sub { max-width: 460px; font-size: 1.05rem; margin: 0 0 22px; }
.home-hero--cta {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    margin-top: 6px;
    background: #E52629;
    color: #fff;
    border-radius: 5px;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 1rem;
}
.home-hero--cta:hover { background: #c41f23; color: #fff; }

/* 2. Intro — Un circo? */
.home-intro {
    background-color: #fddbbb;
    padding: 64px 24px;
}

.home-intro--inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.home-intro--ill { width: 100%; height: auto; order: 2; }
.home-intro--text { order: 1; }
.home-intro--tagline { font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.25rem; color: #111; margin-top: 18px; }

/* 3. Photo strip — a full-bleed decorated banner (Miró stars + creatures are
   composed into the photo). Show it whole at every width: height auto keeps its
   aspect so nothing is cropped. A fixed height + object-fit: cover chopped the
   stars (top) and tree bases (bottom) on any viewport wider than the 1440
   design. object-fit stays for the mobile override below, which still crops. */
.home-strip img { width: 100%; height: auto; object-fit: cover; display: block; }

/* 4. Services tabs */
.home-services { background: #fff; padding: 64px 24px; }
.home-services--inner { max-width: 1100px; margin: 0 auto; }
.home-services--title { text-align: center; margin-bottom: 32px; }

.home-tabs--nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 32px; }
.home-tab {
    background: #fff;
    border: 1.5px solid #e8b4c8;
    color: #b3477a;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}
.home-tab:hover { background: #fbeef4; }
.home-tab.is-active { background: #b3477a; color: #fff; border-radius: 10px; }

.home-tab-panel { display: none; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.home-tab-panel.is-active { display: grid; }
.home-tab-panel--img { width: 100%; border: 6px solid #e8b4c8; }
.home-tab-panel--label { font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.6rem; text-transform: none; color: #e52629; margin: 0 0 6px; }
.home-tab-panel--cta { display: inline-block; width: auto; margin-top: 16px; border-radius: 4px; }

/* 5. Shows — Venghino */
.home-shows { background: #fff; padding: 16px 24px 64px; }
.home-shows--inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.home-shows .home-h2 { font-size: clamp(40px, 4.5vw, 60px); }

/* 6. Events preview */
.home-events { background: #2a3e91; padding: 64px 24px; }
.home-events--inner { max-width: 1100px; margin: 0 auto; background: #f4aecb; border-radius: 16px; padding: 36px; }
.home-events--head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.home-events--head .home-h2 { color: #111; margin: 0; }
.home-events--all { color: #2a3e91; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.home-events--grid { grid-template-columns: repeat(3, 1fr); }

/* 7. Park */
.home-park { background-color: #f5ead7; padding: 64px 24px; }
.home-park--inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.home-park--ill { width: 100%; height: auto; }

/* 8 + 9. Territory */
.home-territory { background: #fff; padding: 56px 24px; }
.home-territory--divider { text-align: center; margin: 0 auto 40px; max-width: 900px; }
.home-carousel { max-width: 1000px; margin: 0 auto; }
.home-carousel--title { font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.6rem; text-transform: none; text-align: right; color: #111; }
.home-carousel--track { position: relative; }
.home-slide { display: none; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.home-slide.is-active { display: grid; }
.home-slide--img { width: 100%; border: 6px solid #2bb5a8; }
.home-slide--title { font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.4rem; text-transform: none; margin: 0 0 8px; }
.home-carousel--nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.home-carousel--arrow { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: #f7c800; color: #111; font-size: 1.2rem; }
.home-carousel--arrow:hover { background: #e6b800; }

/* 10. Gallery */
.home-gallery { background: #fff; padding: 24px 24px 72px; }
.home-gallery--inner { max-width: 1100px; margin: 0 auto; }
.home-gallery--title { text-align: center; margin-bottom: 28px; }
.home-gallery--grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.home-gallery--item { aspect-ratio: 1; overflow: hidden; background: #eee; }
.home-gallery--item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.home-gallery--item:hover img { transform: scale(1.06); }

@media (max-width: 860px) {
    .home-intro--inner,
    .home-tab-panel.is-active,
    .home-shows--inner,
    .home-park--inner,
    .home-slide.is-active { grid-template-columns: 1fr; gap: 24px; }
    .home-events--grid { grid-template-columns: 1fr; }
    .home-gallery--grid { grid-template-columns: repeat(3, 1fr); }
    .home-carousel--title { text-align: left; }
}

@media (max-width: 560px) {
    .home-events--grid { grid-template-columns: 1fr; }
    .home-gallery--grid { grid-template-columns: repeat(2, 1fr); }
}

/* Collapse intro/park to single column when illustration is missing */
.home-intro--noill .home-intro--inner,
.home-park--noill .home-park--inner { grid-template-columns: 1fr; }
.home-intro--noill .home-intro--text,
.home-park--noill .home-park--text { max-width: 760px; margin: 0 auto; text-align: center; }

/* Aloe booking form + banner */
.ev-booking--cta { border: none; width: 100%; cursor: pointer; font-size: 1rem; }
.ev-booking--cta[disabled] { opacity: .6; cursor: default; }
.ev-booking--form { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.ev-input { padding: 10px 12px; border: 1px solid #d6d6d6; border-radius: 6px; font: inherit; width: 100%; background: #fff; }
.ev-input:focus { outline: none; border-color: #2a3e91; }
.ev-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: #555; line-height: 1.35; cursor: pointer; }
.ev-privacy input { margin-top: 2px; flex-shrink: 0; }
.ev-book-error { color: #e52629; font-size: .85rem; font-weight: 600; margin: 0 0 10px; }
.ev-banner { padding: 14px 18px; border-radius: 8px; font-weight: 600; margin-bottom: 20px; }
.ev-banner--ok { background: #e6f4ea; color: #1e7d34; border: 1px solid #bfe3c9; }
.ev-banner--warn { background: #fdeaea; color: #b32d24; border: 1px solid #f3c2bf; }
/* ==========================================================================
   Homepage — Figma parity pass (desktop-index, node 116:258)
   ========================================================================== */
.cc-header--inner {
    max-width: 1320px;
    min-height: 64px;
    padding: 8px 24px;
}

.cc-header--logo img {
    height: 48px;
}

.home-h2 {
    font-size: clamp(40px, 4.2vw, 60px);
    line-height: .98;
}

.home-prose {
    color: #171717;
    font-size: 16px;
    line-height: 1.62;
}

/* Hero */
.home-hero {
    min-height: 668px;
    background-position: center center;
}

.home-hero--inner {
    max-width: 1240px;
    padding: 0 34px 70px;
}

.home-hero--title {
    font-size: clamp(48px, 6.25vw, 90px);
    max-width: 13ch;
}

.home-hero--sub {
    max-width: 520px;
    font-size: 17px;
}

/* Intro */
.home-intro {
    min-height: 670px;
    padding: 28px 24px;
    background: url('/images/linee_verticali.svg') center top / auto 100% repeat-x #fbd9bc;
}

.home-intro--inner {
    max-width: 1280px;
    min-height: 614px;
    grid-template-columns: minmax(340px, 430px) minmax(430px, 1fr);
    gap: 64px;
}

.home-intro--ill {
    /*width: min(100%, 527px);*/
    justify-self: center;
}

.home-intro--text {
    max-width: 410px;
    justify-self: center;
}

.home-intro--tagline {
    margin-top: 24px;
    font-size: 22px;
    line-height: 1.1;
}

/* Panoramic photo strip */
.home-strip {
    overflow: hidden;
}

.home-strip img {
    height: auto;
}

/* Services */
.home-services {
    padding: 92px 24px 118px;
}

.home-services--inner {
    max-width: 1200px;
}

.home-services--title {
    margin-bottom: 40px;
}

.home-tabs--nav {
    gap: 10px;
    margin-bottom: 52px;
}

.home-tab {
    min-width: 130px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 14px 22px;
    color: #111;
}

.home-tab.is-active {
    background: #b3477a;
    color: #fff;
    /* Figma active-tab pill (node 116-1200) has a 10px corner radius. */
    border-radius: 10px;
}

.home-tab-panel {
    grid-template-columns: 1.15fr .85fr;
    gap: 62px;
}

.home-tab-panel--img {
    border: 14px solid #e7abc2;
}

.home-tab-panel--label {
    font-size: 29px;
}

.home-tab-panel--text {
    max-width: 430px;
}

/* Shows */
.home-shows {
    position: relative;
    min-height: 520px;
    padding: 110px 24px 125px;
    background: #fff;
}

/* Starbursts (sole_blu.svg): slow spin + gentle breathe + chaotic drift.
   rotate / scale / translate are independent properties, so the three
   animations compose without fighting over `transform`. Durations are
   deliberately co-prime so the loops never sync up. */
.home-shows--sun {
    position: absolute;
    width: 88px;
    height: auto;
    pointer-events: none;
    user-select: none;
    animation:
        cc-sun-spin 70s linear infinite,
        cc-sun-breathe 7s ease-in-out infinite,
        cc-sun-wander-a 23s ease-in-out infinite;
}

.home-shows--sun-1 { left: calc(50% - 44px); top: 14px; }

.home-shows--sun-2 {
    left: 13%;
    top: 62%;
    width: 84px;
    animation-name: cc-sun-spin, cc-sun-breathe, cc-sun-wander-b;
    animation-direction: reverse, normal, normal;
    animation-duration: 90s, 8.5s, 31s;
}

.home-shows--sun-3 {
    right: 13%;
    bottom: 12%;
    width: 92px;
    animation-name: cc-sun-spin, cc-sun-breathe, cc-sun-wander-c;
    animation-duration: 80s, 9.5s, 27s;
    animation-delay: 0s, 1.5s, 4s;
}

@keyframes cc-sun-spin {
    to { rotate: 360deg; }
}

@keyframes cc-sun-breathe {
    50% { scale: 1.12; }
}

/* Three different meandering loops (start/end at 0 0 so they tile seamlessly) */
@keyframes cc-sun-wander-a {
    0%   { translate: 0 0; }
    22%  { translate: 46px 30px; }
    41%  { translate: -18px 58px; }
    58%  { translate: -52px 12px; }
    79%  { translate: 24px -26px; }
    100% { translate: 0 0; }
}

@keyframes cc-sun-wander-b {
    0%   { translate: 0 0; }
    18%  { translate: -38px -34px; }
    39%  { translate: 30px -56px; }
    57%  { translate: 62px 10px; }
    76%  { translate: 8px 40px; }
    100% { translate: 0 0; }
}

@keyframes cc-sun-wander-c {
    0%   { translate: 0 0; }
    24%  { translate: -30px 38px; }
    47%  { translate: -60px -14px; }
    64%  { translate: -8px -48px; }
    85%  { translate: 36px -8px; }
    100% { translate: 0 0; }
}

/* Mobile: same idea, tighter radius so edge-hugging suns don't clip */
@keyframes cc-sun-wander-m {
    0%   { translate: 0 0; }
    26%  { translate: -16px 14px; }
    52%  { translate: -24px -10px; }
    77%  { translate: 10px -16px; }
    100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .home-shows--sun,
    .home-park--fiore { animation: none; }
}

.home-shows--inner {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    grid-template-columns: .8fr 1.2fr;
    gap: 96px;
}

.home-shows .home-h2 {
    /* Figma "H2 desktop" (node 116-1193): 42px, line-height 44px. This block's
       heading is smaller than the big section headings, not larger. */
    font-size: 42px;
    line-height: 44px;
    max-width: 420px;
}

.home-shows--body {
    max-width: 520px;
    padding-top: 8px;
}

/* Events */
.home-events {
    padding: 48px 50px;
    background: #2a3e91;
}

.home-events--inner {
    position: relative;
    max-width: 1280px;
    min-height: 620px;
    border-radius: 0;
    padding: 72px 64px 78px;
    background: url('/images/linee_verticali_bianche.svg') center top / auto 100% repeat-x #efa8c8;
}

/* Hand-drawn blue frame over the pink panel edges (cornice.svg is a hollow
   1440x844 frame — stretched so its wavy inner edge overlaps the panel) */
.home-events--inner::after {
    content: '';
    position: absolute;
    inset: -15px;
    background: url('/images/cornice.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}

.home-events--head {
    margin-bottom: 38px;
}

.home-events--head .home-h2 {
    font-size: 46px;
}

.home-events--grid {
    gap: 20px;
}

.home-events-art {
    height: 245px;
    overflow: hidden;
    background: #fbd9bc;
}

.home-events-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Park */
.home-park {
    position: relative;
    min-height: 430px;
    padding: 105px 24px 120px;
    overflow: hidden;
    background: #fff;
}

/* Hand-drawn flower doodles (Figma Rev 02, extracted from circacirco_animali.svg) */
.home-park--fiore {
    position: absolute;
    pointer-events: none;
    user-select: none;
    height: auto;
    transform-origin: bottom center;
    animation: cc-fiore-sway 5s ease-in-out infinite;
}

/* fiore-1 = flower on a stem (top-centre), fiore-2 = stem with bud
   (bottom-left), fiore-3 = bloom (bottom-right). Task 1216332740009895. */
.home-park--fiore-1 { left: calc(50% - 40px); top: 26px; width: 80px; }
.home-park--fiore-2 { left: 24%; bottom: 8%; width: 58px; animation-duration: 6.5s; animation-delay: -1.2s; }
.home-park--fiore-3 { right: 12%; bottom: 14%; width: 66px; animation-duration: 5.8s; animation-delay: -0.6s; }

@keyframes cc-fiore-sway {
    0%, 100% { transform: rotate(-3.5deg); }
    50%      { transform: rotate(3.5deg); }
}

.home-park--inner {
    max-width: 1120px;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: start;
}

.home-events--mobile-nav,
.home-hero--mobile-dots {
    display: none;
}

/* Decorative star row above the newsletter title — all breakpoints (a CSS
   class; was previously mobile-only markup). */
.nl-stars {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 10px;
    margin-bottom: 26px;
    font-size: 34px;
    line-height: 1;
}
.nl-stars span:nth-child(1),
.nl-stars span:nth-child(4) { color: #e52629; }
.nl-stars span:nth-child(2) { color: #54b9a9; }
.nl-stars span:nth-child(3) { color: #f7d62b; }

.home-park--heading {
    position: relative;
}

.home-park--heading .home-h2 {
    max-width: 390px;
    font-size: clamp(42px, 4.2vw, 60px);
}

.home-park--ill {
    width: 180px;
    height: auto;
    margin-bottom: 24px;
}

.home-park--text {
    max-width: 520px;
    padding-top: 8px;
}

/* Territory */
.home-territory {
    min-height: 760px;
    padding: 92px 24px 108px;
}

.home-territory--divider {
    max-width: 980px;
    margin-bottom: 70px;
    font-size: clamp(42px, 4.3vw, 60px);
}

.home-carousel {
    max-width: 1120px;
}

.home-carousel--title {
    margin: 0 0 24px;
    font-size: 31px;
}

.home-slide {
    grid-template-columns: 1.1fr .9fr;
    gap: 62px;
}

.home-slide--img {
    border-width: 12px;
}

.home-slide--title {
    font-size: 29px;
}

.home-carousel--nav {
    margin-top: 28px;
}

.home-carousel--arrow {
    width: 52px;
    height: 52px;
}

/* Gallery */
.home-gallery {
    min-height: 360px;
    padding: 76px 24px 88px;
}

.home-gallery--inner {
    max-width: 1200px;
}

.home-gallery--title {
    margin-bottom: 38px;
    text-align: left;
    font-size: clamp(38px, 4vw, 56px);
}

.home-gallery--grid {
    gap: 12px;
}

.home-gallery--grid--placeholder span {
    aspect-ratio: 1;
    border: 1px solid #eee7de;
    background:
        linear-gradient(135deg, rgba(218, 205, 190, .19) 25%, transparent 25%) -10px 0 / 20px 20px,
        linear-gradient(225deg, rgba(218, 205, 190, .15) 25%, transparent 25%) -10px 0 / 20px 20px,
        #faf7f2;
}

/* Newsletter */
section.newsletter {
    min-height: 600px;
    padding: 76px 24px 82px !important;
    background: #2a3e91 !important;
    color: #fff !important;
}

section.newsletter .cc-newsletter-wrapper {
    max-width: 1200px !important;
}

section.newsletter h3,
section.newsletter .custom-label,
section.newsletter p,
section.newsletter p.f3,
section.newsletter a,
section.newsletter .read-more-btn {
    color: #fff !important;
}

section.newsletter h3 {
    max-width: 300px;
    font-size: clamp(42px, 4vw, 58px) !important;
}

section.newsletter .newsletter-content > p {
    max-width: 310px;
    font-size: 17px;
}

section.newsletter .nl-illustration {
    width: 190px;
    max-height: 190px;
    margin-top: 28px;
    filter: sepia(1) saturate(7) hue-rotate(350deg) brightness(1.15);
}

section.newsletter .form-control,
section.newsletter .form-select {
    height: 48px !important;
    border: 0 !important;
}

section.newsletter .inputnewsletter[type='checkbox'] {
    accent-color: #e52629 !important;
}

#web2lead button.button {
    width: 12rem !important;
    background: #e52629 !important;
}

@media (min-width: 992px) {
    section.newsletter .cc-newsletter-wrapper > .row {
        gap: 70px !important;
    }

    section.newsletter .cc-newsletter-wrapper .col-lg-3 {
        flex-basis: 34% !important;
        max-width: 34% !important;
    }

    section.newsletter .cc-newsletter-wrapper .col-lg-7 {
        flex-basis: 58% !important;
        max-width: 58% !important;
    }
}

@media (max-width: 860px) {
    .cc-header--inner {
        min-height: 64px;
        height: 64px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .cc-header--logo img {
        display: none;
    }

    .cc-header--logo {
        width: 172px;
        height: 64px;
        background: url('/images/Circa_circo_square.webp') center -52px / 172px 172px no-repeat;
    }

    .home-hero {
        min-height: 580px;
    }

    /* Rev 02 mobile: intro is text-only on plain white */
    .home-intro {
        min-height: 0;
        padding: 64px 24px;
        background: #fff;
    }

    .home-intro--inner {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .home-intro--ill {
        display: none;
    }

    .home-intro--text {
        order: 2;
        max-width: 600px;
    }

    .home-intro .home-h2,
    .home-services--title {
        font-size: 28px;
        line-height: 1.08;
    }

    .home-services--title {
        margin-bottom: 24px;
        text-align: left;
    }

    /* Rev 02 mobile: two soles instead of three */
    .home-shows {
        min-height: 0;
        padding: 72px 24px 88px;
    }

    .home-shows--sun-1 { left: auto; right: 28px; top: 36px; width: 64px; animation-name: cc-sun-spin, cc-sun-breathe, cc-sun-wander-m; }
    .home-shows--sun-2 { left: 28%; top: auto; bottom: 34px; width: 64px; animation-name: cc-sun-spin, cc-sun-breathe, cc-sun-wander-m; animation-direction: reverse, normal, reverse; }
    .home-shows--sun-3 { display: none; }

    .home-tab-panel,
    .home-shows--inner,
    .home-park--inner,
    .home-slide {
        gap: 38px;
    }

    /* "Venghino signori" shows: stack title above text on mobile — the
       .8fr 1.2fr desktop grid (defined later in the file) otherwise wins
       here and keeps them side-by-side. Asana 1216412843399262. */
    .home-shows--inner {
        grid-template-columns: 1fr;
    }

    .home-park--inner {
        grid-template-columns: 1fr;
    }

    .home-events {
        padding: 28px 20px;
    }

    .home-events--inner {
        min-height: 0;
        padding: 48px 28px;
    }

    /* Rev 02 mobile: one card at a time, swipeable */
    .home-events--grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        margin: 0 -8px;
        padding: 0 8px 8px;
        scrollbar-width: none;
    }

    .home-events--grid::-webkit-scrollbar { display: none; }

    .home-events--grid .ev-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    .home-events--head .home-events--all { display: none; }

    .home-events--mobile-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-top: 24px;
        position: relative;
        z-index: 1;
    }

    .home-events--mobile-all {
        color: #2a3e91;
        font-size: 14px;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .home-events--mobile-arrows {
        display: flex;
        gap: 10px;
    }

    .home-events--mobile-arrows button {
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 50%;
        background: #2a3e91;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .home-events--head .home-h2 {
        color: #2a3e91;
        font-size: 30px;
        line-height: 1.05;
    }

    .home-events-art {
        height: 170px;
    }

    .home-park,
    .home-territory {
        min-height: 0;
    }

    .home-park {
        padding-top: 130px;
    }

    .home-park--heading .home-h2,
    .home-territory--divider,
    .home-shows .home-h2 {
        font-size: 28px;
        line-height: 1.05;
    }

    .home-park--fiore-1 { left: calc(50% - 34px); top: 34px; width: 68px; }
    .home-park--fiore-2 { left: 14%; bottom: 16%; width: 48px; }
    .home-park--fiore-3 { right: 12%; bottom: 26px; width: 54px; }

    .home-gallery--grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .home-hero {
        /* Fit the first screen: the sticky header (64px) + hero fill exactly one
           viewport, so the title and CTA are visible without scrolling
           (UAT 1216443993987091). svh = small viewport height (browser chrome
           shown) → always fits even with the address bar expanded. */
        min-height: calc(100svh - 64px);
    }

    .home-intro { min-height: 422px; }
    .home-services { min-height: 864px; }
    .home-shows { min-height: 702px; }
    .home-park { min-height: 650px; }

    .home-hero--inner {
        padding: 0 26px 40px;
    }

    .home-hero--title {
        font-size: 36px;
    }

    .home-hero--mobile-dots {
        position: absolute;
        left: 50%;
        bottom: 22px;
        z-index: 2;
        display: flex;
        gap: 16px;
        translate: -50% 0;
    }

    .home-hero--mobile-dots span {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .65);
    }

    .home-hero--mobile-dots span:nth-child(2) { background: #fff; }
    .home-hero:has(.cc-caro-dots) .home-hero--mobile-dots { display: none; }

    .home-intro,
    .home-services,
    .home-shows,
    .home-park,
    .home-territory,
    .home-gallery {
        padding-left: 20px;
        padding-right: 20px;
    }

    .home-strip img {
        height: 210px;
    }

    /* Rev 02 mobile: tabs are one horizontally scrollable row of pills */
    .home-tabs--nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 28px;
    }

    .home-tabs--nav::-webkit-scrollbar { display: none; }

    .home-tab {
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
        padding: 10px 16px;
    }

    .home-tab-panel--cta {
        display: block;
        width: 100%;
        text-align: center;
    }

    .home-tab-panel--img {
        border-width: 10px;
    }

    .home-services {
        padding-top: 70px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .home-tabs--nav { margin-bottom: 25px; }

    .home-tab-panel--text {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: 16px;
    }

    .home-tab-panel--label {
        font-size: 20px;
        line-height: 1.15;
    }

    .home-tab-panel--text .home-prose,
    .home-tab-panel--cta {
        grid-column: 1 / -1;
    }

    .home-events {
        padding: 20px 12px;
    }

    .home-events--inner {
        padding: 42px 18px;
    }

    .home-events--grid {
        width: min(305px, 100%);
        margin: 0 auto;
        padding: 0;
    }

    .home-events--grid .ev-card {
        flex-basis: 100%;
    }

    .home-events--head { margin-left: 10px; }

    .home-events-art {
        height: 214px;
    }

    .home-gallery { display: none; }

    .home-park {
        padding-top: 230px;
        padding-bottom: 20px;
    }

    .home-park--fiore-1 {
        top: 94px;
    }

    .home-territory {
        padding: 40px 25px 108px;
    }

    .home-territory--divider {
        margin: 0 0 20px;
        text-align: left;
    }

    .home-slide--img {
        height: 223px;
        border-width: 10px;
        object-fit: cover;
    }

    .home-slide--title {
        font-size: 20px;
        line-height: 1.15;
    }

    section.newsletter {
        padding: 30px 25px 64px !important;
    }

    section.newsletter .newsletter-content {
        align-items: flex-start !important;
        text-align: left !important;
    }

    section.newsletter .nl-illustration { display: none !important; }

    /* Smaller title on mobile. h3.nl-title needed to beat the base
       "h3.nl-title 2.2rem !important" rule (else the 26px loses on specificity). */
    section.newsletter h3.nl-title {
        margin: 0 0 12px !important;
        max-width: none !important;
        font-size: 26px !important;
        line-height: 1.05 !important;
    }

    /* Full-width CTA on mobile instead of a right-floated, half-width button.
       !important + full specificity to beat "#web2lead button.button
       {width:12rem !important}"; zero the wrapper's right pad for symmetry. */
    section.newsletter #web2lead_submit { width: 100% !important; }
    section.newsletter #web2lead .form-col-full.justify-content-end {
        justify-content: center !important;
        padding-right: 0 !important;
    }

    section.newsletter .newsletter-content > p {
        margin: 0 0 16px !important;
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

}

/* Button radii — match Figma (rect CTAs 5px; active tab 10px; arrows are circles).
   Fixes square card CTAs (PRENOTA IL TUO POSTO / PRENOTA UN TAVOLO) and the
   newsletter ISCRIVITI button. */
.ev-card--cta,
.home-tab-panel--cta,
.ev-booking--cta,
.ev-booking--voucher { border-radius: 5px; }
#web2lead button.button { border-radius: 5px !important; }
.home-tab:hover { border-radius: 10px; }

/* ==========================================================================
   Hero / photo-strip carousels (Rev 02 dots)
   ========================================================================== */
.home-hero { overflow: hidden; }

.home-hero .cc-caro-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .6s ease;
}

.home-hero .cc-caro-slide.is-active { opacity: 1; }

.home-hero--inner { position: relative; z-index: 1; }

.home-strip { position: relative; }

.home-strip .cc-caro-slide { display: none; }
.home-strip .cc-caro-slide.is-active { display: block; }

.cc-caro-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

.cc-caro-dots button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .6);
}

.cc-caro-dots button.is-active { background: #f7c800; }

/* ==========================================================================
   Eventi listing — "+ Filtri" / "Data" filter bar (Rev 02, Figma 116-1327)
   ========================================================================== */
.ev-filterbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin-bottom: 36px;
}

.ev-filterbtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 40px;
    background: #fff;
    border: 1px solid #2a3e91;
    color: #2a3e91;
    border-radius: 5px;
    padding: 0 8px;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.ev-filterbtn--plus { font-size: 1em; line-height: 1; }

.ev-filterbtn.is-active {
    background: #2a3e91;
    color: #fff;
}

.ev-datebtn { position: relative; display: inline-flex; }

/* The "×" that clears the active date. A span (not a button) so it can nest
   inside the trigger button; role="button" keeps it operable. */
.ev-date-clear {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 2px;
}

@media (max-width: 860px) {
    .ev-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
    }

    .ev-filters::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Eventi listing — custom "Data" calendar popover (replaces the native, un-
   styleable date picker). Brand tokens: navy #2a3e91, hover #eaeefb.
   ========================================================================== */
.ev-cal {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 300px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #2a3e91;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(42, 62, 145, 0.20);
    padding: 16px;
    color: #2a3e91;
    font-family: 'Acumin Variable Concept', 'Barlow Condensed', sans-serif;
}

.ev-cal--head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ev-cal--title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
}

.ev-cal--nav { display: inline-flex; gap: 6px; }

.ev-cal--navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #2a3e91;
    border-radius: 6px;
    background: #fff;
    color: #2a3e91;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ev-cal--navbtn:hover { background: #eaeefb; }

.ev-cal--grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ev-cal--wd {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.55;
}

.ev-cal--day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #2a3e91;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ev-cal--day:hover { background: #eaeefb; }

/* Days with no events: dimmed but still clickable. */
.ev-cal--day.is-muted { color: #9aa1c8; }

.ev-cal--day.is-outside { color: #c7cde3; }

/* An event day stays full-strength navy even in an adjacent month. */
.ev-cal--day.has-event { color: #2a3e91; }

/* Navy dot under days that have at least one event. */
.ev-cal--day.has-event::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2a3e91;
}

.ev-cal--day.is-today { box-shadow: inset 0 0 0 1px #2a3e91; }

.ev-cal--day.is-selected { background: #2a3e91; color: #fff; }

.ev-cal--day.is-selected.has-event::after { background: #fff; }

.ev-cal--foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eaeefb;
}

.ev-cal--footbtn {
    border: 0;
    background: none;
    color: #2a3e91;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
}

.ev-cal--footbtn:hover { text-decoration: underline; }