/* ============================================
   CINE-LAB-KIDS - GLASSMORPHISM DESIGN SYSTEM
   ============================================ */

/* =====================
   1. RESET & VARIABLES
   ===================== */
:root {
    /* Colori vivaci */
    --primary: #FF6B6B;
    --secondary: #4ECDC4;
    --accent: #FFE66D;
    --pink: #FF8ED4;
    --purple: #A66CFF;
    --blue: #5B9BD5;
    --dark: #2D3436;
    --light: #FFF9E6;
    --white: #ffffff;
    --gray: #636e72;
    --gray-light: rgba(255, 255, 255, 0.85);
    --gray-medium: rgba(255, 255, 255, 0.7);
    --success: #00B894;
    
    /* Gradienti */
    --cta-gradient-1: linear-gradient(135deg, #FF6B6B, #FF8ED4);
    --cta-gradient-2: linear-gradient(135deg, #4ECDC4, #5B9BD5);
    --cta-gradient-3: linear-gradient(135deg, #A66CFF, #FF8ED4);
    --glass-gradient: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    
    /* Glassmorphism tokens */
    --glass-bg: rgba(255, 255, 255, 0.2);
    --glass-bg-light: rgba(255, 255, 255, 0.35);
    --glass-bg-dark: rgba(45, 52, 54, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-border-light: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    --glass-blur: blur(20px);
    --glass-blur-light: blur(10px);
    
    /* Ombre */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Typographic scale */
    --fs-h1: clamp(2.8rem, 9.5vw, 5.2rem);
    --fs-h2: clamp(1.6rem, 4.5vw, 2.8rem);
    --fs-h3: clamp(1.15rem, 2.6vw, 1.6rem);
    --lead-size: 1.05rem;
    --base-line-height: 1.6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    line-height: var(--base-line-height);
    color: var(--dark);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100vw;
}

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

a {
    max-width: 100%;
    word-wrap: break-word;
}

pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

p, h1, h2, h3, h4, h5, h6, li, span, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* =====================
   2. TYPOGRAPHY
   ===================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Fredoka One', 'Bebas Neue', sans-serif;
    line-height: 1.15;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p, li, .muted {
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-size: 1rem;
    line-height: var(--base-line-height);
}

.muted {
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lead {
    font-size: var(--lead-size);
    line-height: 1.45;
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =====================
   3. LAYOUT & GRID
   ===================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    /* clip invece di hidden: hidden su un solo asse forza overflow-y:auto
       e taglia i badge posizionati fuori dal box (es. .about-badge) */
    overflow-x: hidden;
    overflow-x: clip;
}

.section {
    padding: 80px 0;
    overflow: hidden;
}

/* Pagine senza hero (articoli, pagine legali): spazio per l'header fixed */
.page-main {
    padding-top: 120px;
}

.section-title {
    font-family: 'Fredoka One', 'Bebas Neue', sans-serif;
    font-size: var(--fs-h2);
    color: var(--white);
    text-align: center;
    margin-bottom: 48px;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.section-title.light {
    color: var(--white);
}

/* =====================
   4. GLASS COMPONENTS
   ===================== */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
}

.glass-light {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
}

.glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
}

/* =====================
   5. HEADER & NAVIGATION
   ===================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    padding: 12px 0;
    transition: all 0.35s ease;
}

.header.scrolled {
    background: rgba(29, 53, 87, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.site-logo {
    width: 48px;
    height: 48px;
    /* logo.png e' 1119x896 (orizzontale): cover taglierebbe ~11px per lato */
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: #fff;
}

.logo-text {
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.2rem;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 8px;
    align-items: center;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.nav-links a.active {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background 0.3s ease;
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--glass-shadow);
    z-index: 999;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 12px 16px;
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: background 0.3s ease;
}

.mobile-menu a:hover,
.mobile-menu a.active {
    background: rgba(255, 107, 107, 0.1);
    color: var(--primary);
}

/* =====================
   6. HERO SECTION
   ===================== */
/* =====================
   HERO SECTION - IMPACT
   ===================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 24px 80px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #533483 100%);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 107, 107, 0.15), transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(78, 205, 196, 0.12), transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(166, 108, 255, 0.1), transparent 50%);
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 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.03'%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");
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 850px;
}

/* Logo in filigrana sullo sfondo hero (stesso logo ufficiale, versione leggera) */
.hero-logo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(88vmin, 640px);
    height: min(88vmin, 640px);
    transform: translate(-50%, -50%);
    background: url("./img/logo-800.webp") center / contain no-repeat;
    opacity: 0.1;
    filter: blur(1px) saturate(0.9);
    -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 72%);
    mask-image: radial-gradient(circle, #000 45%, transparent 72%);
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 768px) {
    .hero-logo-bg { width: 92vmin; height: 92vmin; opacity: 0.08; }
}

/* Title with glow effect */
.hero-title {
    font-family: 'Fredoka One', sans-serif;
    font-size: clamp(2.8rem, 8vw, 5rem);
    color: var(--white);
    margin-bottom: 8px;
    text-shadow:
        0 0 40px rgba(255, 230, 109, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
    animation: heroTitleIn 1s cubic-bezier(.4,0,.2,1);
}

@keyframes heroTitleIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
    animation: heroFadeIn 0.8s ease-out 0.3s both;
}

@keyframes heroFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-tagline {
    font-size: 1rem;
    color: var(--accent);
    margin-bottom: 28px;
    font-weight: 600;
    animation: heroFadeIn 0.8s ease-out 0.5s both;
}

.hero-age {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    animation: heroFadeIn 0.8s ease-out 0.5s both;
}

.hero-age span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    margin: 0 4px;
    font-weight: 700;
    color: var(--accent);
    border: 1px solid rgba(255, 230, 109, 0.25);
    transition: all 0.3s;
}

.hero-age span:hover {
    background: rgba(255, 230, 109, 0.15);
    border-color: rgba(255, 230, 109, 0.5);
}

/* CTA buttons row */
.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: heroFadeIn 0.8s ease-out 0.7s both;
}

.hero .btn {
    animation: none;
}

.hero .btn-primary {
    background: var(--cta-gradient-1);
    color: #fff;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    border: none;
    box-shadow: 0 6px 24px rgba(255, 107, 107, 0.4);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.hero .btn-primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 32px rgba(255, 107, 107, 0.55);
}

.hero .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* Decorative stars */
.decoration-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.star {
    position: absolute;
    font-size: 1.8rem;
    animation: twinkle 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.star.s1 { top: 12%; left: 8%; animation-delay: 0s; }
.star.s2 { top: 20%; right: 12%; animation-delay: 0.5s; }
.star.s3 { bottom: 35%; left: 15%; animation-delay: 1s; }
.star.s4 { top: 40%; right: 8%; animation-delay: 1.5s; }
.star.s5 { bottom: 25%; right: 20%; animation-delay: 0.8s; }

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.5; transform: scale(0.7) rotate(15deg); }
}

/* Floating cinema icons */
.floating-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.floating-icon {
    position: absolute;
    font-size: 2.2rem;
    animation: float 7s ease-in-out infinite;
    opacity: 0.5;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.floating-icon:nth-child(1) { top: 18%; left: 4%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 65%; left: 6%; animation-delay: 1.2s; }
.floating-icon:nth-child(3) { top: 25%; right: 5%; animation-delay: 2.4s; }
.floating-icon:nth-child(4) { bottom: 22%; right: 12%; animation-delay: 3.6s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(-8px) rotate(-5deg); }
    75% { transform: translateY(-24px) rotate(3deg); }
}

/* Clapperboard */
.clapperboard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 140px;
    z-index: 0;
    opacity: 0.08;
}

.clapper-top {
    width: 100%;
    height: 30px;
    background: repeating-linear-gradient(
        -45deg,
        var(--white),
        var(--white) 10px,
        transparent 10px,
        transparent 20px
    );
    border-radius: 8px 8px 0 0;
}

.clapper-body {
    width: 100%;
    height: 110px;
    background: var(--white);
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.2rem;
    color: var(--dark);
    letter-spacing: 2px;
}

/* Film strip decoration */
.hero-film-strip {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 1;
    opacity: 0.3;
}

.film-frame {
    width: 48px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    backdrop-filter: blur(10px);
    animation: filmStrip 3s ease-in-out infinite;
    box-shadow: var(--shadow-sm);
}

.film-frame:nth-child(2) { animation-delay: 0.2s; }
.film-frame:nth-child(3) { animation-delay: 0.4s; }
.film-frame:nth-child(4) { animation-delay: 0.6s; }
.film-frame:nth-child(5) { animation-delay: 0.8s; }

@keyframes filmStrip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

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

/* =====================
   7. BUTTONS
   ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--cta-gradient-1);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5);
}

.btn-secondary {
    background: var(--cta-gradient-2);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.5);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* =====================
   8. CARDS
   ===================== */
.glass-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-8px);
    box-shadow: var(--glass-shadow-hover);
}

/* Workshop Card */
/* =====================
   IL NOSTRO LABORATORIO - WORKSHOP CARD
   ===================== */
.workshop-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
}

.workshop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Left: image */
.workshop-media {
    position: relative;
    overflow: hidden;
    min-height: 360px;
}

.workshop-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,107,107,0.15), transparent 60%);
    pointer-events: none;
}

.workshop-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}

.workshop-card:hover .workshop-hero-img {
    transform: scale(1.05);
}

/* Age badge floating on image */
.workshop-age-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--cta-gradient-1);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
    z-index: 2;
    letter-spacing: 0.5px;
}

/* Right: content */
.workshop-content {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.workshop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.workshop-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    margin: 0;
}

.workshop-header .tag {
    background: rgba(78, 205, 196, 0.2);
    /* il teal #4ECDC4 su vetro chiaro arriva solo a 2.7:1 -> testo bianco (6.7:1) */
    color: var(--white);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.workshop-desc {
    color: var(--gray-light);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Feature list */
.workshop-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.workshop-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s;
}

.workshop-feature:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.15);
}

.workshop-feature-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.85rem;
}

.workshop-feature:nth-child(1) .workshop-feature-icon { background: rgba(255, 107, 107, 0.2); }
.workshop-feature:nth-child(2) .workshop-feature-icon { background: rgba(78, 205, 196, 0.2); }
.workshop-feature:nth-child(3) .workshop-feature-icon { background: rgba(255, 230, 109, 0.2); }
.workshop-feature:nth-child(4) .workshop-feature-icon { background: rgba(166, 108, 255, 0.2); }
.workshop-feature:nth-child(5) .workshop-feature-icon { background: rgba(255, 142, 212, 0.2); }

.workshop-feature span {
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.4;
}

.workshop-feature strong {
    color: var(--white);
    font-weight: 600;
}

/* CTA section */
.workshop-cta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.workshops-note {
    color: var(--gray-medium);
    font-size: 0.8rem;
    flex: 1;
}

/* =====================
   FASI DEL LABORATORIO - TIMELINE
   ===================== */
.phases-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    align-items: start;
    padding: 20px 0;
}

/* Connector line between phases */
.phases-grid::before {
    content: '';
    position: absolute;
    top: 52px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg,
        var(--primary) 0%,
        var(--accent) 25%,
        var(--secondary) 50%,
        var(--purple) 75%,
        #FF8ED4 100%
    );
    border-radius: 2px;
    z-index: 0;
    opacity: 0.6;
}

.phase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
    z-index: 1;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0;
    /* opacity/transform iniziali stanno solo in @keyframes: senza animazione
       (reduce-motion, CSS non caricato, paint saltato) la card resta visibile */
    animation: phaseFadeIn 0.6s ease both;
}

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

.phase-card:nth-child(1) { animation-delay: 0.1s; }
.phase-card:nth-child(2) { animation-delay: 0.25s; }
.phase-card:nth-child(3) { animation-delay: 0.4s; }
.phase-card:nth-child(4) { animation-delay: 0.55s; }
.phase-card:nth-child(5) { animation-delay: 0.7s; }

/* Step number circle */
.phase-step {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    z-index: 2;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.phase-card:nth-child(1) .phase-step { background: var(--cta-gradient-1); }
.phase-card:nth-child(2) .phase-step { background: var(--cta-gradient-3); }
.phase-card:nth-child(3) .phase-step { background: var(--cta-gradient-2); }
.phase-card:nth-child(4) .phase-step { background: linear-gradient(135deg, var(--accent), #FF8ED4); }
.phase-card:nth-child(5) .phase-step { background: linear-gradient(135deg, #25D366, #4ECDC4); }

.phase-card:hover .phase-step {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Icon inside step */
.phase-icon {
    margin-bottom: 0;
    line-height: 0;
}

.phase-svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Card content below the step */
.phase-content {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--glass-shadow);
    width: 100%;
}

.phase-card:hover .phase-content {
    background: var(--glass-bg-light);
    border-color: var(--glass-border-light);
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-hover);
}

.phase-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
    line-height: 1.3;
}

.phase-card p {
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.5;
    margin: 0;
}

/* =====================
   9. BLOG CARDS
   ===================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}

.blog-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--glass-shadow);
}

.blog-card:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-10px);
    box-shadow: var(--glass-shadow-hover);
}

.blog-card-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.08);
}

.blog-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--cta-gradient-1);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
}

.blog-card-content {
    padding: 24px;
}

.blog-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--gray-medium);
}

.blog-card-content h2 {
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.blog-card-content h2 a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-content h2 a:hover {
    color: var(--accent);
}

.blog-card-content p {
    color: var(--gray-light);
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =====================
   10. BLOG ARTICLE
   ===================== */
.blog-article {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.article-header {
    grid-column: 1 / -1;
    margin-bottom: 24px;
}

.article-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.article-category {
    background: var(--cta-gradient-1);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
}

.article-date,
.article-reading-time {
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.article-header h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    color: var(--white);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    margin-bottom: 12px;
}

.article-subtitle {
    font-size: 1.2rem;
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.article-content {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--glass-shadow);
}

.article-content h2 {
    font-size: 1.6rem;
    color: var(--white);
    margin: 32px 0 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.article-content h2:first-child {
    margin-top: 0;
}

.article-content h3 {
    font-size: 1.2rem;
    color: var(--white);
    margin: 24px 0 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.article-content img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 100%;
}

.article-content p {
    margin-bottom: 16px;
    color: var(--gray-light);
    line-height: 1.8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.article-content ul,
.article-content ol {
    margin: 16px 0;
    padding-left: 24px;
}

.article-content li {
    margin-bottom: 8px;
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.article-content pre {
    background: rgba(45, 52, 54, 0.8);
    color: var(--white);
    padding: 20px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 20px 0;
    font-family: 'Courier New', monospace;
}

.article-content strong {
    color: var(--white);
    font-weight: 700;
}

.article-content a {
    /* --primary su vetro chiaro arriva a 2.1:1: il giallo accento e' 4.6:1 */
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(255, 230, 109, 0.45);
    transition: text-decoration-color 0.3s ease;
}

.article-content a:hover {
    text-decoration-color: var(--accent);
}

.article-cta {
    margin: 40px 0;
}

.article-share {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.article-share h3 {
    margin-bottom: 16px;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.share-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.share-btn {
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    color: white;
}

.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #1DA1F2; }
.share-btn.whatsapp { background: #25D366; }

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Article Sidebar */
.article-sidebar {
    position: sticky;
    top: 100px;
}

.related-articles,
.blog-cta-sidebar {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--glass-shadow);
}

.related-articles h3,
.blog-cta-sidebar h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.related-articles ul {
    list-style: none;
    padding: 0;
}

.related-articles li {
    margin-bottom: 12px;
}

.related-articles a {
    color: var(--gray-light);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.related-articles a:hover {
    color: var(--primary);
}

.blog-cta-sidebar p {
    color: var(--gray-light);
    margin-bottom: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =====================
   11. BREADCRUMB
   ===================== */
.breadcrumb {
    margin-bottom: 32px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 230, 109, 0.15);
    transition: all 0.3s ease;
}

.breadcrumb a:hover {
    background: rgba(255, 230, 109, 0.25);
}

.breadcrumb [aria-current="page"] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 600;
}

/* =====================
   12. FORMS
   ===================== */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    color: var(--white);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 230, 109, 0.3), var(--shadow-md);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--primary);
}

.checkbox-label span {
    font-size: 0.9rem;
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.checkbox-label a {
    color: var(--primary);
    text-decoration: underline;
}

/* =====================
   13. PROGRAMMA SETTIMANALE - TIMELINE
   ===================== */

/* Legend / key */
.timeline-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.timeline-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--gray-light);
}

.timeline-legend-item .dot {
    width: 10px;
    height: 10px;
    margin-right: 0;
}

/* Expand/collapse button */
.programma-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--white);
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--glass-shadow);
}

.programma-toggle:hover {
    background: var(--glass-bg-light);
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover);
}

.programma-toggle .arrow {
    transition: transform 0.3s;
    font-size: 0.8rem;
}

.programma-toggle[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

/* Timeline container */
.timeline {
    border-left: none;
    margin: 0;
    padding-left: 0;
}

#timeline-container[aria-hidden="true"] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s ease;
}

#timeline-container[aria-hidden="false"] {
    max-height: 5000px;
    opacity: 1;
    transition: max-height 0.7s cubic-bezier(.4,0,.2,1), opacity 0.5s ease;
}

/* Day cards */
.timeline-item {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: all 0.3s;
}

.timeline-item:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Day header with emoji */
.timeline-day {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--accent);
    font-size: 1.05rem;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-day-icon {
    font-size: 1.2rem;
}

/* Entries grid */
.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s;
}

.timeline-entry:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
}

.timeline-time {
    min-width: 110px;
    color: var(--white);
    font-weight: 700;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.timeline-desc {
    background: none;
    backdrop-filter: none;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    flex: 1;
    font-size: 0.9rem;
    color: var(--gray-light);
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.dot.blue { background: var(--blue); box-shadow: 0 0 6px rgba(91, 155, 213, 0.4); }
.dot.green { background: var(--secondary); box-shadow: 0 0 6px rgba(78, 205, 196, 0.4); }
.dot.orange { background: #FFA94D; box-shadow: 0 0 6px rgba(255, 169, 77, 0.4); }
.dot.purple { background: var(--purple); box-shadow: 0 0 6px rgba(166, 108, 255, 0.4); }

/* =====================
   14. ATTIVITÀ SETTIMANALE - FREQUENCY CARDS
   ===================== */
.frequency-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.frequency-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xl);
    padding: 28px 22px 22px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
    /* opacity/transform iniziali stanno solo in @keyframes: senza animazione
       (reduce-motion, CSS non caricato) la card resta visibile */
    animation: freqFadeIn 0.5s ease both;
}

.frequency-card:nth-child(1) { animation-delay: 0.1s; }
.frequency-card:nth-child(2) { animation-delay: 0.2s; }
.frequency-card:nth-child(3) { animation-delay: 0.3s; }
.frequency-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes freqFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glow on hover */
.frequency-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 107, 107, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.frequency-card:hover::before {
    opacity: 1;
}

.frequency-card:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Popular card highlight */
.frequency-card:nth-child(2) {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.3);
    box-shadow: 0 8px 32px rgba(255, 107, 107, 0.15);
}

.frequency-card:nth-child(2):hover {
    background: rgba(255, 107, 107, 0.25);
    box-shadow: 0 12px 40px rgba(255, 107, 107, 0.25);
}

.freq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.freq-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--glass-bg-light);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    position: relative;
}

.frequency-card:hover .freq-icon {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.freq-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.3;
}

.freq-role {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-medium);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Intensity bars */
.freq-intensity {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin: 4px 0 0;
}

.freq-intensity .bar {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.3s;
}

.freq-intensity .bar.active {
    background: var(--accent);
}

.freq-toggle {
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-medium);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.freq-toggle::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.3s;
}

.frequency-card[aria-expanded="true"] .freq-toggle::after {
    transform: rotate(180deg);
}

.frequency-card[aria-expanded="true"] .freq-toggle {
    color: var(--accent);
}

.freq-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
    opacity: 0;
}

.frequency-card[aria-expanded="true"] .freq-details {
    /* abbastanza spazio per il paragrafo + bottone anche a 320px */
    max-height: 500px;
    opacity: 1;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.freq-details p {
    color: var(--gray-light);
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.6;
    text-align: center;
}

.freq-details .btn {
    display: block;
    margin: 0 auto;
}

.popular-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--cta-gradient-1);
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(255, 107, 107, 0.6); }
}

/* =====================
   15. PRICING CARDS
   ===================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 28px;
    transition: all 0.3s ease;
    box-shadow: var(--glass-shadow);
}

.pricing-card.popular {
    /* 0.35 rendeva il vetro troppo chiaro: il prezzo accent scendeva a 3.9:1 */
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 107, 107, 0.3);
    transform: scale(1.03);
    box-shadow: var(--glass-shadow-hover);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--glass-shadow-hover);
}

.pricing-tier {
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
    font-size: 1.2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.pricing-intro {
    color: var(--gray-light);
    margin-bottom: 16px;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.plans {
    margin-bottom: 20px;
}

.plan-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-row:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(4px);
}

.plan-row.selected {
    background: rgba(255, 230, 109, 0.15);
    border-color: rgba(255, 230, 109, 0.3);
    box-shadow: 0 0 15px rgba(255, 230, 109, 0.1);
}

.plan-name {
    font-weight: 700;
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.plan-price {
    font-weight: 800;
    color: var(--accent);
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.badge-pop {
    background: var(--cta-gradient-1);
    color: white;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-left: 8px;
}

/* Avvertenza: prezzi promozionali soggetti a variazione */
.price-note {
    max-width: 760px;
    margin: 0 auto 24px;
    padding: 12px 18px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 230, 109, 0.1);
    border: 1px dashed rgba(255, 230, 109, 0.55);
    border-radius: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.price-note strong {
    color: var(--accent);
}

.small-cta {
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
}

/* =====================
   16. VIDEO + GALLERY
   ===================== */

/* Video in evidenza: larghezza piena sopra gli altri */
.video-card-featured {
    margin-bottom: 24px;
    border-color: rgba(255, 230, 109, 0.45);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 230, 109, 0.08);
}

.video-card-featured .video-frame {
    aspect-ratio: 21 / 9;
}

.video-card-featured figcaption {
    padding: 22px 24px 24px;
}

.video-card-featured figcaption h3 {
    font-size: 1.35rem;
}

.video-card-featured figcaption p {
    font-size: 0.95rem;
    max-width: 760px;
}

.video-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFE66D, #FFB84D);
    color: #2D3436;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 10px;
}

.video-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    align-items: start;
}

.video-card {
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow-hover);
}

.video-frame {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
}

.video-frame video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Video verticale (9:16): limitato in larghezza per non diventare enorme */
.video-frame-vertical {
    aspect-ratio: 9 / 16;
    max-height: 400px;
    margin: 0 auto;
    width: 100%;
}

.video-card figcaption {
    padding: 18px 20px 20px;
}

.video-card figcaption h3 {
    font-size: 1.05rem;
    color: var(--white);
    margin-bottom: 6px;
}

.video-card figcaption p {
    font-size: 0.9rem;
    color: var(--gray-light);
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
    .video-card-featured .video-frame {
        aspect-ratio: 16 / 9;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-frame-vertical {
        max-width: 280px;
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/* =====================
   17. CONTACT
   ===================== */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.contact-info-full h2 {
    text-align: left;
    margin-bottom: 16px;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}

.contact-method {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}

.contact-method:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(8px);
}

.method-icon {
    flex-shrink: 0;
}

.method-content h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.method-content p {
    color: var(--gray-light);
    margin-bottom: 12px;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.contact-details-box {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-top: 32px;
}

.contact-details-box h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row strong {
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.detail-row span {
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.social-links {
    margin-top: 32px;
}

.social-links h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

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

/* Contact Form Container */
.contact-form-container {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-2xl);
    padding: 36px;
    box-shadow: var(--glass-shadow);
}

.contact-form-container h3 {
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.contact-form-container > p {
    color: var(--gray-light);
    margin-bottom: 24px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Map Section */
.map-section {
    margin-top: 60px;
}

.map-container {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.map-directions {
    text-align: center;
    margin-top: 20px;
}

/* FAQ Section */
.faq-section {
    margin-top: 60px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.faq-item h3 {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.faq-item p {
    color: var(--gray-light);
    font-size: 0.95rem;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =====================
   18. ABOUT PAGE
   ===================== */
.hero-small {
    padding: 120px 0 60px;
    text-align: center;
    position: relative;
}

.hero-small h1 {
    color: white;
    margin-bottom: 16px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.hero-small p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

/* =====================
   CHI SIAMO - ABOUT SECTION
   ===================== */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* Left: image with decorative frame */
.about-media {
    position: relative;
}

.about-media::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--primary), var(--accent), var(--secondary));
    opacity: 0.3;
    z-index: 0;
    animation: aboutGlow 4s ease-in-out infinite alternate;
}

/* Su schermi stretti il padding del container (12px) e' uguale all'inset del bordo
   decorativo: senza questo il gradiente viene tagliato. */
@media (max-width: 768px) {
    .about-media::before {
        inset: -8px;
    }
}

@keyframes aboutGlow {
    0% { opacity: 0.2; transform: scale(1); }
    100% { opacity: 0.4; transform: scale(1.02); }
}

.about-hero-img {
    position: relative;
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: 1;
}

/* Floating badge */
.about-badge {
    position: absolute;
    bottom: -16px;
    right: 20px;
    background: var(--cta-gradient-1);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Right: text content */
.about-text .lead {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.6;
}

.about-text p {
    color: var(--gray-light);
    margin-bottom: 16px;
    line-height: 1.8;
}

/* Stats row */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.about-stat {
    text-align: center;
    padding: 16px 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-stat-number {
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.6rem;
    color: var(--accent);
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.about-stat-label {
    font-size: 0.75rem;
    color: var(--gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Feature cards */
.about-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.feature:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feature:nth-child(1) .feature-icon { background: rgba(255, 107, 107, 0.2); }
.feature:nth-child(2) .feature-icon { background: rgba(255, 230, 109, 0.2); }
.feature:nth-child(3) .feature-icon { background: rgba(78, 205, 196, 0.2); }
.feature:nth-child(4) .feature-icon { background: rgba(166, 108, 255, 0.2); }

.feature h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 2px;
}

.feature p {
    font-size: 0.78rem;
    color: var(--gray-medium);
    margin: 0;
    line-height: 1.3;
}

/* Testimonial */
.testimonial {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: 16px 20px;
    margin: 20px 0;
    font-style: italic;
    color: var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.6;
}

.testimonial cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
    font-size: 0.8rem;
}

/* Mission Grid */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.mission-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: var(--glass-shadow);
}

.mission-card:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-8px);
    box-shadow: var(--glass-shadow-hover);
}

.mission-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.mission-card h3 {
    font-size: 1.2rem;
    color: var(--white);
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.mission-card p {
    color: var(--gray-light);
    font-size: 0.95rem;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Values */
.values-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.value-item {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.3s ease;
}

.value-item:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(8px);
}

.value-item h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.value-item p {
    color: var(--gray-light);
    font-size: 0.95rem;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.team-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: var(--glass-shadow);
}

.team-card:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-8px);
    box-shadow: var(--glass-shadow-hover);
}

.team-avatar {
    font-size: 4rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.team-card h3 {
    font-size: 1.2rem;
    color: var(--white);
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.team-role {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.team-card p:last-child {
    color: var(--gray-light);
    font-size: 0.95rem;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Approach */
.approach-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.approach-text p {
    color: var(--gray-light);
    margin-bottom: 16px;
    line-height: 1.8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.approach-text h3 {
    font-size: 1.2rem;
    color: var(--white);
    margin: 24px 0 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.approach-text ul {
    list-style: none;
    padding: 0;
}

.approach-text li {
    padding: 8px 0 8px 24px;
    position: relative;
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.approach-text li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
}

.approach-visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.approach-step {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.approach-step:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(8px);
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--cta-gradient-1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.step-content p {
    color: var(--gray-light);
    font-size: 0.9rem;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Location */
.location-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.location-info h3 {
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.location-info p {
    color: var(--gray-light);
    margin-bottom: 24px;
    line-height: 1.8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.location-details {
    margin-bottom: 24px;
}

.detail-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gray-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.detail-item:last-child {
    border-bottom: none;
}

.location-map {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* Legal Content */
.legal-content {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--glass-shadow);
}

.legal-content h2 {
    font-size: 1.4rem;
    color: var(--white);
    margin: 32px 0 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    color: var(--gray-light);
    margin-bottom: 12px;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.legal-content ul {
    margin: 12px 0 12px 24px;
    color: var(--gray-light);
}

.legal-content li {
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.legal-content a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cookie-table th,
.cookie-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cookie-table th {
    background: rgba(255, 107, 107, 0.2);
    font-weight: 700;
    color: var(--white);
}

.cookie-table td {
    color: var(--gray-light);
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.contact-box {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    margin-top: 40px;
}

.contact-box h3 {
    color: var(--white);
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.contact-box p {
    color: var(--gray-light);
    margin-bottom: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =====================
   18b. CONTATTI INDEX - IMPACT
   ===================== */
.contact {
    position: relative;
    overflow: hidden;
}

.contact .container {
    position: relative;
    z-index: 2;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* --- Left: contact info cards --- */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--glass-shadow);
}

.contact-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--glass-border-light);
    background: var(--glass-bg-light);
}

.contact-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.15);
}

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

.contact-item h3 {
    color: var(--white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.contact-item p,
.contact-item a {
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s;
}

.contact-item a:hover {
    color: var(--accent);
}

.btn-link {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--accent) !important;
}

/* --- Right: media / image --- */
.contact-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-media img {
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

.contact-media img:hover {
    transform: scale(1.03);
}

.contact-media::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at 30% 40%, rgba(255, 107, 107, 0.18), transparent 60%),
                radial-gradient(circle at 70% 60%, rgba(78, 205, 196, 0.15), transparent 60%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: contactPulse 4s ease-in-out infinite alternate;
}

@keyframes contactPulse {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.06); }
}

/* --- CTA banner under the section --- */
.contact-cta {
    margin-top: 48px;
    text-align: center;
}

.contact-cta .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}

.contact-cta .btn-whatsapp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent);
    border-radius: inherit;
    pointer-events: none;
}

.contact-cta .btn-whatsapp:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 36px rgba(37, 211, 102, 0.55);
}

.contact-cta .btn-whatsapp:active {
    transform: scale(0.97);
}

.contact-cta .btn-whatsapp svg {
    width: 22px;
    height: 22px;
}

.contact-cta p {
    color: var(--gray-medium);
    margin-top: 12px;
    font-size: 0.9rem;
}

/* =====================
   19. FOOTER
   ===================== */
.footer {
    background: rgba(45, 52, 54, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 48px 0 24px;
}

.footer-content {
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-legal {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--white);
}

.footer p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.footer-credit {
    margin-bottom: 16px;
}

.footer-credit a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

.footer-credit a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* =====================
   20. MODALS
   ===================== */
.wa-modal {
    display: none;
}

.wa-modal.open {
    display: block;
}

.wa-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1500;
}

.wa-modal-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1600;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    width: 92%;
    max-width: 520px;
    border-radius: var(--radius-2xl);
    padding: 32px;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.wa-modal-panel h3 {
    margin-bottom: 8px;
    color: var(--dark);
    text-shadow: none;
}

.wa-modal-panel p {
    margin-bottom: 16px;
    color: var(--gray);
    text-shadow: none;
}

.wa-modal-panel .form-group label {
    color: var(--dark);
}

.wa-modal-panel .form-group input,
.wa-modal-panel .form-group select,
.wa-modal-panel .form-group textarea {
    background: rgba(0, 0, 0, 0.05);
    color: var(--dark);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.wa-modal-panel .form-group input::placeholder,
.wa-modal-panel .form-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.wa-modal-panel .form-group input:focus,
.wa-modal-panel .form-group select:focus,
.wa-modal-panel .form-group textarea:focus {
    background: #fff;
    border-color: var(--accent);
    color: var(--dark);
    box-shadow: 0 0 0 3px rgba(255, 230, 109, 0.3);
}

.wa-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.wa-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Map Modal */
.map-modal {
    display: none;
}

.map-modal[aria-hidden="false"] {
    display: block;
}

.map-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1500;
}

.map-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1600;
    width: 90%;
    max-width: 900px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    padding: 24px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.map-close {
    position: absolute;
    right: 16px;
    top: 16px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.map-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.map-frame iframe {
    width: 100%;
    height: 480px;
    border: 0;
    border-radius: var(--radius-lg);
}

/* Success Message */
.success-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 184, 148, 0.95);
    backdrop-filter: blur(20px);
    color: var(--white);
    padding: 40px 48px;
    border-radius: var(--radius-2xl);
    text-align: center;
    z-index: 2000;
    display: none;
    animation: popIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-xl);
}

.success-message.show {
    display: block;
}

.success-message h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.success-message p {
    opacity: 0.9;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1999;
    display: none;
}

.overlay.show {
    display: block;
}

@keyframes popIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* =====================
   21. ANIMATIONS
   ===================== */
@keyframes bounce {
    0%, 100% { transform: translateY(-5px) scale(1.05); }
    50% { transform: translateY(-15px) scale(1.1); }
}

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

/* =====================
   22. RESPONSIVE
   ===================== */
@media (max-width: 1024px) {
    .blog-article {
        grid-template-columns: 1fr;
    }
    
    .article-sidebar {
        position: static;
    }
    
    .about-content,
    .contact-page-grid,
    .approach-content,
    .location-content {
        grid-template-columns: 1fr;
    }
    
    .about-media {
        order: -1;
    }
    
    .about-hero-img {
        max-width: 100%;
    }
    
    .about-badge {
        bottom: -10px;
        right: 10px;
        font-size: 0.75rem;
        padding: 10px 16px;
    }
    
    .about-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .about-text {
        padding: 0;
    }
    
    .location-map {
        margin-top: 20px;
    }
    
    .location-map iframe {
        height: 300px;
    }
    
    .mission-card,
    .team-card,
    .value-item {
        padding: 20px;
    }
    
    .mission-icon,
    .team-avatar {
        font-size: 2.5rem;
    }
    
    .legal-content {
        padding: 20px;
    }
    
    .legal-content h2 {
        font-size: 1.2rem;
    }
    
    .cookie-table {
        font-size: 0.85rem;
    }
    
    .cookie-table th,
    .cookie-table td {
        padding: 8px 10px;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 4px;
        font-size: 0.9rem;
    }
    
    .detail-item {
        font-size: 0.9rem;
    }
    
    .contact-info-full h2 {
        font-size: 1.4rem;
    }
    
    .contact-details-box {
        padding: 16px;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .approach-visual {
        order: -1;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    .header {
        padding: 10px 0;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .hero {
        padding: 100px 16px 60px;
        min-height: auto;
    }
    
    .hero-content {
        padding: 0;
    }
    
    .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-tagline {
        font-size: 0.9rem;
    }
    
    .hero-age {
        font-size: 0.9rem;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .hero .btn-primary,
    .hero .btn-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .section-title {
        margin-bottom: 32px;
        font-size: clamp(1.4rem, 4vw, 2rem);
    }
    
    .breadcrumb ol {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .breadcrumb a {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
    
    .container {
        padding: 0 16px;
        overflow-x: hidden;
        overflow-x: clip;
    }
    
    main.section.page-main {
        padding-top: 100px !important;
    }
    
    .about-features-grid {
        grid-template-columns: 1fr;
    }
    
    .feature {
        padding: 16px;
    }
    
    .feature-icon {
        font-size: 2rem;
    }
    
    .phase-card {
        padding: 0;
    }
    
    .phases-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 20px;
    }
    
    .phases-grid::before {
        top: 32px;
        left: 32px;
        right: auto;
        width: 3px;
        height: calc(100% - 32px);
    }
    
    .phase-card {
        flex-direction: row;
        text-align: left;
        gap: 16px;
        padding: 12px 0;
        opacity: 1;
        transform: none;
        animation: none;
    }
    
    .phase-step {
        width: 64px;
        height: 64px;
        min-width: 64px;
        margin-bottom: 0;
    }
    
    .phase-content {
        padding: 16px;
    }
    
    .phase-svg {
        width: 28px;
        height: 28px;
    }
    
    .frequency-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .frequency-card {
        padding: 20px 16px 16px;
    }
    
    .freq-icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
    
    .freq-header {
        gap: 10px;
    }
    
    .freq-header h4 {
        font-size: 0.9rem;
    }
    
    .freq-intensity .bar {
        width: 20px;
    }
    
    .pricing-card {
        padding: 16px;
    }
    
    .pricing-tier {
        font-size: 1rem;
    }
    
    .plan-row {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    .btn-sm {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-card-image {
        height: 180px;
    }
    
    .blog-card-content {
        padding: 16px;
    }
    
    .blog-card-content h2 {
        font-size: 1.1rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .gallery-item img {
        height: 150px;
    }
    
    .frequency-timeline,
    .pricing-grid,
    .mission-grid,
    .team-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-card {
        padding: 20px;
    }
    
    .plan-row {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    .timeline-entry {
        flex-direction: column;
        gap: 4px;
    }
    
    .timeline-time {
        min-width: auto;
        font-size: 0.82rem;
    }
    
    .timeline-desc {
        font-size: 0.88rem;
    }
    
    .timeline-item {
        padding: 16px 18px;
    }
    
    .timeline-legend {
        gap: 16px;
    }
    
    .contact-methods {
        gap: 16px;
    }
    
    .contact-method {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-box {
        padding: 20px;
    }
    
    .contact-box h3 {
        font-size: 1.1rem;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .contact-media {
        order: -1;
    }
    
    .contact-media img {
        max-width: 100%;
    }
    
    .contact-item {
        padding: 16px 18px;
    }
    
    .contact-cta .btn-whatsapp {
        padding: 14px 28px;
        font-size: 1rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 12px;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 12px;
    }
    
    .footer p {
        font-size: 0.8rem;
    }
    
    .approach-step {
        flex-direction: column;
        text-align: center;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    
    .contact-form-container {
        padding: 20px;
    }
    
    .contact-form-container h3 {
        font-size: 1.2rem;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .map-section {
        margin-top: 40px;
    }
    
    .map-frame iframe {
        height: 300px;
    }
    
    .wa-modal-panel {
        padding: 20px;
        width: 95%;
    }
    
    .map-panel {
        width: 95%;
        padding: 16px;
    }
    
    .success-message {
        padding: 24px;
        width: 90%;
    }
    
    .success-message h3 {
        font-size: 1.2rem;
    }
    
    .booking-list {
        padding: 20px;
    }
    
    .booking-item {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .whatsapp-icon {
        width: 18px;
        height: 18px;
    }
    
    .clapperboard {
        display: none;
    }
    
    .film-frame {
        width: 40px;
        height: 28px;
    }
    
    .star {
        font-size: 1.5rem;
    }
    
    .floating-icon {
        font-size: 1.8rem;
    }
    
    .site-logo {
        width: 40px;
        height: 40px;
    }
    
    .contact-icon {
        font-size: 2rem;
    }
    
    .method-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
    }
    
    .social-link svg {
        width: 20px;
        height: 20px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .article-sidebar {
        margin-top: 24px;
    }
    
    .related-articles,
    .blog-cta-sidebar {
        padding: 16px;
    }
    
    .article-cta {
        padding: 20px !important;
        margin: 24px 0 !important;
    }
    
    .article-cta h3 {
        font-size: 1.2rem;
    }
    
    .article-share {
        margin-top: 24px;
        padding-top: 16px;
    }
    
    .cookie-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .legal-content {
        padding: 16px;
    }
    
    .legal-content h2 {
        font-size: 1.1rem;
    }
    
    .legal-content p {
        font-size: 0.9rem;
    }
    
    .contact-box {
        padding: 16px;
    }
    
    .contact-box h3 {
        font-size: 1rem;
    }
    
    .contact-box p {
        font-size: 0.9rem;
    }
    
    .about-text .lead {
        font-size: 0.95rem;
    }
    
    .about-text p {
        font-size: 0.95rem;
    }
    
    .mission-card h3 {
        font-size: 1rem;
    }
    
    .mission-card p {
        font-size: 0.9rem;
    }
    
    .team-card h3 {
        font-size: 1rem;
    }
    
    .team-card p:last-child {
        font-size: 0.9rem;
    }
    
    .value-item h3 {
        font-size: 1rem;
    }
    
    .value-item p {
        font-size: 0.9rem;
    }
    
    .approach-step {
        padding: 16px;
    }
    
    .approach-text h3 {
        font-size: 1rem;
    }
    
    .approach-text p {
        font-size: 0.9rem;
    }
    
    .location-info h3 {
        font-size: 1.2rem;
    }
    
    .location-info p {
        font-size: 0.9rem;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 4px;
        font-size: 0.9rem;
    }
    
    .workshop-card {
        grid-template-columns: 1fr;
    }
    
    .workshop-media {
        min-height: 220px;
    }
    
    .workshop-content {
        padding: 24px 20px;
    }
    
    .workshop-features {
        grid-template-columns: 1fr;
    }
    
    .workshop-cta {
        flex-direction: column;
        text-align: center;
    }
    
    .blog-article {
        gap: 24px;
    }
    
    .article-content {
        padding: 20px;
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .article-content img {
        margin-bottom: 20px !important;
        border-radius: 8px !important;
    }
    
    .article-content pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.8rem;
        padding: 12px;
        margin: 12px 0;
    }
    
    .article-content ul,
    .article-content ol {
        padding-left: 20px;
    }
    
    .article-header h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .article-meta {
        gap: 8px;
    }
    
    .article-meta span {
        font-size: 0.8rem;
    }
    
    .share-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        text-align: center;
    }
    
    .article-cta {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-film-strip {
        display: none;
    }
    
    .floating-elements {
        display: none;
    }
    
    .decoration-stars {
        display: none;
    }
    
    .article-content {
        padding: 16px;
    }
    
    .article-content h2 {
        font-size: 1.3rem;
    }
    
    .article-content h3 {
        font-size: 1.1rem;
    }
    
    .article-content p {
        font-size: 0.95rem;
    }
    
    .article-content pre {
        font-size: 0.75rem;
        padding: 10px;
    }
    
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    pre, code {
        overflow-x: auto;
        word-wrap: normal;
    }
}

/* =====================
   23. UTILITIES
   ===================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* WhatsApp Icon */
.whatsapp-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Booking Styles (legacy) */
.booking-list {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    padding: 32px;
    margin-top: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.booking-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.booking-status {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.booking-status.pending {
    background: rgba(255, 230, 109, 0.3);
    color: #b38600;
}

.booking-status.confirmed {
    background: rgba(0, 184, 148, 0.3);
    color: #00b894;
}

.delete-booking {
    background: rgba(255, 107, 107, 0.2);
    color: var(--primary);
    border: 1px solid rgba(255, 107, 107, 0.3);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    margin-left: 12px;
    transition: all 0.3s ease;
}

.delete-booking:hover {
    background: rgba(255, 107, 107, 0.3);
}

/* =====================
   MOBILE SAFETY NET - FIX COMPLETI
   ===================== */
@media (max-width: 768px) {
    /* Fix overflow globale */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Fix container */
    .container {
        max-width: 100% !important;
        padding: 0 16px !important;
        overflow-x: hidden !important;
        overflow-x: clip !important;
        width: 100% !important;
    }
    
    /* Fix section */
    .section {
        padding: 40px 0 !important;
    }
    
    /* Fix WhatsApp Modal - assicurarsi che sia sempre funzionante */
    .wa-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999 !important;
        display: none;
    }
    
    .wa-modal.open {
        display: block !important;
    }
    
    .wa-modal-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9998 !important;
        background: rgba(0, 0, 0, 0.6) !important;
    }
    
    .wa-modal-panel {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10000 !important;
        width: 92% !important;
        max-width: 520px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 20px !important;
    }
    
    /* Fix immagini */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Fix grid layouts - tutto a 1 colonna */
    .about-features-grid,
    .blog-grid,
    .pricing-grid,
    .mission-grid,
    .team-grid,
    .faq-grid,
    .contact-page-grid,
    .approach-content,
    .location-content,
    .about-content {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Fix gallery a 1 colonna */
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Fix blog article */
    .blog-article {
        display: block !important;
        gap: 20px !important;
    }
    
    .article-sidebar {
        margin-top: 24px !important;
    }
    
    /* Fix article content */
    .article-content,
    .legal-content,
    .contact-form-container,
    .glass-card {
        overflow: hidden !important;
        padding: 16px !important;
    }
    
    .article-content img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    .article-content pre {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        word-break: break-all !important;
        padding: 12px !important;
    }
    
    .article-content ul,
    .article-content ol {
        padding-left: 20px !important;
    }
    
    /* Fix hero sections */
    .hero {
        padding: 80px 16px 50px !important;
        min-height: auto !important;
    }
    
    .hero-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    /* Fix header */
    .header {
        padding: 10px 0 !important;
    }
    
    .site-logo {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Fix cards */
    .workshop-card,
    .phase-card,
    .frequency-card,
    .pricing-card,
    .mission-card,
    .team-card,
    .feature {
        padding: 12px !important;
    }
    
    .about-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .about-stat-number {
        font-size: 1.3rem !important;
    }
    
    .about-badge {
        bottom: -8px !important;
        right: 8px !important;
        font-size: 0.7rem !important;
        padding: 8px 12px !important;
    }
    
    /* Fix timeline */
    .timeline-item {
        padding: 14px 14px !important;
    }
    
    .timeline-entry {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .timeline-time {
        min-width: auto !important;
        font-size: 0.8rem !important;
    }
    
    .timeline-legend {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Fix contact methods */
    .contact-method {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* Fix contact section mobile */
    .contact-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .contact-media {
        order: -1 !important;
    }
    
    .contact-cta {
        margin-top: 32px !important;
    }
    
    .contact-cta .btn-whatsapp {
        padding: 14px 28px !important;
        font-size: 1rem !important;
    }
    
    /* Fix footer */
    .footer-links {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .footer-legal {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Fix breadcrumb */
    .breadcrumb ol {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    /* Fix modals */
    .wa-modal-panel,
    .map-panel {
        width: 95% !important;
        padding: 16px !important;
    }
    
    .map-frame iframe {
        height: 250px !important;
    }
    
    /* Fix form */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 14px !important;
        font-size: 16px !important;
    }
    
    /* Fix buttons */
    .btn {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }
    
    /* Fix elements with inline styles */
    [style*="padding-top: 120px"],
    [style*="padding-top:120px"] {
        padding-top: 80px !important;
    }
    
    /* Fix hero decorations */
    .clapperboard,
    .floating-elements,
    .decoration-stars,
    .hero-film-strip {
        display: none !important;
    }
    
    /* Fix plan rows */
    .plan-row {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }
    
    /* Fix detail rows */
    .detail-row {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    /* Fix approach steps */
    .approach-step {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* Fix article header */
    .article-header h1 {
        font-size: 1.5rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Fix article meta */
    .article-meta {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    /* Fix share buttons */
    .share-buttons {
        flex-direction: column !important;
    }
    
    /* Fix cookie table */
    .cookie-table {
        display: block !important;
        overflow-x: auto !important;
    }
    
    /* Fix success message */
    .success-message {
        width: 90% !important;
        padding: 24px !important;
    }
    
    /* Fix booking items */
    .booking-item {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* =====================
   VERY SMALL SCREENS (480px)
   ===================== */
@media (max-width: 480px) {
    .container {
        padding: 0 12px !important;
    }
    
    .section {
        padding: 30px 0 !important;
    }
    
    .hero {
        padding: 60px 12px 40px !important;
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    
    .hero-tagline {
        font-size: 0.85rem !important;
    }
    
    .section-title {
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
    }
    
    .article-content,
    .legal-content,
    .contact-form-container,
    .glass-card {
        padding: 12px !important;
    }
    
    .workshop-card,
    .phase-card,
    .frequency-card,
    .pricing-card,
    .mission-card,
    .team-card,
    .feature {
        padding: 12px !important;
    }
    
    .phase-step {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        font-size: 1.1rem !important;
    }
    
    .phase-svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .phases-grid::before {
        left: 26px !important;
    }
    
    .frequency-timeline {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .freq-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.4rem !important;
    }
    
    .workshop-media {
        min-height: 180px !important;
    }
    
    .workshop-content {
        padding: 20px 16px !important;
    }
    
    .workshop-header h3 {
        font-size: 1.2rem !important;
    }
    
    .about-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    
    .about-stat {
        padding: 10px 4px !important;
    }
    
    .about-stat-number {
        font-size: 1.1rem !important;
    }
    
    .about-stat-label {
        font-size: 0.65rem !important;
    }
    
    .btn {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .blog-card-image {
        height: 150px !important;
    }
    
    .gallery-item img {
        height: 120px !important;
    }
}

/* =====================
   24. HOMEPAGE IMPROVEMENTS (hero badge, a11y, faq, freq)
   ===================== */
.skip-link{position:absolute;left:-9999px;top:0;background:#FFE66D;color:#2D3436;padding:10px 18px;border-radius:0 0 12px 0;font-weight:800;z-index:3000;text-decoration:none}
.skip-link:focus{left:0}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.4);color:#fff;font-size:.85rem;font-weight:700;padding:8px 18px;border-radius:9999px;margin-bottom:18px;letter-spacing:.3px}
.hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.7);animation:pulseDot 2s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.hero-trust{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:.85rem;color:rgba(255,255,255,.75)}
.hero-trust strong{color:#FFE66D}
/* Frequency cards: header is a real button (no nested-interactive issue) */
.freq-header-btn{background:none;border:none;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;cursor:pointer;width:100%;padding:0}
.freq-header-btn:focus-visible{outline:3px solid #FFE66D;outline-offset:4px;border-radius:16px}
/* FAQ accordion (homepage) */
.faq-list{display:grid;gap:12px;max-width:800px;margin:0 auto}
.faq-list details{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px 20px;transition:background .3s}
.faq-list details[open]{background:rgba(255,255,255,.18)}
.faq-list summary{cursor:pointer;font-weight:800;color:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';color:#FFE66D;font-size:1.4rem;line-height:1}
.faq-list details[open] summary::after{content:'–'}
.faq-list p{color:rgba(255,255,255,.85);margin-top:10px;font-size:.95rem}
.faq-list a{color:#FFE66D}
/* WA modal labels */
.wa-label{display:block;font-size:.8rem;font-weight:700;color:#2D3436;margin-bottom:6px;text-align:left}
/* Gallery captions */
.gallery-item figcaption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:.75rem;padding:4px 12px;border-radius:9999px;backdrop-filter:blur(6px)}
/* Timeline collapsed state (JS toggles [hidden]) */
#timeline-container[hidden]{display:none}

/* =====================
   25. CORSI / WORKSHOP (da volantino)
   ===================== */
.corsi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 8px}
.corso-card{background:rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:20px;display:flex;gap:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}
.corso-card:hover{background:rgba(255,255,255,.2);transform:translateY(-4px);border-color:rgba(255,255,255,.3);box-shadow:var(--glass-shadow-hover)}
.corso-icon{flex-shrink:0;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15)}
.corso-card h3{font-size:.95rem;color:#fff;margin:0 0 4px;letter-spacing:.3px}
.corso-card p{font-size:.85rem;color:rgba(255,255,255,.85);margin:0;line-height:1.5}
.corso-card:nth-child(1) h3{color:#FF8E8E}.corso-card:nth-child(2) h3{color:#8ED4FF}.corso-card:nth-child(3) h3{color:#FFD166}.corso-card:nth-child(4) h3{color:#7BE0A3}.corso-card:nth-child(5) h3{color:#C4A7FF}.corso-card:nth-child(6) h3{color:#FF9D9D}.corso-card:nth-child(7) h3{color:#8ED4FF}.corso-card:nth-child(8) h3{color:#7BE0A3}.corso-card:nth-child(9) h3{color:#FFB3C7}.corso-card:nth-child(10) h3{color:#FFD166}.corso-card:nth-child(11) h3{color:#8EE3E0}.corso-card:nth-child(12) h3{color:#E3A7FF}
/* Workshop banner */
.workshop-banner{margin-top:36px;background:linear-gradient(135deg,rgba(26,26,46,.85),rgba(83,52,131,.85));border:1px solid rgba(255,230,109,.35);border-radius:var(--radius-2xl);padding:32px;box-shadow:var(--glass-shadow);position:relative;overflow:hidden}
.workshop-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,230,109,.12),transparent 60%);pointer-events:none}
.workshop-banner h3{color:#FFE66D;font-size:1.5rem;margin-bottom:6px;position:relative}
.workshop-banner .ws-sub{color:#fff;font-weight:700;margin-bottom:12px;position:relative}
.workshop-banner p{color:rgba(255,255,255,.88);font-size:.95rem;position:relative}
.ws-meta{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0;position:relative}
.ws-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:9999px;padding:10px 18px;font-size:.82rem;color:#fff;font-weight:700}
.ws-pill strong{color:#FFE66D}
/* Orari table */
.orari-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.orari-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:24px}
.orari-card h3{color:#fff;font-size:1.05rem;margin-bottom:4px}
.orari-card .orari-sub{font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:14px}
.orari-table{width:100%;border-collapse:collapse;font-size:.9rem}
.orari-table th,.orari-table td{padding:10px 12px;text-align:left}
.orari-table thead th{color:#FFE66D;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.2)}
.orari-table tbody td{color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.orari-table tbody tr:last-child td{border-bottom:none}
.orari-free{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35);border-radius:var(--radius-xl);padding:24px}
.orari-free h3{color:#25D366;font-size:1.05rem}
.orari-free p{color:rgba(255,255,255,.88);font-size:.9rem;margin:8px 0 16px}
@media (max-width:900px){.corsi-grid{grid-template-columns:repeat(2,1fr)}.orari-wrap{grid-template-columns:1fr}}
@media (max-width:560px){.corsi-grid{grid-template-columns:1fr}.workshop-banner{padding:24px 20px}}

/* =====================
   27. HOME REFINEMENT (grafica homepage)
   ===================== */
/* a) Font reali: il sito carica Fredoka (non Fredoka One) */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.logo-text
.section-title{font-weight:600}
/* b) Titoli sezione con accento giallo */
.section-title{position:relative;padding-bottom:18px}
.section-title::after{content:'';display:block;width:72px;height:5px;border-radius:9999px;margin:14px auto 0;background:linear-gradient(90deg,#FFE66D,#FF8ED4);box-shadow:0 2px 12px rgba(255,230,109,.5)}
/* Titoli allineati a sinistra: l'underline segue l'allineamento del testo */
.section-title[style*="text-align:left"]::after{margin-left:0;margin-right:0}
/* c) Bottoni: sheen + focus visibile */
.btn{letter-spacing:.2px}
.btn-primary{position:relative;isolation:isolate}
.btn-primary::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease;z-index:1;pointer-events:none}
.btn-primary:hover::after{left:130%}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #FFE66D;outline-offset:3px;border-radius:8px}
.btn:active{transform:translateY(-1px) scale(.98)}
/* d) Hero: titolo sfumato, badge vetro, dissolvenza bassa */
.hero{padding-bottom:110px}
.hero::before{background:radial-gradient(ellipse at 20% 50%,rgba(255,107,107,.18),transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(78,205,196,.15),transparent 50%),radial-gradient(ellipse at 50% 85%,rgba(255,230,109,.12),transparent 55%)}
.hero-title{background:linear-gradient(180deg,#fff 30%,#FFE66D 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 4px 18px rgba(255,230,109,.25));letter-spacing:3px}
.hero-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,230,109,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.hero-subtitle{color:#fff;font-weight:600}
.hero-tagline{font-size:1.08rem}
.hero .btn-primary,.hero .btn-secondary{padding:15px 34px;box-shadow:0 8px 28px rgba(255,107,107,.45)}
.hero-film-strip{opacity:.55;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
/* e) Spot workshop: card premium */
.ws-pill{transition:border-color .3s,background .3s,transform .3s}
.ws-pill:hover{border-color:rgba(255,230,109,.6);background:rgba(255,230,109,.12);transform:translateY(-2px)}
/* f) Card corsi: icone tinte + hover luminoso */
.corso-card{position:relative;overflow:hidden}
.corso-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);opacity:0;transition:opacity .3s}
.corso-card:hover::before{opacity:1}
.corso-card:hover{border-color:rgba(255,230,109,.45);box-shadow:0 14px 36px rgba(0,0,0,.3),0 0 24px rgba(255,230,109,.1)}
.corso-icon{box-shadow:0 4px 14px rgba(0,0,0,.25)}
.corso-card:nth-child(3n+1) .corso-icon{background:rgba(255,107,107,.2);border-color:rgba(255,107,107,.4)}
.corso-card:nth-child(3n+2) .corso-icon{background:rgba(78,205,196,.2);border-color:rgba(78,205,196,.4)}
.corso-card:nth-child(3n) .corso-icon{background:rgba(255,230,109,.18);border-color:rgba(255,230,109,.4)}
/* g) Barra spot leggibile su mobile */
/* h) Rispetto riduzione movimento */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto}}

/* =====================
   28. MINIMAL + LEGGIBILITÀ homepage
   ===================== */
/* Testi secondari più coprenti (bianchi semitrasparenti troppo chiari sul viola) */
:root{--gray-light:rgba(255,255,255,.94);--gray-medium:rgba(255,255,255,.88)}
/* Hero essenziale: niente decorazioni, più respiro al messaggio */
.decoration-stars,.floating-elements,.clapperboard,.hero-film-strip{display:none}
.hero{min-height:0;padding:150px 24px 90px}
.hero-trust{color:rgba(255,255,255,.92)}
.section{padding:64px 0}
/* Paragrafi su vetro: contrasto pieno */
.faq-list p{color:rgba(255,255,255,.93)}
.corso-card p{color:rgba(255,255,255,.92)}
.workshop-banner p{color:rgba(255,255,255,.94)}
.orari-card .orari-sub{color:rgba(255,255,255,.88)}
.orari-free p{color:rgba(255,255,255,.94)}
/* Bottone secondario: bianco su teal chiaro illeggibile (1.9:1) → gradiente scuro */
.btn-secondary{background:linear-gradient(135deg,#0E7C72,#2B6CB0);box-shadow:0 4px 15px rgba(14,124,114,.45)}
.btn-secondary:hover{box-shadow:0 8px 25px rgba(14,124,114,.55)}
/* Footer: testi sbiaditi alzati */
.footer-links a{color:rgba(255,255,255,.9)}
.footer-legal a{color:rgba(255,255,255,.78)}
.footer p{color:rgba(255,255,255,.78)}
.footer-credit a{color:rgba(255,255,255,.65)}
@media (max-width:640px){.hero{padding:130px 20px 70px}}

/* =====================
   29. GIOCOSO KIDS (essenziale + divertente)
   ===================== */
/* Emoji decorative sui titoli (CSS only, ignorate dagli screen reader) */
#chi-siamo .section-title::before{content:'🌟 '}
#laboratori .section-title::before{content:'🍿 '}
#fasi .section-title::before{content:'🎞️ '}
#video .section-title::before{content:'🎥 '}
#programma .section-title::before{content:'🗓️ '}
#faq .section-title::before{content:'❓ '}
#contatti .section-title::before{content:'💬 '}
#galleria .section-title::before{content:'📸 '}
/* Sticker storti */
.hero-badge{transform:rotate(-1deg)}
.about-badge{transform:rotate(2deg)}
/* Bottoni rimbalzini */
.btn{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background .3s ease}
.btn-primary:hover{transform:translateY(-3px) scale(1.05)}
/* Chips dei 12 laboratori */
.corsi-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-weight:800;font-size:.88rem;padding:10px 18px;border-radius:9999px;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:background .25s,border-color .25s}
.chip:nth-child(odd){transform:rotate(-1.5deg)}
.chip:nth-child(even){transform:rotate(1.5deg)}
.chip:hover{background:#FFE66D;color:#2D3436;border-color:#FFE66D;animation:wiggle .4s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) scale(1.1)}75%{transform:rotate(4deg) scale(1.1)}}
/* Abbonamenti in accordion */
.pricing-fold{margin-top:8px;text-align:center}
.pricing-fold summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:rgba(255,230,109,.14);border:2px dashed rgba(255,230,109,.6);color:#FFE66D;font-weight:800;font-size:1rem;padding:12px 26px;border-radius:9999px;list-style:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pricing-fold summary::-webkit-details-marker{display:none}
.pricing-fold summary::marker{content:''}
.pricing-fold summary:hover{transform:scale(1.05)}
.pricing-fold summary small{color:#fff;font-weight:600}
.pricing-fold[open] summary{margin-bottom:20px}
.pricing-fold .pricing-grid{text-align:left}
/* Coriandoli */
.confetti-piece{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;font-size:1.4rem;animation:confettiFall 1.1s ease-in forwards}
@keyframes confettiFall{to{transform:translate(var(--cx,0),46vh) rotate(340deg);opacity:0}}

/* =====================
   30. SFONDO SCURO + CONTRASTI (leggibilità)
   Il gradiente chiaro rendeva illeggibili i testi: fondo blu-notte cinema,
   CTA rosa e verdi scuriti con contrasto bianco verificato (≥4.5:1).
   ===================== */
body{background:linear-gradient(135deg,#14142b 0%,#23204d 45%,#3a2a63 75%,#4a2b6e 100%);background-attachment:fixed}
:root{--cta-gradient-1:linear-gradient(135deg,#D6336C,#A61E5E)}
.btn-primary{box-shadow:0 4px 15px rgba(214,51,108,.45)}
.btn-primary:hover{box-shadow:0 8px 25px rgba(214,51,108,.55)}
.hero .btn-primary{box-shadow:0 8px 28px rgba(214,51,108,.5)}
.contact-cta .btn-whatsapp{background:linear-gradient(135deg,#0F7A44,#0B5E34);box-shadow:0 6px 24px rgba(15,122,68,.5)}
.contact-cta .btn-whatsapp:hover{box-shadow:0 10px 36px rgba(15,122,68,.6)}