/**
 * Villaggio Bushi Adventures
 * Stylesheet principale
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Colori Brand */
    --color-primary: #398834;
    --color-primary-dark: #2d6d29;
    --color-primary-light: #4ca646;
    --color-secondary: #88532a;
    --color-secondary-dark: #6d4222;
    --color-secondary-light: #a36835;
    --color-text: #000222;
    --color-text-light: #555;
    --color-text-muted: #777;

    /* Colori UI */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    /* Bordi e Ombre */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transizioni */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Layout */
    --container-max: 1280px;
    --header-height: 80px;
    --top-bar-height: 40px;
}

/* ============================================
   RESET & BASE
   Cross-browser compatibility
   ============================================ */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Smooth scroll con fallback */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */

    /* Font smoothing per tutti i browser */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Prevent font scaling in landscape on iOS */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;

    /* Safe area per iPhone con notch */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);

    /* Migliore rendering su tutti i dispositivi */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Supporto per safe area su dispositivi con notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

@media (min-width: 768px) {
    h1 { font-size: var(--font-size-5xl); }
    h2 { font-size: var(--font-size-4xl); }
    h3 { font-size: var(--font-size-3xl); }
}

p {
    margin-bottom: var(--space-md);
}

/* ============================================
   UTILITIES
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-xl);
    }
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: inline-flex;
    }
}

/* ============================================
   BUTTONS
   Cross-browser compatible
   ============================================ */
.btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-md);
    border: none;
    text-decoration: none;
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* Focus state per accessibilità */
.btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
    outline: none;
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-base);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    -webkit-box-shadow: 0 4px 14px 0 rgba(57, 136, 52, 0.4);
    box-shadow: 0 4px 14px 0 rgba(57, 136, 52, 0.4);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 6px 20px 0 rgba(57, 136, 52, 0.5);
    box-shadow: 0 6px 20px 0 rgba(57, 136, 52, 0.5);
}

/* Active state per mobile */
.btn-primary:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
    -webkit-box-shadow: 0 4px 14px 0 rgba(136, 83, 42, 0.4);
    box-shadow: 0 4px 14px 0 rgba(136, 83, 42, 0.4);
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ============================================
   TOP BAR
   Cross-browser compatible
   ============================================ */
.top-bar {
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
}

.top-bar-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.top-bar-contact {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-md);
}

.top-bar-link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-white);
    -webkit-transition: color var(--transition-fast);
    -moz-transition: color var(--transition-fast);
    -o-transition: color var(--transition-fast);
    transition: color var(--transition-fast);
}

.top-bar-link:hover {
    color: var(--color-primary-light);
}

.top-bar-link .icon {
    width: 16px;
    height: 16px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.top-bar-social {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
}

.social-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-gray-300);
    border-radius: var(--radius-full);
    -webkit-transition: all var(--transition-fast);
    -moz-transition: all var(--transition-fast);
    -o-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
}

.social-link:hover {
    color: var(--color-white);
    background: var(--color-primary);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-link .icon {
    width: 18px;
    height: 18px;
}

/* ============================================
   HEADER
   ============================================ */
.header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-white);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    /* Safe area per dispositivi con notch */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.header.scrolled {
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.header-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    z-index: 1001;
}

.logo-wrapper {
    background: var(--color-white);
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    height: 80px;
    width: auto;
    transition: transform var(--transition-base);
}

.logo:hover .logo-img {
    transform: scale(1.05);
}

/* Desktop Navigation - Menu principale ridotto */
.nav-desktop {
    display: none;
    flex: 1;
    justify-content: center;
}

@media (min-width: 1024px) {
    .nav-desktop {
        display: flex;
    }
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transform: translateX(-50%);
    transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
}

/* Hamburger - Sempre visibile */
.hamburger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    z-index: 1001;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    background: var(--color-primary);
    color: var(--color-white);
}

.hamburger:hover {
    background: var(--color-primary-dark);
    transform: scale(1.02);
}

.hamburger-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
    height: 16px;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    transform-origin: center;
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.hamburger-label {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: none;
}

@media (min-width: 768px) {
    .hamburger-label {
        display: block;
    }
}

/* ============================================
   FULLSCREEN NAVIGATION OVERLAY
   ============================================ */
.fullscreen-nav {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.fullscreen-nav.active {
    opacity: 1;
    visibility: visible;
}

.fullscreen-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fullscreen-nav-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: -webkit-linear-gradient(315deg, var(--color-gray-900) 0%, #1a2f1a 100%);
    background: -moz-linear-gradient(315deg, var(--color-gray-900) 0%, #1a2f1a 100%);
    background: -o-linear-gradient(315deg, var(--color-gray-900) 0%, #1a2f1a 100%);
    background: linear-gradient(135deg, var(--color-gray-900) 0%, #1a2f1a 100%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: -moz-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: -o-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    /* Safe area per iPhone con notch */
    padding-right: env(safe-area-inset-right);
    -webkit-overflow-scrolling: touch;
}

.fullscreen-nav.active .fullscreen-nav-container {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.fullscreen-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fullscreen-nav-logo .logo-wrapper {
    background: var(--color-white);
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
}

.fullscreen-nav-logo img {
    height: 45px;
    width: auto;
}

.fullscreen-nav-close {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--color-white);
    transition: all var(--transition-fast);
}

.fullscreen-nav-close:hover {
    background: var(--color-primary);
    transform: rotate(90deg);
}

.fullscreen-nav-close svg {
    width: 24px;
    height: 24px;
}

.fullscreen-nav-menu {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) 0;
}

.fullscreen-nav-list {
    display: flex;
    flex-direction: column;
}

.fullscreen-nav-item {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s ease;
    transition-delay: calc(var(--item-index) * 0.05s);
}

.fullscreen-nav.active .fullscreen-nav-item {
    opacity: 1;
    transform: translateX(0);
}

.fullscreen-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.fullscreen-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
    transform: scaleY(0);
    transition: transform var(--transition-fast);
}

.fullscreen-nav-link:hover,
.fullscreen-nav-link.active {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.05);
    padding-left: calc(var(--space-xl) + var(--space-sm));
}

.fullscreen-nav-link:hover::before,
.fullscreen-nav-link.active::before {
    transform: scaleY(1);
}

.fullscreen-nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.fullscreen-nav-icon svg {
    width: 20px;
    height: 20px;
}

.fullscreen-nav-text {
    flex: 1;
}

.fullscreen-nav-external {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.fullscreen-nav-external svg {
    width: 14px;
    height: 14px;
}

.fullscreen-nav-footer {
    padding: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.fullscreen-nav-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.fullscreen-nav-contact-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.fullscreen-nav-contact-link:hover {
    color: var(--color-primary-light);
}

.fullscreen-nav-contact-link svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.fullscreen-nav-social {
    display: flex;
    gap: var(--space-md);
}

.fullscreen-nav-social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--color-white);
    transition: all var(--transition-fast);
}

.fullscreen-nav-social a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.fullscreen-nav-social svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
#main-content {
    min-height: calc(100vh - var(--header-height));
}

/* ============================================
   HERO SECTION
   Cross-browser compatible
   ============================================ */
.hero {
    position: relative;
    min-height: 80vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    /* Fallback per browser che non supportano inset */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hero Video YouTube Background */
.hero-video {
    min-height: 100vh;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.hero-video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    min-width: 177.77vh; /* 16:9 aspect ratio */
    min-height: 56.25vw; /* 16:9 aspect ratio */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Nascondi i controlli YouTube che potrebbero apparire */
.hero-video-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Fallback per browser che non supportano inset */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

/* Overlay più scuro per video per migliorare leggibilità */
.hero-video .hero-overlay {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-white);
    padding: var(--space-xl);
    max-width: 900px;
}

.hero-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    margin-bottom: var(--space-md);
    color: var(--color-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    -webkit-animation: fadeInUp 0.8s ease-out;
    -moz-animation: fadeInUp 0.8s ease-out;
    -o-animation: fadeInUp 0.8s ease-out;
    animation: fadeInUp 0.8s ease-out;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 4rem;
    }
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    font-weight: 300;
    margin-bottom: var(--space-xl);
    opacity: 0.95;
    -webkit-animation: fadeInUp 0.8s ease-out 0.2s backwards;
    -moz-animation: fadeInUp 0.8s ease-out 0.2s backwards;
    -o-animation: fadeInUp 0.8s ease-out 0.2s backwards;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: var(--font-size-xl);
    }
}

.hero-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--space-md);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-animation: fadeInUp 0.8s ease-out 0.4s backwards;
    -moz-animation: fadeInUp 0.8s ease-out 0.4s backwards;
    -o-animation: fadeInUp 0.8s ease-out 0.4s backwards;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Decorazioni Hero */
.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    -webkit-animation: float 6s ease-in-out infinite;
    -moz-animation: float 6s ease-in-out infinite;
    -o-animation: float 6s ease-in-out infinite;
    animation: float 6s ease-in-out infinite;
    z-index: 1;
}

.hero-shape-1 {
    width: 300px;
    height: 300px;
    background: var(--color-white);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.hero-shape-2 {
    width: 200px;
    height: 200px;
    background: var(--color-secondary);
    bottom: -50px;
    left: -50px;
    animation-delay: 2s;
}

.hero-shape-3 {
    width: 150px;
    height: 150px;
    background: var(--color-white);
    top: 50%;
    left: 10%;
    animation-delay: 4s;
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
    padding: var(--space-3xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.section-subtitle {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.section-title {
    margin-bottom: var(--space-md);
}

.section-description {
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-text-light);
}

/* ============================================
   CARDS
   Cross-browser compatible
   ============================================ */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    /* Fix per Safari - previene flickering durante trasformazioni */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.card:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

/* Fallback per browser che non supportano aspect-ratio */
@supports not (aspect-ratio: 16 / 10) {
    .card-image {
        padding-bottom: 62.5%; /* 10/16 * 100 */
        height: 0;
    }
    .card-image img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform var(--transition-slow);
    -moz-transition: -moz-transform var(--transition-slow);
    -o-transition: -o-transform var(--transition-slow);
    transition: transform var(--transition-slow);
}

.card:hover .card-image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.card-body {
    padding: var(--space-lg);
}

.card-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-sm);
}

.card-text {
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

/* Card Grid */
.card-grid {
    display: grid;
    gap: var(--space-xl);
}

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

@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   FEATURES
   Cross-browser compatible
   ============================================ */
.features {
    background: var(--color-gray-50);
}

.feature-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .feature-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .feature-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-item {
    text-align: center;
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    /* Fix per Safari */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.feature-item:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-md);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: var(--radius-full);
    color: var(--color-white);
}

.feature-icon svg {
    width: 40px;
    height: 40px;
}

.feature-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
}

.feature-text {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* ============================================
   FOOTER
   Cross-browser compatible
   ============================================ */
/* Footer CTA */
.footer-cta {
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-3xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.footer-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.footer-cta-content {
    position: relative;
    z-index: 1;
}

.footer-cta-title {
    font-size: var(--font-size-3xl);
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.footer-cta-text {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-xl);
}

.footer-cta-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--space-md);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.footer-cta .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
    -webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
}

.footer-cta .btn-primary:hover {
    background: var(--color-gray-100);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

/* Footer Main */
.footer-main {
    background: var(--color-gray-900);
    padding: var(--space-3xl) 0;
    color: var(--color-gray-300);
}

.footer-grid {
    display: grid;
    gap: var(--space-xl);
}

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

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
}

.footer-col-brand {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .footer-col-brand {
        grid-column: auto;
    }
}

.footer-logo {
    display: inline-block;
    margin-bottom: var(--space-md);
}

.footer-logo-wrapper {
    background: var(--color-white);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.footer-logo-wrapper img {
    height: 70px;
    width: auto;
}

.footer-description {
    margin-bottom: var(--space-md);
    line-height: 1.7;
    color: var(--color-white);
}

.footer-social {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-sm);
}

.footer-social-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-gray-800);
    border-radius: var(--radius-full);
    color: var(--color-gray-300);
    -webkit-transition: all var(--transition-fast);
    -moz-transition: all var(--transition-fast);
    -o-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
}

.footer-social-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}

.footer-social-link svg {
    width: 20px;
    height: 20px;
}

.footer-title {
    font-size: var(--font-size-lg);
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    position: relative;
    padding-bottom: var(--space-sm);
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

.footer-links li {
    margin-bottom: var(--space-sm);
}

.footer-links a {
    color: var(--color-gray-400);
    -webkit-transition: all var(--transition-fast);
    -moz-transition: all var(--transition-fast);
    -o-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--color-primary-light);
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

.footer-contact li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.footer-contact .icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-contact a {
    color: var(--color-gray-400);
    -webkit-transition: color var(--transition-fast);
    -moz-transition: color var(--transition-fast);
    -o-transition: color var(--transition-fast);
    transition: color var(--transition-fast);
}

.footer-contact a:hover {
    color: var(--color-primary-light);
}

/* Footer Bottom */
.footer-bottom {
    background: var(--color-black);
    padding: var(--space-lg) 0;
    color: var(--color-white);
    font-size: var(--font-size-sm);
}

.footer-bottom-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom-content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

.footer-legal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-xs);
}

.footer-legal a,
.footer-legal-btn {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.footer-legal a:hover,
.footer-legal-btn:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-legal-sep {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 var(--space-xs);
}

/* ============================================
   BACK TO TOP
   Cross-browser compatible
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    z-index: 99;
    /* Safe area per dispositivi con notch */
    bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary-dark);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   ANIMATIONS
   Cross-browser compatible with webkit prefixes
   ============================================ */

/* fadeInUp Animation */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    from {
        opacity: 0;
        -moz-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    from {
        opacity: 0;
        -o-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

/* float Animation */
@-webkit-keyframes float {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-moz-keyframes float {
    0%, 100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -moz-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-o-keyframes float {
    0%, 100% {
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes float {
    0%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

/* pulse Animation */
@-webkit-keyframes pulse {
    0%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}

@-moz-keyframes pulse {
    0%, 100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.05);
        transform: scale(1.05);
    }
}

@-o-keyframes pulse {
    0%, 100% {
        -o-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
}

@keyframes pulse {
    0%, 100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

/* Stagger animations - cross-browser */
.stagger-1 { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }
.stagger-2 { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }
.stagger-3 { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; }
.stagger-4 { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; }
.stagger-5 { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; }
.stagger-6 { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; }

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 767px) {
    .top-bar-link span {
        display: none;
    }

    .top-bar-link .icon {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   SCROLLBAR CUSTOM
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* ============================================
   HERO SMALL (Internal Pages)
   ============================================ */
.hero-small {
    min-height: 40vh;
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.hero-small .hero-overlay {
    background: rgba(0, 0, 0, 0.3);
}

.hero-badge {
    display: inline-block;
    background: var(--color-white);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
    -webkit-animation: fadeInUp 0.8s ease-out;
    -moz-animation: fadeInUp 0.8s ease-out;
    -o-animation: fadeInUp 0.8s ease-out;
    animation: fadeInUp 0.8s ease-out;
}

/* ============================================
   PROMO BANNER
   ============================================ */
.promo-banner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-xl);
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    margin-top: var(--space-xl);
}

.promo-banner-icon {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.promo-banner-icon svg {
    width: 30px;
    height: 30px;
}

.promo-banner-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.promo-banner-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.promo-banner-text {
    opacity: 0.9;
}

.promo-banner .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.promo-banner .btn-primary:hover {
    background: var(--color-gray-100);
}

@media (max-width: 767px) {
    .promo-banner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   PRICING CARDS
   Cross-browser compatible
   ============================================ */
.pricing-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .pricing-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.pricing-grid-2 {
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pricing-grid-2 {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.pricing-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pricing-card:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.pricing-card-featured {
    border: 2px solid var(--color-primary);
}

.pricing-card-premium {
    border: 3px solid var(--color-secondary);
}

.pricing-card-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-badge-premium {
    background: var(--color-secondary);
}

.pricing-card-header {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-white);
}

.pricing-baby {
    background: -webkit-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -moz-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -o-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.pricing-junior {
    background: -webkit-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -moz-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -o-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

.pricing-senior {
    background: -webkit-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -moz-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -o-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.pricing-category {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.pricing-age {
    display: block;
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin-top: var(--space-xs);
}

.pricing-card-body {
    padding: var(--space-xl);
    text-align: center;
}

.pricing-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
}

.pricing-height svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.pricing-price {
    margin-bottom: var(--space-lg);
}

.pricing-currency {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
    vertical-align: top;
}

.pricing-amount {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.pricing-decimal {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
}

.pricing-per {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl);
    text-align: left;
}

.pricing-features li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.btn-block {
    display: block;
    width: 100%;
}

/* ============================================
   PRICING TABLE (Extra Activities)
   ============================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.pricing-table th,
.pricing-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.pricing-table th {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-table tbody tr:hover {
    background: var(--color-gray-50);
}

.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

.activity-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 500;
}

.activity-name svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.price-tag {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* ============================================
   INFO BOX
   ============================================ */
.info-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--color-gray-50);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-lg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-top: var(--space-xl);
}

.info-box svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.info-box p {
    margin: 0;
    color: var(--color-text-light);
}

/* ============================================
   PICNIC CARD
   ============================================ */
.picnic-card {
    display: -ms-grid;
    display: grid;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
    .picnic-card {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

.picnic-card-image {
    position: relative;
    min-height: 250px;
}

.picnic-card-image img {
    position: absolute;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.picnic-card-content {
    padding: var(--space-2xl);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.picnic-card-content h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.picnic-includes {
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

.picnic-price {
    margin-bottom: var(--space-sm);
}

.picnic-price .pricing-amount {
    font-size: 3rem;
}

.picnic-note {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
}

/* ============================================
   REGULATION BOX
   ============================================ */
.regulation-box {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
}

.regulation-box h4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.regulation-box h4 svg {
    width: 24px;
    height: 24px;
}

.regulation-box p {
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================
   SELECTION
   ============================================ */
::selection {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ============================================
   CONTENT BLOCK (Text + Image)
   ============================================ */
.content-block {
    display: -ms-grid;
    display: grid;
    gap: var(--space-2xl);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (min-width: 768px) {
    .content-block {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

.content-block-text .section-subtitle {
    display: block;
    margin-bottom: var(--space-sm);
}

.content-block-text h2 {
    margin-bottom: var(--space-lg);
}

.content-block-text p {
    color: var(--color-text-light);
    line-height: 1.8;
}

.content-block-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.content-block-image img {
    width: 100%;
    height: auto;
    -webkit-transition: -webkit-transform var(--transition-slow);
    -moz-transition: -moz-transform var(--transition-slow);
    -o-transition: -o-transform var(--transition-slow);
    transition: transform var(--transition-slow);
}

.content-block-image:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

/* ============================================
   BENEFITS GRID
   ============================================ */
.benefits-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .benefits-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.benefit-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.benefit-card:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--color-white);
}

.benefit-icon svg {
    width: 40px;
    height: 40px;
}

.benefit-icon-physical {
    background: -webkit-linear-gradient(315deg, #e74c3c 0%, #c0392b 100%);
    background: -moz-linear-gradient(315deg, #e74c3c 0%, #c0392b 100%);
    background: -o-linear-gradient(315deg, #e74c3c 0%, #c0392b 100%);
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.benefit-icon-mental {
    background: -webkit-linear-gradient(315deg, #9b59b6 0%, #8e44ad 100%);
    background: -moz-linear-gradient(315deg, #9b59b6 0%, #8e44ad 100%);
    background: -o-linear-gradient(315deg, #9b59b6 0%, #8e44ad 100%);
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.benefit-icon-social {
    background: -webkit-linear-gradient(315deg, #3498db 0%, #2980b9 100%);
    background: -moz-linear-gradient(315deg, #3498db 0%, #2980b9 100%);
    background: -o-linear-gradient(315deg, #3498db 0%, #2980b9 100%);
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.benefit-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-sm);
}

.benefit-card p {
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================
   COURSES GRID
   ============================================ */
.courses-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .courses-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.course-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.course-card:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.course-card-header {
    padding: var(--space-xl);
    color: var(--color-white);
    position: relative;
}

.course-header-kids {
    background: -webkit-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -moz-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -o-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.course-header-adults {
    background: -webkit-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -moz-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -o-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.course-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.course-card-header h3 {
    font-size: var(--font-size-xl);
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.course-card-header p {
    opacity: 0.9;
    margin: 0;
}

.course-card-body {
    padding: var(--space-xl);
}

.course-schedule {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.course-schedule svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.course-schedule div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.course-schedule strong {
    font-weight: 600;
    color: var(--color-text);
}

.course-schedule span {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.course-card-body h4 {
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin: var(--space-lg) 0 var(--space-md);
}

.course-requirements {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
}

.course-requirements li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--color-text-light);
}

.course-requirements svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.course-note {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.course-note svg {
    width: 18px;
    height: 18px;
    color: var(--color-secondary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.course-highlight {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: -webkit-linear-gradient(315deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    background: -moz-linear-gradient(315deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    background: -o-linear-gradient(315deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    background: linear-gradient(135deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.course-highlight svg {
    width: 18px;
    height: 18px;
    color: var(--color-secondary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* ============================================
   LEVELS GRID
   ============================================ */
.levels-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .levels-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.level-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.level-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.level-number {
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-white);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.level-1 {
    background: -webkit-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -moz-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -o-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.level-2 {
    background: -webkit-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -moz-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -o-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

.level-3 {
    background: -webkit-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -moz-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -o-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.level-4 {
    background: -webkit-linear-gradient(315deg, #e74c3c 0%, #c0392b 100%);
    background: -moz-linear-gradient(315deg, #e74c3c 0%, #c0392b 100%);
    background: -o-linear-gradient(315deg, #e74c3c 0%, #c0392b 100%);
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.level-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.level-content h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.level-difficulty {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    background: rgba(57, 136, 52, 0.1);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.level-content p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.level-features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.level-features span {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    background: var(--color-gray-50);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.level-features svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}

/* ============================================
   PRICING SIMPLE GRID (Arrampicata)
   ============================================ */
.pricing-simple-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .pricing-simple-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pricing-simple-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.pricing-simple-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pricing-simple-card:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.pricing-simple-featured {
    border: 2px solid var(--color-primary);
    background: -webkit-linear-gradient(top, rgba(57, 136, 52, 0.05) 0%, var(--color-white) 100%);
    background: -moz-linear-gradient(top, rgba(57, 136, 52, 0.05) 0%, var(--color-white) 100%);
    background: -o-linear-gradient(top, rgba(57, 136, 52, 0.05) 0%, var(--color-white) 100%);
    background: linear-gradient(to bottom, rgba(57, 136, 52, 0.05) 0%, var(--color-white) 100%);
}

.pricing-simple-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.pricing-simple-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-full);
    color: var(--color-primary);
}

.pricing-simple-icon svg {
    width: 28px;
    height: 28px;
}

.pricing-simple-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
}

.pricing-simple-price {
    margin-bottom: var(--space-sm);
}

.pricing-simple-price .pricing-amount {
    font-size: 2.5rem;
}

.pricing-simple-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--color-white);
}

.cta-content h2 {
    font-size: var(--font-size-3xl);
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.cta-content p {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--space-xl);
}

.cta-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--space-md);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cta-section .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
    -webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
}

.cta-section .btn-primary:hover {
    background: var(--color-gray-100);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

/* ============================================
   ACTIVITY FEATURES (Percorsi)
   ============================================ */
.activity-features {
    display: -ms-grid;
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

@media (min-width: 640px) {
    .activity-features {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .activity-features {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.activity-feature {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.activity-feature:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.activity-feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: var(--radius-full);
    color: var(--color-white);
}

.activity-feature-icon svg {
    width: 28px;
    height: 28px;
}

.activity-feature h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-sm);
}

.activity-feature p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================
   INFO HIGHLIGHT
   ============================================ */
.info-highlight {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-lg);
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.info-highlight-icon {
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(57, 136, 52, 0.1);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.info-highlight-icon svg {
    width: 28px;
    height: 28px;
}

.info-highlight-content p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.7;
}

@media (max-width: 640px) {
    .info-highlight {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   SCHEDULE CARD
   ============================================ */
.schedule-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.schedule-card-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.schedule-card-header svg {
    width: 32px;
    height: 32px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.schedule-card-header h2 {
    font-size: var(--font-size-xl);
    color: var(--color-white);
    margin: 0;
}

.schedule-card-body {
    padding: var(--space-xl);
}

.schedule-times {
    display: -ms-grid;
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

@media (min-width: 640px) {
    .schedule-times {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.schedule-time {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.schedule-time:hover {
    background: rgba(57, 136, 52, 0.1);
}

.schedule-time-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.schedule-time-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.schedule-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--space-md);
}

.schedule-info-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.schedule-info-item svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.schedule-info-item span {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.schedule-card-footer {
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-gray-50);
    text-align: center;
}

/* ============================================
   SAFETY BADGE
   ============================================ */
.safety-badge {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: -webkit-linear-gradient(315deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    background: -moz-linear-gradient(315deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    background: -o-linear-gradient(315deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    background: linear-gradient(135deg, rgba(57, 136, 52, 0.1) 0%, rgba(57, 136, 52, 0.05) 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.safety-badge-icon {
    width: 70px;
    height: 70px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-white);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.safety-badge-icon svg {
    width: 36px;
    height: 36px;
}

.safety-badge-content h3 {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.safety-badge-content p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .safety-badge {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   ROUTES GRID
   ============================================ */
.routes-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .routes-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .routes-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.route-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    text-decoration: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.route-card:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.route-card-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: var(--space-lg);
    color: var(--color-white);
}

.route-difficulty {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.route-icon {
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
}

.route-icon svg {
    width: 22px;
    height: 22px;
}

.route-card-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: var(--space-lg);
}

.route-card-body h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.route-card-body p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.route-card-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
}

.route-cta {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    -webkit-transition: color var(--transition-fast);
    -moz-transition: color var(--transition-fast);
    -o-transition: color var(--transition-fast);
    transition: color var(--transition-fast);
}

.route-card:hover .route-cta {
    color: var(--color-primary-dark);
}

/* Route Color Variants */
.route-orange .route-card-header {
    background: -webkit-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -moz-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -o-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.route-yellow .route-card-header {
    background: -webkit-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: -moz-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: -o-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%);
}

.route-lightblue .route-card-header {
    background: -webkit-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: -moz-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: -o-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
}

.route-green .route-card-header {
    background: -webkit-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -moz-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -o-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.route-blue .route-card-header {
    background: -webkit-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -moz-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -o-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

.route-red .route-card-header {
    background: -webkit-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: -moz-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: -o-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
}

.route-black .route-card-header {
    background: -webkit-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: -moz-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: -o-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: linear-gradient(135deg, #424242 0%, #212121 100%);
}

.route-climbing .route-card-header {
    background: -webkit-linear-gradient(315deg, #9C27B0 0%, #6A1B9A 100%);
    background: -moz-linear-gradient(315deg, #9C27B0 0%, #6A1B9A 100%);
    background: -o-linear-gradient(315deg, #9C27B0 0%, #6A1B9A 100%);
    background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
}

/* ============================================
   ROUTE DETAIL PAGE
   ============================================ */

/* Hero Route Variants */
.hero-route {
    min-height: 50vh;
    position: relative;
}

.hero-route-orange {
    background: -webkit-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -moz-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -o-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.hero-route-yellow {
    background: -webkit-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: -moz-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: -o-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%);
}

.hero-route-lightblue {
    background: -webkit-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: -moz-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: -o-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
}

.hero-route-green {
    background: -webkit-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -moz-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -o-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.hero-route-blue {
    background: -webkit-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -moz-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -o-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

.hero-route-red {
    background: -webkit-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: -moz-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: -o-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
}

.hero-route-black {
    background: -webkit-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: -moz-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: -o-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: linear-gradient(135deg, #424242 0%, #212121 100%);
}

.hero-back-link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-xs);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
    -webkit-transition: color var(--transition-fast);
    -moz-transition: color var(--transition-fast);
    -o-transition: color var(--transition-fast);
    transition: color var(--transition-fast);
}

.hero-back-link:hover {
    color: var(--color-white);
}

.hero-back-link svg {
    width: 18px;
    height: 18px;
}

.hero-route-badge {
    margin-bottom: var(--space-md);
}

.route-level {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Route Quick Info Bar */
.route-quick-info {
    padding: var(--space-lg) 0;
    color: var(--color-white);
}

.route-quick-info-orange {
    background: #E65100;
}

.route-quick-info-yellow {
    background: #FF8F00;
}

.route-quick-info-lightblue {
    background: #0097A7;
}

.route-quick-info-green {
    background: #2E7D32;
}

.route-quick-info-blue {
    background: #1565C0;
}

.route-quick-info-red {
    background: #C62828;
}

.route-quick-info-black {
    background: #212121;
}

.route-quick-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .route-quick-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.route-quick-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-md);
}

.route-quick-item svg {
    width: 28px;
    height: 28px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    opacity: 0.9;
}

.route-quick-item div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.route-quick-item strong {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.route-quick-item span {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

/* Route Content Grid */
.route-content-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-2xl);
}

@media (min-width: 1024px) {
    .route-content-grid {
        -ms-grid-columns: 2fr 1fr;
        grid-template-columns: 2fr 1fr;
    }
}

.route-main-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--space-2xl);
}

.route-intro h2 {
    margin-bottom: var(--space-lg);
}

.route-intro .lead {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--color-text);
}

.route-intro p {
    color: var(--color-text-light);
    line-height: 1.8;
}

/* Route Features Grid */
.route-features h3 {
    margin-bottom: var(--space-lg);
}

.route-features-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .route-features-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.route-feature-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    -webkit-transition: all var(--transition-fast);
    -moz-transition: all var(--transition-fast);
    -o-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
}

.route-feature-item:hover {
    background: var(--color-gray-100);
}

.route-feature-icon {
    width: 44px;
    height: 44px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
}

.route-feature-icon svg {
    width: 22px;
    height: 22px;
}

.route-feature-item span {
    font-weight: 500;
    color: var(--color-text);
}

.route-feature-highlight {
    background: rgba(57, 136, 52, 0.1);
    border: 1px solid var(--color-primary);
}

.route-feature-highlight:hover {
    background: rgba(57, 136, 52, 0.15);
}

.route-feature-highlight .route-feature-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.route-feature-highlight span {
    color: var(--color-primary);
    font-weight: 600;
}

/* Route Safety */
.route-safety {
    background: var(--color-gray-50);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
}

.route-safety-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.route-safety-header svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

.route-safety-header h3 {
    margin: 0;
    color: var(--color-primary);
}

.route-safety p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.route-safety-note {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-secondary);
}

.route-safety-note svg {
    width: 20px;
    height: 20px;
    color: var(--color-secondary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.route-safety-note span {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Route Highlight Box */
.route-highlight-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: -webkit-linear-gradient(135deg, rgba(57, 136, 52, 0.1) 0%, rgba(136, 83, 42, 0.1) 100%);
    background: -moz-linear-gradient(135deg, rgba(57, 136, 52, 0.1) 0%, rgba(136, 83, 42, 0.1) 100%);
    background: -o-linear-gradient(135deg, rgba(57, 136, 52, 0.1) 0%, rgba(136, 83, 42, 0.1) 100%);
    background: linear-gradient(135deg, rgba(57, 136, 52, 0.1) 0%, rgba(136, 83, 42, 0.1) 100%);
    border-radius: var(--radius-lg);
    margin: var(--space-xl) 0;
    border: 1px solid rgba(57, 136, 52, 0.2);
}

.route-highlight-icon {
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.route-highlight-icon svg {
    width: 30px;
    height: 30px;
    color: var(--color-white);
}

.route-highlight-content h3 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.route-highlight-content p {
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 576px) {
    .route-highlight-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }

    .route-highlight-icon {
        margin: 0 auto;
    }
}

/* Route Sidebar */
.route-sidebar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Route Requirements Card */
.route-requirements-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.route-requirements-header {
    padding: var(--space-lg);
    color: var(--color-white);
}

.route-requirements-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-white);
}

.route-requirements-header-orange {
    background: -webkit-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -moz-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: -o-linear-gradient(315deg, #FF9800 0%, #E65100 100%);
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.route-requirements-header-yellow {
    background: -webkit-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: -moz-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: -o-linear-gradient(315deg, #FFC107 0%, #FF8F00 100%);
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%);
}

.route-requirements-header-lightblue {
    background: -webkit-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: -moz-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: -o-linear-gradient(315deg, #00BCD4 0%, #0097A7 100%);
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
}

.route-requirements-header-green {
    background: -webkit-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -moz-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: -o-linear-gradient(315deg, #4CAF50 0%, #2E7D32 100%);
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.route-requirements-header-blue {
    background: -webkit-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -moz-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: -o-linear-gradient(315deg, #2196F3 0%, #1565C0 100%);
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

.route-requirements-header-red {
    background: -webkit-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: -moz-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: -o-linear-gradient(315deg, #F44336 0%, #C62828 100%);
    background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
}

.route-requirements-header-black {
    background: -webkit-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: -moz-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: -o-linear-gradient(315deg, #424242 0%, #212121 100%);
    background: linear-gradient(135deg, #424242 0%, #212121 100%);
}

.route-requirements-body {
    padding: var(--space-lg);
}

.route-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.route-requirements-list li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.route-requirements-list li:last-child {
    border-bottom: none;
}

.route-requirements-list svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* Route Schedule Card */
.route-schedule-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.route-schedule-card h3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
}

.route-schedule-card h3 svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.route-schedule-times {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.route-schedule-times span {
    text-align: center;
    padding: var(--space-sm);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-weight: 700;
    color: var(--color-primary);
}

.route-schedule-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-align: center;
    margin: 0;
}

/* Route CTA Card */
.route-cta-card {
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-white);
}

.route-cta-card h3 {
    font-size: var(--font-size-lg);
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.route-cta-card p {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin-bottom: var(--space-lg);
}

.route-cta-card .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.route-cta-card .btn-primary:hover {
    background: var(--color-gray-100);
}

/* Button Utilities */
.btn-block {
    display: block;
    width: 100%;
}

.btn-outline-dark {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

/* Corsari Neri Cards */
.corsari-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (min-width: 640px) {
    .corsari-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.corsaro-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-gray-200);
    position: relative;
}

.corsaro-card-highlight {
    border-color: var(--color-text);
    background: -webkit-linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    background: -moz-linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    background: -o-linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
}

.corsaro-number {
    position: absolute;
    top: -15px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: var(--color-text);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.corsaro-card h4 {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    margin-top: var(--space-sm);
}

.corsaro-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.corsaro-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.corsaro-card ul li {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.corsaro-card ul li:last-child {
    border-bottom: none;
}

/* Duration Info */
.route-duration-info {
    text-align: center;
    padding: var(--space-md) 0;
}

.duration-range {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.duration-time {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.duration-label {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

/* ============================================
   ACTIVITIES PAGE
   ============================================ */

/* Activity Hero Card (Featured) */
.activity-hero-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -moz-linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    text-decoration: none;
    color: var(--color-white);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    overflow: hidden;
    position: relative;
}

.activity-hero-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.activity-hero-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 600px;
}

.activity-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

.activity-hero-content h3 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-white);
}

.activity-hero-content p {
    font-size: var(--font-size-base);
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.activity-hero-stats {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.activity-stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.stat-label {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-hero-cta {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.activity-hero-cta svg {
    width: 20px;
    height: 20px;
    -webkit-transition: -webkit-transform var(--transition-base);
    -moz-transition: -moz-transform var(--transition-base);
    -o-transition: -o-transform var(--transition-base);
    transition: transform var(--transition-base);
}

.activity-hero-card:hover .activity-hero-cta svg {
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

.activity-hero-icon {
    display: none;
}

@media (min-width: 768px) {
    .activity-hero-icon {
        display: block;
        width: 150px;
        height: 150px;
        opacity: 0.3;
        margin-left: var(--space-xl);
    }

    .activity-hero-icon svg {
        width: 100%;
        height: 100%;
        color: var(--color-white);
    }
}

@media (max-width: 576px) {
    .activity-hero-card {
        padding: var(--space-xl);
    }

    .activity-hero-content h3 {
        font-size: var(--font-size-2xl);
    }

    .activity-hero-stats {
        gap: var(--space-lg);
    }
}

/* Activities Grid */
.activities-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .activities-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .activities-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Activity Card */
.activity-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-decoration: none;
    color: inherit;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    border: 2px solid var(--color-gray-100);
}

.activity-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.activity-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    background: rgba(57, 136, 52, 0.1);
}

.activity-card-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}

/* Icon Color Variants */
.activity-card-icon-green {
    background: rgba(57, 136, 52, 0.1);
}
.activity-card-icon-green svg {
    color: var(--color-primary);
}

.activity-card-icon-red {
    background: rgba(220, 38, 38, 0.1);
}
.activity-card-icon-red svg {
    color: #dc2626;
}

.activity-card-icon-yellow {
    background: rgba(202, 138, 4, 0.1);
}
.activity-card-icon-yellow svg {
    color: #ca8a04;
}

.activity-card-icon-blue {
    background: rgba(37, 99, 235, 0.1);
}
.activity-card-icon-blue svg {
    color: #2563eb;
}

.activity-card-icon-brown {
    background: rgba(136, 83, 42, 0.1);
}
.activity-card-icon-brown svg {
    color: var(--color-secondary);
}

.activity-card-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.activity-card-content h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.activity-card-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.activity-card-meta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.activity-tag {
    font-size: var(--font-size-xs);
    padding: 4px 10px;
    background: var(--color-gray-100);
    color: var(--color-text);
    border-radius: var(--radius-full);
    font-weight: 500;
}

.activity-card-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
    -webkit-transition: color var(--transition-base);
    -moz-transition: color var(--transition-base);
    -o-transition: color var(--transition-base);
    transition: color var(--transition-base);
}

.activity-card:hover .activity-card-link {
    color: var(--color-primary-dark);
}

/* Activity Showcase (Large cards with images) */
.activity-showcase {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-xl);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.activity-showcase:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
    .activity-showcase {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .activity-showcase-reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}

.activity-showcase-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .activity-showcase-image {
        width: 45%;
        min-width: 45%;
        height: auto;
        min-height: 350px;
    }
}

.activity-showcase-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform var(--transition-slow);
    -moz-transition: -moz-transform var(--transition-slow);
    -o-transition: -o-transform var(--transition-slow);
    transition: transform var(--transition-slow);
}

.activity-showcase:hover .activity-showcase-image img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.activity-showcase-overlay {
    position: absolute;
    inset: 0;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.3) 100%);
    background: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.3) 100%);
    background: -o-linear-gradient(top, transparent 0%, rgba(0,0,0,0.3) 100%);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
}

.activity-showcase-content {
    padding: var(--space-xl);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .activity-showcase-content {
        width: 55%;
        padding: var(--space-2xl);
    }
}

.activity-showcase-tag {
    display: inline-block;
    background: rgba(57, 136, 52, 0.1);
    color: var(--color-primary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.activity-showcase-content h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.activity-showcase-content p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.activity-showcase-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.activity-showcase-features li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.activity-showcase-features li svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.activity-showcase-cta {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
}

.activity-showcase-cta svg {
    width: 20px;
    height: 20px;
    -webkit-transition: -webkit-transform var(--transition-base);
    -moz-transition: -moz-transform var(--transition-base);
    -o-transition: -o-transform var(--transition-base);
    transition: transform var(--transition-base);
}

.activity-showcase:hover .activity-showcase-cta svg {
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

/* Routes Preview Grid */
.routes-preview-grid {
    display: -ms-grid;
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

@media (min-width: 480px) {
    .routes-preview-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .routes-preview-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .routes-preview-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(7, 1fr);
    }
}

.route-preview {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-white);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.route-preview:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}

.route-preview-name {
    display: block;
    font-weight: 700;
    font-size: var(--font-size-base);
    margin-bottom: 2px;
}

.route-preview-info {
    display: block;
    font-size: var(--font-size-xs);
    opacity: 0.9;
}

.route-preview-orange { background: #f97316; }
.route-preview-yellow { background: #eab308; }
.route-preview-lightblue { background: #06b6d4; }
.route-preview-green { background: var(--color-primary); }
.route-preview-blue { background: #2563eb; }
.route-preview-red { background: #dc2626; }
.route-preview-black { background: #1f2937; }

/* Info Notice Box */
.info-notice {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: -webkit-linear-gradient(135deg, rgba(136, 83, 42, 0.1) 0%, rgba(57, 136, 52, 0.1) 100%);
    background: -moz-linear-gradient(135deg, rgba(136, 83, 42, 0.1) 0%, rgba(57, 136, 52, 0.1) 100%);
    background: -o-linear-gradient(135deg, rgba(136, 83, 42, 0.1) 0%, rgba(57, 136, 52, 0.1) 100%);
    background: linear-gradient(135deg, rgba(136, 83, 42, 0.1) 0%, rgba(57, 136, 52, 0.1) 100%);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-secondary);
}

.info-notice-icon {
    width: 50px;
    height: 50px;
    background: var(--color-secondary);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.info-notice-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-white);
}

.info-notice-content h3 {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
    margin-bottom: var(--space-sm);
}

.info-notice-content p {
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.info-notice-content p:last-child {
    margin-bottom: 0;
}

.info-notice-thanks {
    font-style: italic;
    color: var(--color-text-light);
}

@media (max-width: 576px) {
    .info-notice {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .info-notice-icon {
        margin: 0 auto;
    }

    .info-notice-content {
        text-align: center;
    }
}

/* Routes Grid Small */
.routes-grid-small {
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .routes-grid-small {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Text Utilities */
.text-center {
    text-align: center;
}

/* ============================================
   PONY RIDES PAGE
   ============================================ */

/* Pony Cards Grid */
.pony-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.pony-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
    -webkit-box-flex: 1;
    -ms-flex: 1 1 350px;
    flex: 1 1 350px;
    max-width: 420px;
}

.pony-card:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.pony-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.pony-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.pony-card:hover .pony-image img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.pony-info {
    padding: 1.5rem;
}

.pony-info h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
}

.pony-info p {
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.pony-traits {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pony-trait {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #f8f4e8 0%, #f5f0e0 100%);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--color-secondary);
    font-weight: 500;
}

.pony-trait svg {
    stroke: var(--color-secondary);
}

/* Pony Info Grid */
.pony-info-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .pony-info-grid {
        -ms-grid-columns: 1fr 1.5rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .pony-info-grid {
        -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.pony-info-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.pony-info-card:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.pony-info-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pony-info-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-white);
}

.pony-info-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.pony-info-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.25rem;
}

.pony-info-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Pony Safety Box */
.safety-pony-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    max-width: 800px;
    margin: 0 auto;
}

.safety-pony-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.safety-pony-icon svg {
    width: 35px;
    height: 35px;
    stroke: var(--color-white);
}

.safety-pony-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.safety-pony-content p {
    color: var(--color-text-light);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .safety-pony-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   ARCHERY PAGE
   ============================================ */

/* Archery Equipment Grid */
.archery-equipment-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .archery-equipment-grid {
        -ms-grid-columns: 1fr 2rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.archery-equipment-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
    border: 2px solid transparent;
}

.archery-equipment-card:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.archery-equipment-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.archery-equipment-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--color-white);
}

.archery-equipment-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.archery-equipment-card p {
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Archery Quote */
.archery-quote {
    text-align: center;
    padding: 2rem 0;
}

.archery-quote-icon {
    opacity: 0.3;
    margin-bottom: 1.5rem;
    fill: var(--color-white);
}

.archery-quote blockquote {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-white);
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .archery-quote blockquote {
        font-size: 2rem;
    }
}

.archery-quote-author {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

/* Archery Info Box */
.archery-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: var(--radius-xl);
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    border-left: 4px solid var(--color-primary);
}

.archery-info-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.archery-info-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-white);
}

.archery-info-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.archery-info-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archery-info-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-light);
}

.archery-info-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.archery-info-content li:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .archery-info-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
        border-left: none;
        border-top: 4px solid var(--color-primary);
    }

    .archery-info-icon {
        margin: 0 auto;
    }

    .archery-info-content li {
        padding-left: 0;
        text-align: left;
    }

    .archery-info-content li::before {
        display: none;
    }
}

/* ============================================
   BBQ / PICNIC PAGE
   ============================================ */

/* BBQ Includes Grid */
.bbq-includes-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bbq-includes-grid {
        -ms-grid-columns: 1fr 2rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.bbq-includes-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.bbq-includes-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-gray-200);
}

.bbq-includes-header svg {
    width: 32px;
    height: 32px;
}

.bbq-includes-yes .bbq-includes-header {
    border-color: var(--color-primary);
}

.bbq-includes-yes .bbq-includes-header svg {
    stroke: var(--color-primary);
}

.bbq-includes-yes .bbq-includes-header h3 {
    color: var(--color-primary);
}

.bbq-includes-no .bbq-includes-header {
    border-color: #dc3545;
}

.bbq-includes-no .bbq-includes-header svg {
    stroke: #dc3545;
}

.bbq-includes-no .bbq-includes-header h3 {
    color: #dc3545;
}

.bbq-includes-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin: 0;
}

.bbq-includes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bbq-includes-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-text-light);
}

.bbq-includes-list li:last-child {
    border-bottom: none;
}

.bbq-includes-list li svg {
    width: 20px;
    height: 20px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.bbq-includes-yes .bbq-includes-list li svg {
    stroke: var(--color-primary);
}

.bbq-includes-no .bbq-includes-list li svg {
    stroke: #dc3545;
}

/* BBQ Pricing Grid */
.bbq-pricing-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bbq-pricing-grid {
        -ms-grid-columns: 1fr 2rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.bbq-pricing-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    border: 2px solid transparent;
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.bbq-pricing-card:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}

.bbq-pricing-featured {
    border-color: var(--color-secondary);
}

.bbq-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.bbq-pricing-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.bbq-pricing-header p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.bbq-pricing-price {
    margin: 1.5rem 0;
}

.bbq-pricing-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-secondary);
    vertical-align: top;
}

.bbq-pricing-amount {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1;
}

.bbq-pricing-decimal {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-secondary);
    vertical-align: top;
}

.bbq-pricing-per {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.bbq-pricing-note {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.bbq-pricing-holidays {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
    text-align: left;
}

.bbq-pricing-holidays p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.bbq-pricing-holidays ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0.5rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem 0.5rem;
}

.bbq-pricing-holidays li {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* BBQ Payment Box */
.bbq-payment-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    max-width: 900px;
    margin: 0 auto;
}

.bbq-payment-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.bbq-payment-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-white);
}

.bbq-payment-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.bbq-payment-content > p {
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.bbq-bank-details {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.bbq-bank-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.bbq-bank-row:last-child {
    margin-bottom: 0;
}

.bbq-bank-label {
    font-weight: 600;
    color: var(--color-text);
    min-width: 100px;
}

.bbq-bank-value {
    color: var(--color-text-light);
    word-break: break-all;
}

.bbq-refund-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.75rem;
    background: #e8f5e9;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.bbq-refund-note svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-primary);
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.bbq-refund-note p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0;
}

@media (max-width: 640px) {
    .bbq-payment-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }

    .bbq-payment-icon {
        margin: 0 auto;
    }

    .bbq-bank-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }

    .bbq-bank-label {
        min-width: auto;
    }

    .bbq-refund-note {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
    }
}

/* BBQ Booking Card */
.bbq-booking-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.bbq-booking-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.bbq-booking-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--color-white);
}

.bbq-booking-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.bbq-booking-phone {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: 1rem;
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.bbq-booking-phone:hover {
    color: var(--color-primary-dark);
}

.bbq-booking-hours {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-gray-50);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.bbq-booking-hours svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-primary);
}

/* BBQ Rules Grid */
.bbq-rules-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bbq-rules-grid {
        -ms-grid-columns: 1fr 1.5rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.bbq-rule-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.bbq-rule-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: var(--color-gray-100);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.bbq-rule-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-text);
}

.bbq-rule-important .bbq-rule-icon {
    background: #ffebee;
}

.bbq-rule-important .bbq-rule-icon svg {
    stroke: #dc3545;
}

.bbq-rule-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.bbq-rule-card p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bbq-rule-warning {
    display: inline-block;
    margin-top: 1rem;
    background: #ffebee;
    color: #dc3545;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

/* BBQ Thanks */
.bbq-thanks {
    text-align: center;
    margin-top: 2rem;
}

.bbq-thanks p {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-primary);
    font-style: italic;
}

/* ============================================
   SUSPENDED NET PAGE
   ============================================ */

/* Net Features Grid */
.net-features-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .net-features-grid {
        -ms-grid-columns: 1fr 1.5rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .net-features-grid {
        -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.net-feature-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.net-feature-card:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.net-feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.net-feature-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-white);
}

.net-feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.net-feature-card p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Net Info Highlight */
.net-info-highlight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    border-left: 5px solid var(--color-primary);
}

.net-info-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: var(--color-primary);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.net-info-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--color-white);
}

.net-info-content h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.net-info-content p {
    color: var(--color-text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

@media (max-width: 640px) {
    .net-info-highlight {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
        border-left: none;
        border-top: 5px solid var(--color-primary);
    }
}

/* Net Experience Section */
.net-experience {
    text-align: center;
    padding: 1rem 0;
}

.net-experience h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.net-experience-text {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.net-experience-features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.net-experience-features span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    color: var(--color-white);
    font-weight: 500;
}

.net-experience-features span svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-white);
}

/* ============================================
   CALENDAR PAGE
   ============================================ */

/* Calendar Info Box */
.calendar-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    border-left: 5px solid #ff9800;
}

.calendar-info-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: #ff9800;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.calendar-info-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-white);
}

.calendar-info-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #e65100;
    margin-bottom: 0.5rem;
}

.calendar-info-content > p {
    color: var(--color-text-light);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.calendar-info-content a {
    color: #e65100;
    font-weight: 600;
}

.calendar-booking-notice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.calendar-booking-notice svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-primary);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.calendar-booking-notice p {
    color: var(--color-text);
    font-size: 0.95rem;
    margin: 0;
}

@media (max-width: 640px) {
    .calendar-info-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-left: none;
        border-top: 5px solid #ff9800;
    }

    .calendar-info-icon {
        margin: 0 auto;
    }

    .calendar-info-content {
        text-align: center;
    }

    .calendar-booking-notice {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
    }
}

/* Calendar Booking Card */
.calendar-booking-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    margin: 0 auto;
}

.calendar-booking-icon {
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.calendar-booking-icon svg {
    width: 32px;
    height: 32px;
    fill: var(--color-white);
}

.calendar-booking-content {
    text-align: center;
}

.calendar-booking-content span {
    display: block;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.calendar-booking-phone {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.calendar-booking-phone:hover {
    color: var(--color-primary-dark);
}

.calendar-booking-whatsapp {
    color: #25D366 !important;
    font-weight: 500;
}

/* Calendar Legend */
.calendar-legend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
}

.calendar-legend-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
}

.calendar-legend-color {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
}

.calendar-legend-open .calendar-legend-color {
    background: #4caf50;
}

.calendar-legend-closed .calendar-legend-color {
    background: #f44336;
}

.calendar-legend-reservation .calendar-legend-color {
    background: #ffc107;
}

.calendar-legend-label {
    font-weight: 600;
    color: var(--color-text);
}

/* Calendar Container */
.calendar-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .calendar-container {
        -ms-grid-columns: 1fr 2rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .calendar-container {
        -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .calendar-container {
        -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr 2rem 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Calendar Month */
.calendar-month {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.calendar-month-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 1rem;
    text-align: center;
}

.calendar-month-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-white);
    margin: 0;
}

/* Calendar Grid */
.calendar-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0.5rem;
    background: var(--color-gray-100);
}

.calendar-day-header {
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: 0.5rem 0;
    background: var(--color-white);
}

.calendar-day {
    aspect-ratio: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-white);
    -webkit-transition: var(--transition-fast);
    -o-transition: var(--transition-fast);
    transition: var(--transition-fast);
}

.calendar-day-number {
    font-weight: 600;
    font-size: 0.85rem;
}

.calendar-day-empty {
    background: var(--color-gray-50);
}

/* Calendar Day States */
.calendar-day-open {
    background: #4caf50;
}

.calendar-day-open .calendar-day-number {
    color: var(--color-white);
}

.calendar-day-closed {
    background: #f44336;
}

.calendar-day-closed .calendar-day-number {
    color: var(--color-white);
}

.calendar-day-reservation {
    background: #ffc107;
}

.calendar-day-reservation .calendar-day-number {
    color: #333;
}

/* Hover effects */
.calendar-day:not(.calendar-day-empty):hover {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    z-index: 10;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

/* Calendar Tooltips */
.calendar-day {
    position: relative;
}

.calendar-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-5px);
    -ms-transform: translateX(-50%) translateY(-5px);
    transform: translateX(-50%) translateY(-5px);
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

.calendar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-gray-900);
}

.calendar-day:not(.calendar-day-empty):hover .calendar-tooltip {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(-8px);
    -ms-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px);
}

/* Tooltip colors based on status */
.calendar-day-open .calendar-tooltip {
    background: #2e7d32;
}

.calendar-day-open .calendar-tooltip::after {
    border-top-color: #2e7d32;
}

.calendar-day-closed .calendar-tooltip {
    background: #c62828;
}

.calendar-day-closed .calendar-tooltip::after {
    border-top-color: #c62828;
}

.calendar-day-reservation .calendar-tooltip {
    background: #f57c00;
}

.calendar-day-reservation .calendar-tooltip::after {
    border-top-color: #f57c00;
}

/* Calendar Legend Hint */
.calendar-legend-hint {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Calendar Info Grid (new design) */
.calendar-info-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .calendar-info-grid {
        -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.calendar-info-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.calendar-info-card:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.calendar-info-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.calendar-info-card-icon svg {
    width: 28px;
    height: 28px;
}

.calendar-info-card-icon-warning {
    background: #fff3e0;
}

.calendar-info-card-icon-warning svg {
    stroke: #ff9800;
}

.calendar-info-card-icon-info {
    background: #e3f2fd;
}

.calendar-info-card-icon-info svg {
    stroke: #2196f3;
}

.calendar-info-card-icon-time {
    background: #e8f5e9;
}

.calendar-info-card-icon-time svg {
    stroke: var(--color-primary);
}

.calendar-info-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.calendar-info-card p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.calendar-info-card a {
    color: #2196f3;
    font-weight: 600;
}

/* Calendar Booking Box (new design) */
.calendar-booking-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: 2.5rem 3rem;
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.calendar-booking-box-content h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.calendar-booking-box-content p {
    color: rgba(255, 255, 255, 0.9);
}

.calendar-booking-box-cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
}

.calendar-booking-phone-big {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    -webkit-transition: var(--transition-base);
    -o-transition: var(--transition-base);
    transition: var(--transition-base);
}

.calendar-booking-phone-big:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.calendar-booking-phone-big svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-white);
}

.btn-whatsapp {
    background: #25D366;
    color: var(--color-white);
    border: none;
}

.btn-whatsapp:hover {
    background: #128C7E;
    color: var(--color-white);
}

@media (max-width: 900px) {
    .calendar-booking-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }

    .calendar-booking-box-cta {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
    }

    .calendar-booking-phone-big {
        font-size: 1.75rem;
    }

    .btn-whatsapp {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/* ============================================
   PARTY PAGES - FESTE
   ============================================ */

/* Hero Badge */
.party-hero-badge {
    display: inline-block;
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: 1rem;
}

.party-hero-badge-junior {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.party-hero-badge-bachelor {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}

/* Party Types Grid */
.party-types-grid {
    display: -ms-grid;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .party-types-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.party-type-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    display: block;
}

.party-type-card:hover {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.party-type-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.party-type-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.party-type-badge-junior {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.party-type-badge-bachelor {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}

.party-type-content {
    padding: 1.5rem;
}

.party-type-content h3 {
    font-size: var(--font-size-xl);
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.party-type-content p {
    color: var(--color-text-light);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.party-type-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 1rem;
}

.party-type-price-label {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-light);
}

.party-type-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.party-type-link svg {
    width: 18px;
    height: 18px;
    -webkit-transition: -webkit-transform var(--transition-base);
    -moz-transition: -moz-transform var(--transition-base);
    -o-transition: -o-transform var(--transition-base);
    transition: transform var(--transition-base);
}

.party-type-card:hover .party-type-link svg {
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

/* Party Packages Grid */
.party-packages-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .party-packages-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.party-package-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    position: relative;
    border: 2px solid transparent;
}

.party-package-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.party-package-featured {
    border-color: var(--color-primary);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.party-package-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.party-package-header h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: 0.25rem;
}

.party-package-header p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.party-package-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1.5rem 0;
}

.party-package-currency {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.party-package-amount {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.party-package-decimal {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.party-package-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.party-extra-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--color-gray-50);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}

.party-extra-child svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.party-extra-child p {
    margin: 0;
    color: var(--color-text-light);
}

.party-junior-upgrade {
    text-align: center;
}

.party-junior-upgrade p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Party Features Grid */
.party-features-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .party-features-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .party-features-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.party-feature-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.party-feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
}

.party-feature-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

.party-feature-card h4 {
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
}

.party-feature-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Party Spaces Grid */
.party-spaces-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .party-spaces-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.party-space-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    position: relative;
    border: 2px solid transparent;
}

.party-space-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.party-space-featured {
    border-color: var(--color-secondary);
}

.party-space-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.party-space-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.party-space-card h4 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.75rem;
}

.party-space-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Party Menu Section */
.party-menu-section {
    text-align: center;
    color: var(--color-white);
}

.party-menu-section h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.party-menu-section > p {
    opacity: 0.9;
    margin-bottom: 2rem;
}

.party-menu-options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.party-menu-option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
}

.party-menu-icon {
    font-size: 1.5rem;
}

.party-menu-contact {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    margin: 0;
}

/* Party Activities Table */
.party-activities-table {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.party-activities-table table {
    width: 100%;
    background: var(--color-white);
    border-collapse: collapse;
}

.party-activities-table th,
.party-activities-table td {
    padding: 1rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-100);
}

.party-activities-table th {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.party-activities-table th:first-child {
    text-align: left;
}

.party-activities-table th small {
    display: block;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 0.25rem;
}

.party-activities-table td:first-child {
    text-align: left;
}

.party-activities-table td strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.party-activities-table td small {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
}

.party-activities-table tbody tr:hover {
    background: var(--color-gray-50);
}

.party-activities-table tbody td {
    font-weight: 600;
    color: var(--color-primary);
}

.party-activities-table tbody td:first-child {
    font-weight: 400;
    color: var(--color-text);
}

/* Party Payment Box */
.party-payment-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .party-payment-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

.party-payment-icon {
    width: 80px;
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .party-payment-icon {
        margin: 0 auto;
    }
}

.party-payment-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-white);
}

.party-payment-content h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.5rem;
}

.party-payment-content > p {
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.party-bank-details {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.party-bank-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.party-bank-row:last-child {
    border-bottom: none;
}

@media (max-width: 576px) {
    .party-bank-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.25rem;
    }
}

.party-bank-label {
    font-weight: 600;
    color: var(--color-text);
    min-width: 100px;
}

.party-bank-value {
    color: var(--color-text-light);
    word-break: break-all;
}

/* Party Info List */
.party-info-list {
    max-width: 800px;
    margin: 0 auto;
}

.party-info-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.party-info-item:last-child {
    border-bottom: none;
}

.party-info-item svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.party-info-item p {
    margin: 0;
    color: var(--color-text-light);
}

.party-info-item-warning {
    background: rgba(231, 76, 60, 0.1);
    border-radius: var(--radius-md);
    padding: 1rem;
    border-bottom: none;
    margin-top: 1rem;
}

.party-info-item-warning svg {
    color: #e74c3c;
}

.party-info-item-warning p {
    color: var(--color-text);
}

/* Party FAQ Grid */
.party-faq-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .party-faq-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.party-faq-item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.party-faq-item h4 {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.party-faq-item p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* Party Alternative Box (Junior/Senior) */
.party-alternative-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .party-alternative-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

.party-alternative-icon {
    width: 80px;
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .party-alternative-icon {
        margin: 0 auto;
    }
}

.party-alternative-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-white);
}

.party-alternative-content h3 {
    font-size: var(--font-size-xl);
    margin-bottom: 0.5rem;
}

.party-alternative-content > p {
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.party-alternative-prices {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .party-alternative-prices {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.party-alternative-price {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
}

.party-alternative-price-featured {
    border-color: var(--color-secondary);
}

.party-alternative-amount {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.party-alternative-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Bachelor Party Specific Styles */
.bachelor-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.bachelor-intro h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 1rem;
}

.bachelor-intro p {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    line-height: 1.8;
}

.bachelor-package-main {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    border: 3px solid var(--color-primary);
}

.bachelor-package-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.bachelor-package-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 2rem;
}

.bachelor-price-currency {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.bachelor-price-amount {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.bachelor-price-decimal {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.bachelor-price-per {
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--color-text-light);
    margin-left: 0.5rem;
}

.bachelor-package-features {
    text-align: left;
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

.bachelor-feature {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.bachelor-feature:last-child {
    border-bottom: none;
}

.bachelor-feature svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.bachelor-feature span {
    color: var(--color-text-light);
}

.bachelor-package-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    background: var(--color-gray-50);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin: 0;
}

/* Bachelor Activities Grid */
.bachelor-activities-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .bachelor-activities-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.bachelor-activity-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.bachelor-activity-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.bachelor-activity-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    border-radius: var(--radius-full);
}

.bachelor-activity-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
}

.bachelor-activity-card h4 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.75rem;
}

.bachelor-activity-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.bachelor-activity-contact {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(57, 136, 52, 0.1);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
}

/* Bachelor Why Us Section */
.bachelor-why-us {
    text-align: center;
    color: var(--color-white);
}

.bachelor-why-us h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: 2rem;
}

.bachelor-reasons-grid {
    display: -ms-grid;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .bachelor-reasons-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.bachelor-reason {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: 2rem;
}

.bachelor-reason svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
}

.bachelor-reason h4 {
    font-size: var(--font-size-lg);
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.bachelor-reason p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   FESTE PAGE SPECIFIC COMPONENTS
   ============================================ */

/* Feste Intro */
.feste-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.feste-intro h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: 1rem;
}

.feste-intro p {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    line-height: 1.8;
}

/* Feste Cards Grid */
.feste-cards-grid {
    display: -ms-grid;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .feste-cards-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.feste-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

.feste-card:hover {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.feste-card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.feste-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.3));
    background: -moz-linear-gradient(top, transparent, rgba(0,0,0,0.3));
    background: -o-linear-gradient(top, transparent, rgba(0,0,0,0.3));
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
}

.feste-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-white);
    z-index: 2;
}

.feste-card-badge-baby {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.feste-card-badge-junior {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.feste-card-badge-adult {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}

.feste-card-content {
    padding: 1.5rem;
}

.feste-card-content h3 {
    font-size: var(--font-size-xl);
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.feste-card-height {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.feste-card-desc {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.feste-card-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.feste-card-from {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.feste-card-amount {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-primary);
}

.feste-card-amount small {
    font-size: 0.5em;
    font-weight: 400;
}

.feste-card-cta {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.feste-card-cta svg {
    width: 18px;
    height: 18px;
    -webkit-transition: -webkit-transform var(--transition-base);
    -moz-transition: -moz-transform var(--transition-base);
    -o-transition: -o-transform var(--transition-base);
    transition: transform var(--transition-base);
}

.feste-card:hover .feste-card-cta svg {
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

/* Feste Includes Grid */
.feste-includes-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .feste-includes-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .feste-includes-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.feste-include-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.feste-include-item:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.feste-include-icon {
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.feste-include-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-white);
}

.feste-include-text h4 {
    font-size: var(--font-size-base);
    margin-bottom: 0.25rem;
}

.feste-include-text p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Feste Extras Section */
.feste-extras-section {
    text-align: center;
    color: var(--color-white);
}

.feste-extras-section h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.feste-extras-section > p {
    opacity: 0.9;
    margin-bottom: 2rem;
}

.feste-extras-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.5rem;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.feste-extra-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-xl);
    min-width: 280px;
    text-align: left;
}

.feste-extra-icon {
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.feste-extra-icon svg {
    width: 24px;
    height: 24px;
}

.feste-extra-info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.feste-extra-info h4 {
    font-size: var(--font-size-base);
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.feste-extra-info span {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.feste-extra-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    background: var(--color-secondary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
}

/* Feste Info Grid */
.feste-info-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .feste-info-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .feste-info-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.feste-info-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.feste-info-card:hover {
    border-color: var(--color-primary);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}

.feste-info-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-full);
}

.feste-info-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}

.feste-info-card h4 {
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
}

.feste-info-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   CENTRI ESTIVI PAGE COMPONENTS
   ============================================ */

/* CE Intro */
.ce-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.ce-intro-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
}

.ce-intro-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-white);
}

.ce-intro h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 1rem;
}

.ce-intro p {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    line-height: 1.8;
}

/* CE Schedule */
.ce-schedule {
    max-width: 900px;
    margin: 0 auto;
}

.ce-schedule-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.ce-schedule-item:hover {
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

.ce-schedule-item-highlight {
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(57, 136, 52, 0.05) 0%, var(--color-white) 100%);
}

.ce-schedule-item-pool {
    border-left: 4px solid #2196F3;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, var(--color-white) 100%);
}

.ce-schedule-item-creative {
    border-left: 4px solid var(--color-secondary);
    background: linear-gradient(135deg, rgba(136, 83, 42, 0.05) 0%, var(--color-white) 100%);
}

.ce-schedule-time {
    min-width: 100px;
    font-weight: 700;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    padding-top: 2px;
}

.ce-schedule-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.ce-schedule-content h4 {
    font-size: var(--font-size-base);
    margin-bottom: 0.25rem;
}

.ce-schedule-content p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 576px) {
    .ce-schedule-item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .ce-schedule-time {
        min-width: auto;
    }
}

/* CE Activities Grid */
.ce-activities-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ce-activity-tag {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* CE Theme Box */
.ce-theme-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align: center;
    color: var(--color-white);
}

.ce-theme-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
}

.ce-theme-icon svg {
    width: 36px;
    height: 36px;
}

.ce-theme-box h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: 1rem;
}

.ce-theme-box > p {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.ce-theme-notes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
}

.ce-theme-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-align: left;
}

.ce-theme-note svg {
    width: 20px;
    height: 20px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* CE Pricing Grid */
.ce-pricing-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ce-pricing-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.ce-pricing-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    position: relative;
}

.ce-pricing-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.ce-pricing-card-featured {
    border: 2px solid var(--color-primary);
}

.ce-pricing-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 0.35rem 1rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

.ce-pricing-header {
    padding: 1.5rem;
    text-align: center;
    color: var(--color-white);
}

.ce-pricing-header-full {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.ce-pricing-header-half {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.ce-pricing-header-member {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

.ce-pricing-header h3 {
    font-size: var(--font-size-xl);
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.ce-pricing-header p {
    opacity: 0.9;
    font-size: var(--font-size-sm);
    margin: 0;
}

.ce-pricing-body {
    padding: 1.5rem;
}

.ce-pricing-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.75rem 0;
}

.ce-pricing-row-sub {
    padding-top: 0;
    padding-left: 1rem;
}

.ce-pricing-row-sub .ce-pricing-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.ce-pricing-row-sub .ce-pricing-value {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

.ce-pricing-label {
    color: var(--color-text);
}

.ce-pricing-value {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
}

.ce-pricing-divider {
    height: 1px;
    background: var(--color-gray-100);
    margin: 0.5rem 0;
}

.ce-pricing-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-align: center;
    margin: 1rem 0 0;
    font-style: italic;
}

.ce-pricing-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    max-width: 700px;
    margin: 0 auto;
}

.ce-pricing-info svg {
    width: 24px;
    height: 24px;
    color: var(--color-secondary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.ce-pricing-info p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* CE Info Grid */
.ce-info-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ce-info-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.ce-info-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.ce-info-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.ce-info-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
}

.ce-info-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

.ce-info-card h4 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.5rem;
}

.ce-info-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* CE Required Box */
.ce-required-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    max-width: 700px;
    margin: 0 auto;
    border-left: 4px solid var(--color-secondary);
}

.ce-required-box h4 {
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
    color: var(--color-secondary);
}

.ce-required-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ce-required-box li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.ce-required-box li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.ce-required-box li:last-child {
    margin-bottom: 0;
}

/* CE Convenzione */
.ce-convenzione {
    text-align: center;
    color: var(--color-white);
    max-width: 700px;
    margin: 0 auto;
}

.ce-convenzione-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
}

.ce-convenzione-icon svg {
    width: 36px;
    height: 36px;
}

.ce-convenzione h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: 1rem;
}

.ce-convenzione p {
    opacity: 0.95;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.ce-convenzione p:last-child {
    margin-bottom: 0;
}

/* CE Details Grid */
.ce-details-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ce-details-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.ce-detail-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.ce-detail-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
}

.ce-detail-icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-white);
}

.ce-detail-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 1rem;
}

.ce-detail-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.ce-detail-card p:last-of-type {
    margin-bottom: 0;
}

.ce-detail-warning {
    background: rgba(255, 152, 0, 0.1);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.ce-detail-warning strong {
    color: #E65100;
}

/* CTA Address */
.cta-address {
    margin-top: 1.5rem;
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* ============================================
   CONTACT PAGE COMPONENTS
   ============================================ */

/* Contact Grid */
.contact-grid {
    display: -ms-grid;
    display: grid;
    gap: 3rem;
}

@media (min-width: 992px) {
    .contact-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
}

/* Contact Cards */
.contact-cards {
    display: -ms-grid;
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 576px) {
    .contact-cards {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.contact-card:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.contact-card-whatsapp:hover {
    border-color: #25D366;
}

.contact-card-icon {
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.contact-card-whatsapp .contact-card-icon {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.contact-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-white);
}

.contact-card-content h4 {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.contact-card-content p {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}

/* Contact Social */
.contact-social {
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

.contact-social h4 {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-social-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

.contact-social-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.contact-social-link svg {
    width: 20px;
    height: 20px;
}

.contact-social-facebook {
    background: #1877F2;
}

.contact-social-facebook:hover {
    background: #0d65d9;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.contact-social-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.contact-social-instagram:hover {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Contact Map */
.contact-map-section {
    position: relative;
    display: flex;
    flex-direction: column;
}

.contact-map-wrapper {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 992px) {
    .contact-map-section {
        height: 100%;
    }

    .contact-map-wrapper {
        flex: 1;
        height: auto;
        min-height: 450px;
    }
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 100%;
}

.contact-map-info {
    margin-top: 1rem;
}

.contact-map-directions {
    text-align: center;
}

/* Contact Hours Box */
.contact-hours-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    max-width: 800px;
    margin: 0 auto 2rem;
}

@media (max-width: 576px) {
    .contact-hours-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

.contact-hours-icon {
    width: 70px;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.contact-hours-icon svg {
    width: 36px;
    height: 36px;
    color: var(--color-white);
}

.contact-hours-main {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-hours-main a {
    color: var(--color-primary);
    text-decoration: underline;
}

.contact-hours-note {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* Contact Booking Info */
.contact-booking-info {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .contact-booking-info {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-booking-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.contact-booking-card:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: var(--shadow-lg);
    box-shadow: var(--shadow-lg);
}

.contact-booking-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-full);
}

.contact-booking-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.contact-booking-card h4 {
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
}

.contact-booking-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* Contact Directions Grid */
.contact-directions-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .contact-directions-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-direction-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.contact-direction-card:hover {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.contact-direction-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    border-radius: var(--radius-lg);
}

.contact-direction-icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-white);
}

.contact-direction-card h4 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.75rem;
}

.contact-direction-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.contact-direction-note {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: 600;
    margin: 0;
}

/* Contact Company Box */
.contact-company-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    max-width: 900px;
    margin: 0 auto;
}

.contact-company-box h4 {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-gray-100);
}

.contact-company-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .contact-company-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-company-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-company-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.contact-company-value {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-weight: 500;
}

/* ============================================
   REGOLAMENTO PAGE COMPONENTS
   ============================================ */

/* Download Box */
.regolamento-download {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    color: var(--color-white);
}

@media (max-width: 768px) {
    .regolamento-download {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

.regolamento-download-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.25rem;
}

@media (max-width: 576px) {
    .regolamento-download-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.regolamento-download-icon {
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.regolamento-download-icon svg {
    width: 30px;
    height: 30px;
}

.regolamento-download-text h3 {
    font-size: var(--font-size-lg);
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.regolamento-download-text p {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0;
}

.regolamento-download .btn {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: var(--color-white);
    color: var(--color-primary);
}

.regolamento-download .btn:hover {
    background: var(--color-gray-100);
}

/* Norma Reference */
.regolamento-norma {
    text-align: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 500px;
    margin: 0 auto;
}

.regolamento-norma p {
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.regolamento-norma strong {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

/* Content */
.regolamento-content {
    max-width: 900px;
    margin: 0 auto;
}

.regolamento-intro {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.regolamento-intro p {
    margin: 0;
}

/* Warning Box */
.regolamento-warning-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
    background: #FEF3CD;
    border-left: 4px solid #F0AD4E;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 576px) {
    .regolamento-warning-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 1rem;
    }
}

.regolamento-warning-icon {
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #F0AD4E;
    border-radius: var(--radius-full);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.regolamento-warning-icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-white);
}

.regolamento-warning-content h4 {
    color: #856404;
    margin-bottom: 0.5rem;
}

.regolamento-warning-content p {
    color: #856404;
    margin: 0;
    line-height: 1.6;
}

/* Notes */
.regolamento-notes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

.regolamento-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
}

.regolamento-note svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.regolamento-note p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Requisiti Grid */
.regolamento-requisiti-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .regolamento-requisiti-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .regolamento-requisiti-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.regolamento-requisito {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.regolamento-requisito-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
}

.regolamento-requisito-icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-white);
}

.regolamento-requisito h4 {
    font-size: var(--font-size-base);
    margin-bottom: 0.75rem;
}

.regolamento-requisito p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin: 0;
}

/* Percorsi Grid */
.regolamento-percorsi-grid {
    display: -ms-grid;
    display: grid;
    gap: 1rem;
}

@media (min-width: 576px) {
    .regolamento-percorsi-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .regolamento-percorsi-grid {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.regolamento-percorso {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    border-top: 4px solid;
}

.regolamento-percorso-arancione { border-top-color: #FF9800; }
.regolamento-percorso-giallo { border-top-color: #FFEB3B; }
.regolamento-percorso-celeste { border-top-color: #03A9F4; }
.regolamento-percorso-verde { border-top-color: #4CAF50; }
.regolamento-percorso-blu { border-top-color: #2196F3; }
.regolamento-percorso-rosso { border-top-color: #F44336; }
.regolamento-percorso-nero { border-top-color: #212121; }

.regolamento-percorso-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.regolamento-percorso-color {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
}

.regolamento-percorso-arancione .regolamento-percorso-color { background: #FF9800; }
.regolamento-percorso-giallo .regolamento-percorso-color { background: #FFEB3B; }
.regolamento-percorso-celeste .regolamento-percorso-color { background: #03A9F4; }
.regolamento-percorso-verde .regolamento-percorso-color { background: #4CAF50; }
.regolamento-percorso-blu .regolamento-percorso-color { background: #2196F3; }
.regolamento-percorso-rosso .regolamento-percorso-color { background: #F44336; }
.regolamento-percorso-nero .regolamento-percorso-color { background: #212121; }

.regolamento-percorso-header h4 {
    font-size: var(--font-size-sm);
    margin: 0;
}

.regolamento-percorso p {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    margin: 0;
}

/* Rules List */
.regolamento-rules-list {
    max-width: 900px;
    margin: 0 auto;
}

.regolamento-rule {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    -webkit-transition: all var(--transition-base);
    -moz-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.regolamento-rule:hover {
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.regolamento-rule-important {
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(57, 136, 52, 0.05) 0%, var(--color-white) 100%);
}

.regolamento-rule-number {
    width: 36px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-size-sm);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.regolamento-rule-content p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Istruttori Section */
.regolamento-istruttori {
    color: var(--color-white);
    max-width: 900px;
    margin: 0 auto;
}

.regolamento-istruttori h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: 2rem;
    text-align: center;
}

.regolamento-istruttori-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

.regolamento-istruttore-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.regolamento-istruttore-item svg {
    width: 28px;
    height: 28px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.regolamento-istruttore-item p {
    margin: 0;
    line-height: 1.7;
    opacity: 0.95;
}

/* Biglietto Section */
.regolamento-biglietto {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    max-width: 900px;
    margin: 0 auto;
}

.regolamento-biglietto h4 {
    margin-bottom: 1rem;
}

.regolamento-biglietto > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.regolamento-biglietto > ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.regolamento-biglietto > ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.regolamento-biglietto-notes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.75rem;
}

.regolamento-biglietto-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.regolamento-biglietto-note svg {
    width: 20px;
    height: 20px;
    color: var(--color-secondary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.regolamento-biglietto-note p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
}

/* DPI Grid */
.regolamento-dpi-grid {
    display: -ms-grid;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .regolamento-dpi-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .regolamento-dpi-grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

.regolamento-dpi-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.regolamento-dpi-icon {
    width: 44px;
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.regolamento-dpi-icon svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.regolamento-dpi-item p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Finali Section */
.regolamento-finali {
    max-width: 900px;
    margin: 0 auto;
}

.regolamento-finali-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.regolamento-finale-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
}

.regolamento-finale-item svg {
    width: 24px;
    height: 24px;
    color: var(--color-secondary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.regolamento-finale-item p {
    margin: 0;
    color: var(--color-text-light);
}

.regolamento-comportamento {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.regolamento-comportamento h4 {
    margin-bottom: 1rem;
}

.regolamento-comportamento ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -ms-grid;
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .regolamento-comportamento ul {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

.regolamento-comportamento li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.regolamento-comportamento li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* Disclaimer */
.regolamento-disclaimer {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.regolamento-disclaimer-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(244, 67, 54, 0.2);
    border-radius: var(--radius-full);
}

.regolamento-disclaimer-icon svg {
    width: 32px;
    height: 32px;
    color: #F44336;
}

.regolamento-disclaimer p {
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.regolamento-firma {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.regolamento-firma p {
    margin-bottom: 0.5rem;
}

.regolamento-firma p:first-child {
    font-style: italic;
    opacity: 0.8;
}

/* ============================================
   GRUPPI PAGE
   ============================================ */

/* Promo Section */
.gruppi-promo {
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 3rem;
    border-radius: var(--radius-xl);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.gruppi-promo-icon {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.gruppi-promo-icon svg {
    width: 50px;
    height: 50px;
}

.gruppi-promo-content h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: 0.75rem;
    color: var(--color-white);
}

.gruppi-promo-text {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.gruppi-promo-discount {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.gruppi-discount-amount {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    font-family: var(--font-heading);
    color: #FFD700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gruppi-discount-label {
    font-size: var(--font-size-lg);
    opacity: 0.9;
}

@media (max-width: 768px) {
    .gruppi-promo {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }

    .gruppi-promo-icon {
        width: 80px;
        height: 80px;
    }

    .gruppi-promo-icon svg {
        width: 40px;
        height: 40px;
    }

    .gruppi-promo-discount {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Attività Grid */
.gruppi-attivita-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.gruppi-attivita-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    -webkit-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
}

.gruppi-attivita-card:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.gruppi-attivita-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: -webkit-linear-gradient(315deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.gruppi-attivita-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

.gruppi-attivita-card h4 {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.gruppi-attivita-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
}

@media (max-width: 992px) {
    .gruppi-attivita-grid {
        -ms-grid-columns: 1fr 1.5rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gruppi-attivita-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

/* Form Wrapper */
.gruppi-form-wrapper {
    max-width: 900px;
    margin: 2rem auto 0;
    background: -webkit-linear-gradient(top, #ffffff 0%, #fafbfa 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #fafbfa 100%);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfa 100%);
    padding: 3rem;
    border-radius: var(--radius-xl);
    -webkit-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-200);
    position: relative;
    overflow: hidden;
}

.gruppi-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: -webkit-linear-gradient(left, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
    background: -o-linear-gradient(left, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
}

.gruppi-form-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1.5rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.gruppi-form-group {
    margin-bottom: 1rem;
}

.gruppi-form-group label {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.75rem;
    font-size: var(--font-size-base);
    letter-spacing: -0.01em;
}

.gruppi-form-group input[type="text"],
.gruppi-form-group input[type="email"],
.gruppi-form-group input[type="tel"],
.gruppi-form-group textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    background: var(--color-white);
    -webkit-transition: all var(--transition-fast);
    -o-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
}

.gruppi-form-group input::-webkit-input-placeholder,
.gruppi-form-group textarea::-webkit-input-placeholder {
    color: var(--color-gray-400);
}

.gruppi-form-group input::-moz-placeholder,
.gruppi-form-group textarea::-moz-placeholder {
    color: var(--color-gray-400);
}

.gruppi-form-group input:-ms-input-placeholder,
.gruppi-form-group textarea:-ms-input-placeholder {
    color: var(--color-gray-400);
}

.gruppi-form-group input::placeholder,
.gruppi-form-group textarea::placeholder {
    color: var(--color-gray-400);
}

.gruppi-form-group input:focus,
.gruppi-form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    -webkit-box-shadow: 0 0 0 3px rgba(57, 136, 52, 0.15);
    box-shadow: 0 0 0 3px rgba(57, 136, 52, 0.15);
}

.gruppi-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.gruppi-form-full {
    grid-column: 1 / -1;
}

@media (max-width: 576px) {
    .gruppi-form-wrapper {
        padding: 1.5rem;
    }

    .gruppi-form-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

/* Number Input */
.gruppi-number-input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.gruppi-number-input:focus-within {
    border-color: var(--color-primary);
    -webkit-box-shadow: 0 0 0 3px rgba(57, 136, 52, 0.15);
    box-shadow: 0 0 0 3px rgba(57, 136, 52, 0.15);
}

.gruppi-number-input input {
    width: 80px;
    text-align: center;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem 0.5rem !important;
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    -moz-appearance: textfield;
    -webkit-appearance: none;
    background: transparent;
}

.gruppi-number-input input::-webkit-outer-spin-button,
.gruppi-number-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gruppi-number-btn {
    width: 52px;
    height: 52px;
    background: -webkit-linear-gradient(top, #f8f9fa 0%, #e9ecef 100%);
    background: -o-linear-gradient(top, #f8f9fa 0%, #e9ecef 100%);
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    -webkit-transition: all var(--transition-fast);
    -o-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.gruppi-number-btn:hover {
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.gruppi-number-btn:active {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

/* Checkbox Grid */
.gruppi-checkbox-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

@media (max-width: 992px) {
    .gruppi-checkbox-grid {
        -ms-grid-columns: 1fr 1rem 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gruppi-checkbox-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.gruppi-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1.25rem 1rem;
    background: -webkit-linear-gradient(top, #ffffff 0%, #f8faf8 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f8faf8 100%);
    background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-gray-200);
    -webkit-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    position: relative;
    z-index: 2;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.gruppi-checkbox:hover {
    background: -webkit-linear-gradient(top, #f0f7ef 0%, #e8f5e7 100%);
    background: -o-linear-gradient(top, #f0f7ef 0%, #e8f5e7 100%);
    background: linear-gradient(180deg, #f0f7ef 0%, #e8f5e7 100%);
    border-color: var(--color-primary-light);
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 6px 20px rgba(57, 136, 52, 0.15);
    box-shadow: 0 6px 20px rgba(57, 136, 52, 0.15);
}

.gruppi-checkbox input {
    display: none;
}

.gruppi-checkbox-mark {
    width: 50px;
    height: 50px;
    border: 3px solid var(--color-gray-300);
    border-radius: 50%;
    background: var(--color-white);
    position: relative;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.gruppi-checkbox input:checked + .gruppi-checkbox-mark {
    background: -webkit-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-color: var(--color-primary);
    -webkit-box-shadow: 0 4px 15px rgba(57, 136, 52, 0.4);
    box-shadow: 0 4px 15px rgba(57, 136, 52, 0.4);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.gruppi-checkbox input:checked + .gruppi-checkbox-mark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 12px;
    height: 20px;
    border: solid var(--color-white);
    border-width: 0 3px 3px 0;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.gruppi-checkbox-label {
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.4;
}

.gruppi-checkbox input:checked ~ .gruppi-checkbox-label {
    color: var(--color-primary);
    font-weight: 700;
}

.gruppi-checkbox.is-selected {
    background: -webkit-linear-gradient(315deg, #e8f5e7 0%, #d4edda 100%);
    background: -o-linear-gradient(315deg, #e8f5e7 0%, #d4edda 100%);
    background: linear-gradient(135deg, #e8f5e7 0%, #d4edda 100%);
    border-color: var(--color-primary);
}

/* Checkbox Icon */
.gruppi-checkbox-icon {
    width: 24px;
    height: 24px;
    color: var(--color-gray-400);
    -webkit-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    opacity: 1;
}

.gruppi-checkbox input:checked + .gruppi-checkbox-mark .gruppi-checkbox-icon {
    color: var(--color-white);
    display: none;
}

.gruppi-checkbox input:checked + .gruppi-checkbox-mark::after {
    display: block;
}

/* Attività Section */
.gruppi-attivita-section {
    background: -webkit-linear-gradient(top, #f8faf8 0%, #ffffff 100%);
    background: -o-linear-gradient(top, #f8faf8 0%, #ffffff 100%);
    background: linear-gradient(180deg, #f8faf8 0%, #ffffff 100%);
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-primary-light);
    margin-top: 1.5rem;
    -webkit-box-shadow: 0 4px 20px rgba(57, 136, 52, 0.08);
    box-shadow: 0 4px 20px rgba(57, 136, 52, 0.08);
}

.gruppi-attivita-title {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: 1rem !important;
}

.gruppi-attivita-title svg {
    color: var(--color-primary);
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.gruppi-checkbox-privacy {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    text-align: left;
    background: transparent;
    padding: 0.75rem 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.gruppi-checkbox-privacy:hover {
    background: transparent;
    border-color: transparent;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.gruppi-checkbox-privacy .gruppi-checkbox-mark {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: var(--radius-md);
    border-width: 2px;
}

.gruppi-checkbox-privacy .gruppi-checkbox-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: 400;
}

.gruppi-checkbox-privacy .gruppi-checkbox-label a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}

/* Form Total */
.gruppi-form-total {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: -webkit-linear-gradient(315deg, #f0f9ef 0%, #e8f5e7 100%);
    background: -o-linear-gradient(315deg, #f0f9ef 0%, #e8f5e7 100%);
    background: linear-gradient(135deg, #f0f9ef 0%, #e8f5e7 100%);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--color-primary-light);
    border-left-width: 5px;
}

.gruppi-total-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gruppi-total-label {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-text);
}

.gruppi-total-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-heading);
    -webkit-transition: color var(--transition-base);
    -o-transition: color var(--transition-base);
    transition: color var(--transition-base);
}

.gruppi-total-number.gruppi-total-success {
    color: var(--color-primary);
}

.gruppi-total-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.gruppi-total-message strong {
    color: var(--color-primary);
}

span.gruppi-total-success {
    color: var(--color-primary);
    font-weight: 600;
}

/* Form Submit */
.gruppi-form-submit {
    text-align: center;
    margin-top: 1.5rem;
}

.gruppi-submit-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-linear-gradient(315deg, #25D366 0%, #128C7E 100%);
    background: -o-linear-gradient(315deg, #25D366 0%, #128C7E 100%);
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: var(--color-white);
    padding: 1.25rem 3rem;
    font-size: var(--font-size-xl);
    font-weight: 700;
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    -webkit-transition: all var(--transition-base);
    -o-transition: all var(--transition-base);
    transition: all var(--transition-base);
    -webkit-box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
    text-transform: none;
    letter-spacing: 0;
}

.gruppi-submit-btn:hover {
    background: -webkit-linear-gradient(315deg, #128C7E 0%, #075E54 100%);
    background: -o-linear-gradient(315deg, #128C7E 0%, #075E54 100%);
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 12px 35px rgba(37, 211, 102, 0.45);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.45);
}

.gruppi-submit-note {
    margin-top: 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Info Grid */
.gruppi-info-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.gruppi-info-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}

.gruppi-info-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: -webkit-linear-gradient(315deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%);
    background: -o-linear-gradient(315deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%);
    background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%);
    border-radius: var(--radius-full);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.gruppi-info-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

.gruppi-info-card h4 {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.gruppi-info-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
}

.gruppi-info-card p strong {
    color: var(--color-text);
}

@media (max-width: 992px) {
    .gruppi-info-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row-reverse;
}

.whatsapp-float__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
}

.whatsapp-float__button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.whatsapp-float__icon {
    width: 32px;
    height: 32px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.whatsapp-float__pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.4);
    animation: whatsapp-pulse 2s infinite;
    z-index: 1;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.whatsapp-float__tooltip {
    background: #333;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.whatsapp-float__tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid #333;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.whatsapp-float:hover .whatsapp-float__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-float__button {
        width: 55px;
        height: 55px;
    }

    .whatsapp-float__icon {
        width: 28px;
        height: 28px;
    }

    .whatsapp-float__tooltip {
        display: none;
    }
}

/* Ensure back-to-top doesn't overlap */
.back-to-top {
    bottom: 100px;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 90px;
    }
}

/* ============================================
   CONTACT FORM STYLES
   ============================================ */
.contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.contact-form {
    position: relative;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.form-group label .required {
    color: #dc2626;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-md);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(57, 136, 52, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-gray-300);
}

.form-group select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #dc2626;
}

.form-error {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: #dc2626;
    min-height: 1.2em;
}

/* Checkbox styles */
.form-checkbox {
    margin-bottom: var(--space-xl);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-weight: normal !important;
    position: relative;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.checkbox-custom {
    flex-shrink: 0;
    min-width: 26px !important;
    width: 26px !important;
    height: 26px !important;
    background: #ffffff !important;
    border: 3px solid #398834 !important;
    border-radius: 6px !important;
    margin-right: 16px;
    margin-top: 0;
    position: relative;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.checkbox-label:hover .checkbox-custom {
    border-color: #2d6d29 !important;
    background: #f0f9ef !important;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: #398834 !important;
    border-color: #398834 !important;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '' !important;
    position: absolute;
    left: 7px;
    top: 2px;
    width: 8px;
    height: 14px;
    border: solid #ffffff !important;
    border-width: 0 3px 3px 0 !important;
    transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:focus + .checkbox-custom {
    box-shadow: 0 0 0 4px rgba(57, 136, 52, 0.3) !important;
    border-color: #2d6d29 !important;
}

.checkbox-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.5;
}

.checkbox-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Submit button */
.form-submit {
    text-align: center;
    margin-top: var(--space-lg);
}

.form-submit .btn {
    min-width: 200px;
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-loading .spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Result message */
.form-result {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
}

.form-result.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.form-result.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: var(--space-xl);
        margin: 0 calc(-1 * var(--space-md));
        border-radius: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ============================================
   NEWSLETTER FORM STYLES
   ============================================ */
.footer-newsletter {
    background: var(--color-primary-dark);
    padding: var(--space-2xl) 0;
}

.newsletter-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.newsletter-text {
    flex: 1;
    min-width: 250px;
}

.newsletter-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.newsletter-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-base);
}

.newsletter-form {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    position: relative;
}

.newsletter-input-group {
    display: flex;
    gap: var(--space-sm);
    background: var(--color-white);
    border-radius: var(--radius-full);
    padding: 5px;
    box-shadow: var(--shadow-md);
}

.newsletter-input-group input[type="email"] {
    flex: 1;
    border: none;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-base);
    background: transparent;
    min-width: 0;
}

.newsletter-input-group input[type="email"]:focus {
    outline: none;
}

.newsletter-input-group input[type="email"]::placeholder {
    color: var(--color-gray-300);
}

.newsletter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.newsletter-btn:hover {
    background: var(--color-primary-light);
}

.newsletter-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.newsletter-btn .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.newsletter-btn .spinner {
    animation: spin 1s linear infinite;
}

.newsletter-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    position: relative;
}

.newsletter-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.newsletter-checkmark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.newsletter-checkbox input[type="checkbox"]:checked + .newsletter-checkmark {
    background: var(--color-white);
    border-color: var(--color-white);
}

.newsletter-checkbox input[type="checkbox"]:checked + .newsletter-checkmark::after {
    content: '';
    width: 6px;
    height: 11px;
    border: solid var(--color-primary-dark);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.newsletter-checkbox input[type="checkbox"]:focus + .newsletter-checkmark {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.newsletter-checkbox-text {
    line-height: 1.5;
    padding-top: 2px;
}

.newsletter-checkbox-text a {
    color: var(--color-white);
    text-decoration: underline;
    font-weight: 500;
}

.newsletter-checkbox-text a:hover {
    text-decoration: none;
}

.newsletter-result {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-align: center;
}

.newsletter-result.success {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.newsletter-result.error {
    background: rgba(220, 38, 38, 0.2);
    color: #fecaca;
}

/* Responsive newsletter */
@media (max-width: 768px) {
    .newsletter-content {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        width: 100%;
        max-width: none;
    }

    .newsletter-input-group {
        flex-direction: column;
        border-radius: var(--radius-lg);
        padding: var(--space-sm);
    }

    .newsletter-input-group input[type="email"] {
        text-align: center;
        padding: var(--space-md);
    }

    .newsletter-btn {
        width: 100%;
        padding: var(--space-md);
    }

    .newsletter-checkbox {
        justify-content: center;
        text-align: left;
    }
}