/* ============================================
   STUDIO CARDIOLOGICO - SWISS CLINIC AESTHETIC
   Elegant, Professional, Refined
   ============================================ */

/* === SELF-HOSTED FONTS === */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-serif-display-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-serif-display-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === CUSTOM PROPERTIES === */
:root {
    /* Swiss-inspired palette */
    --white: #FFFFFF;
    --off-white: #FAFAF8;
    --cream: #F5F4F1;
    --light-gray: #E8E7E4;
    --medium-gray: #636361;
    --dark-gray: #4A4A48;
    --charcoal: #1A1A1A;

    /* Accent - Elegant Sage Green */
    --green: #2E7D5E;
    --green-dark: #245F48;
    --green-light: #5BA88A;
    --green-pale: #EBF5F0;

    /* Velo verde dietro l'illustrazione dell'hero: due gradazioni piu'
       chiare di --green-pale, tenute distinte perche' il gradiente si vede
       solo se i due estremi non coincidono. */
    --hero-wash-top: #F0F7F3;
    --hero-wash-bottom: #E8F2EC;

    /* Semantic: errori/validazione (un solo sistema, prima erano tre) */
    --danger: #B91C1C;          /* testo errore su fondo chiaro */
    --danger-bg: #FEE2E2;       /* fondo avvisi errore */
    --danger-border: #EF4444;   /* bordo campo in errore */
    --danger-on-dark: #E39A7B;  /* errore su fondo scuro (footer) */

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing - Generous, Swiss-style */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 5rem;
    --space-3xl: 6rem;

    /* Layout */
    --max-width: 1200px;
    --header-height: 80px;

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.3s;

    /* Depth system - due livelli d'ombra, hairline editoriale */
    --hairline: 1px solid var(--light-gray);
    --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.06);
    --shadow-lift: 0 2px 4px rgba(26, 26, 26, 0.05), 0 16px 40px rgba(26, 26, 26, 0.10);
}

/* === SKIP NAVIGATION === */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--charcoal);
    color: var(--white);
    padding: var(--space-sm) var(--space-lg);
    z-index: 10000;
    font-family: var(--font-body);
    font-size: 0.875rem;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-nav:focus {
    top: 10px;
}

/* === BASE RESET === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--charcoal);
    background: var(--off-white);
}

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* === TYPOGRAPHY === */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--charcoal);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; }
h3 { font-size: 1.25rem; }

em {
    font-style: italic;
    color: var(--green);
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: var(--space-md);
}

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


/* Firma grafica ECG (hero) e divisore tra sezioni */
.ecg-line {
    width: 165px;
    height: 35px;
    color: var(--green);
    margin: 0.25rem 0 1.3rem;
}

.ecg-divider {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.ecg-divider svg {
    color: var(--green-light);
    opacity: 0.55;
    flex: none;
}

.ecg-divider::before,
.ecg-divider::after {
    content: '';
    height: 1px;
    background: var(--light-gray);
    flex: 1;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 0;
    transition: all var(--duration) var(--ease);
    position: relative;
}

.btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-arrow {
    display: flex;
    align-items: center;
    transition: transform var(--duration) var(--ease);
}

.btn-arrow svg {
    width: 18px;
    height: 18px;
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}

.btn-primary {
    background: var(--green);
    color: var(--white);
    border: 1px solid var(--green);
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06);
}

.btn-primary:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46, 125, 94, 0.22);
}

.btn-secondary {
    background: transparent;
    /* var(--green) su fondo verde-pallido (.btn-secondary dentro sezioni chiare)
       scendeva sotto 4.5:1: il verde scuro tiene lo stesso stile col contrasto giusto. */
    color: var(--green-dark);
    border: 1px solid var(--green);
}

.btn-secondary:hover {
    background: var(--green-pale);
}

.btn-ghost {
    background: transparent;
    color: var(--charcoal);
    border: 1px solid var(--light-gray);
}

.btn-ghost:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-pale);
}

.btn-white {
    background: var(--white);
    color: var(--green-dark);
    border: 1px solid var(--white);
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.btn-white:hover {
    background: var(--off-white);
    transform: translateY(-1px);
}

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

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

/* Button press feedback */
.btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* === HEADER === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(250, 250, 248, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--light-gray);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
}

.logo-text .logo-accent {
    color: var(--green);
}

.nav {
    display: none;
}

@media (min-width: 768px) {
    .nav {
        display: flex;
        gap: var(--space-md);
    }
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dark-gray);
    transition: color var(--duration) var(--ease);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--green);
    transition: width var(--duration) var(--ease);
}

.nav-link:hover {
    color: var(--charcoal);
}

.nav-link:hover::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-cta-wrap {
    position: relative;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--green);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
    white-space: nowrap;
}

.header-cta:hover {
    background: var(--green-dark);
    color: var(--white);
}

.header-cta svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.header-cta-text-short {
    display: none;
}

.header-cta-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 8px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
    z-index: 300;
}

.header-cta-dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

/* Dropdown opens on click only (controlled by JS .open class). Hover removed per spec. */
.header-cta-wrap.open .header-cta-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.header-cta-dropdown a {
    display: block;
    padding: 12px 20px;
    color: var(--dark-gray);
    font-size: 0.875rem;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.header-cta-dropdown a:hover {
    background: var(--off-white);
    color: var(--green);
}

.header-cta-dropdown .doctor-name {
    font-weight: 600;
    color: var(--charcoal);
    display: block;
}

.header-cta-dropdown .doctor-role {
    font-size: 0.875rem;
    color: var(--medium-gray);
    display: block;
    margin-top: 2px;
}

/* Il telefono e' l'unico canale legato a un orario: la riga lo dice sul posto,
   cosi' nessuno chiama di sabato aspettandosi risposta. */
.header-cta-dropdown .doctor-hours {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--medium-gray);
}

/* Prenota online e' l'azione che vogliamo, non una delle tre: verde. */
.header-cta-dropdown a[data-track-label="header-calcom"] .doctor-name {
    color: var(--green);
}

.header-cta-dropdown .dropdown-divider {
    height: 1px;
    background: var(--light-gray);
    margin: 4px 0;
}

.header-cta-dropdown .dropdown-help {
    padding: 10px 20px;
    font-size: 0.875rem;
    color: var(--medium-gray);
    line-height: 1.4;
}

.header-cta-dropdown .dropdown-help a {
    display: inline;
    padding: 0;
    color: var(--green);
    font-weight: 500;
}

/* === DROPDOWN MENU === */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    transition: transform var(--duration) var(--ease);
}

.nav-item.has-dropdown:hover .nav-chevron,
.nav-item.has-dropdown:focus-within .nav-chevron,
.nav-item.has-dropdown.open .nav-chevron {
    transform: rotate(180deg);
}

/* Remove underline animation from dropdown parent links */
.nav-item.has-dropdown > .nav-link::after {
    display: none;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
    z-index: 200;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
}

.nav-item.has-dropdown:hover > .dropdown-menu,
.nav-item.has-dropdown:focus-within > .dropdown-menu,
.nav-item.has-dropdown.open > .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Escape chiude il menu senza spostare il focus (WCAG 1.4.13): vince sulle regole di apertura */
.nav-item.has-dropdown.dropdown-closed > .dropdown-menu {
    opacity: 0;
    pointer-events: none;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--dark-gray);
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: var(--off-white);
    color: var(--green);
}

/* === HAMBURGER MENU === */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
    z-index: 101;
}

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

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--charcoal);
    transition: all var(--duration) var(--ease);
}

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

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

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

/* Mobile Nav */
@media (max-width: 767px) {
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--white);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-xl);
        opacity: 0;
        visibility: hidden;
        transition: all var(--duration) var(--ease);
        z-index: 100;
    }

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

    .nav-link {
        font-size: 1.5rem;
        padding: var(--space-sm) var(--space-lg);
    }

    .nav-item {
        flex-direction: column;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        min-width: auto;
        border: none;
        box-shadow: none;
        border-radius: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .nav-item.has-dropdown.open > .dropdown-menu {
        max-height: 500px;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        padding: 4px 0;
    }

    .dropdown-menu li a {
        font-size: 1.1rem;
        text-align: center;
        padding: 8px 20px;
        color: var(--dark-gray);
    }

    .header-cta {
        padding: 10px 16px;
        min-height: 44px;
        font-size: 0.875rem;
    }

    .header-cta-text-full {
        display: none;
    }

    .header-cta-text-short {
        display: inline;
    }

    .header-cta-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        min-width: 240px;
        border-radius: 0;
        transform: translateY(4px);
    }

    .header-cta-dropdown::before {
        top: -12px;
        height: 12px;
    }

    .header-cta-wrap:hover .header-cta-dropdown {
        opacity: 0;
        pointer-events: none;
        transform: translateY(4px);
    }

    .header-cta-wrap.open .header-cta-dropdown {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .header-cta-dropdown a {
        padding: 14px 20px;
        font-size: 0.95rem;
    }

    .header-cta-dropdown .dropdown-help {
        padding: 10px 20px;
        font-size: 0.875rem;
    }
}

@media (max-width: 375px) {
    .header-cta-dropdown {
        right: -20px;
        min-width: 220px;
    }
}

/* === HERO === */
/* Impianto: colonna testo con respiro proprio, dittico ancorato alla hairline
   di chiusura del hero (align-items: end) — niente spazio morto attorno alle foto. */
.hero {
    padding: var(--header-height) var(--space-lg) 0;
    background: var(--off-white);
    border-bottom: var(--hairline);
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: end;
    position: relative;
}

.hero-content {
    max-width: 640px;
    padding: var(--space-2xl) 0 var(--space-xl);
}

.hero-label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: var(--space-lg);
    opacity: 1;
}

.hero-label-line {
    width: 48px;
    height: 1px;
    background: var(--green);
}

.hero-title {
    margin-bottom: var(--space-sm);
    opacity: 1;
    font-size: clamp(2.75rem, 5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
}

/* Sottotitolo serif: porta il San Raffaele a livello quasi-titolo senza
   allungare l'H1 (che deve restare corto e sopra la piega). */
.hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.35;
    color: var(--charcoal);
    margin-bottom: var(--space-md);
    text-wrap: balance;
    max-width: 22em;
}

.hero-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--dark-gray);
    margin-bottom: var(--space-lg);
    max-width: 540px;
    opacity: 1;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    opacity: 1;
}

.hero-phone-alt {
    font-size: 0.9375rem;
    color: var(--medium-gray);
}

.hero-phone-alt a {
    position: relative;
    color: var(--green);
    font-weight: 600;
    white-space: nowrap;
}

/* Solo verticale: la larghezza (102px) e' gia' oltre 44px, manca solo l'altezza. */
.hero-phone-alt a::before {
    content: '';
    position: absolute;
    inset: -13px 0;
}

/* Orario in cui risponde il telefono: sulla stessa riga del numero, staccato
   dal separatore e di un tono piu' tenue */
.hero-phone-hours {
    color: var(--medium-gray);
}

/* Lo stesso orario ripetuto nel resto del sito. `.phone-hours` accompagna il
   numero quando questo e' in linea nel testo; dentro ai pulsanti l'orario sta
   sulla seconda riga del bottone stesso (`.btn-phone`), dove il paziente lo
   legge prima di chiamare invece che dopo. Colore ereditato: sulle sezioni CTA
   scure il testo e' bianco, l'opacita' basta a tenerlo secondario. */
.phone-hours {
    font-size: 0.8125rem;
    color: inherit;
    /* 0.72 non bastava sui fondi chiari: il grigio scendeva sotto il minimo
       di contrasto. 0.85 tiene il testo secondario senza renderlo illeggibile. */
    opacity: 0.85;
}

/* Bottone telefono a due righe: numero sopra, orario sotto. `line-height` corto
   perche' le due righe stiano nell'altezza degli altri pulsanti del gruppo. */
.btn-phone-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}

.btn-phone-hours {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* Hero Visual - Diptych Photos
   La colonna destra è una "lastra" editoriale in verde pallido che sale fin
   sotto l'header e appoggia sulla hairline di chiusura: dà peso e intenzione
   alle foto, senza spazio morto attorno. */
.hero-visual {
    display: block;
    position: relative;
    background: linear-gradient(180deg, var(--hero-wash-top) 0%, var(--hero-wash-bottom) 100%);
}

@media (max-width: 899px) {
    /* Su mobile la lastra è una banda a tutta larghezza che chiude il hero. */
    .hero-visual {
        margin: var(--space-md) calc(-1 * var(--space-lg)) 0;
        padding: var(--space-lg) var(--space-lg) 0;
        border-top: var(--hairline);
    }
    .hero-content {
        padding: var(--space-lg) 0 0;
    }
}

@media (min-width: 900px) {
    .hero-visual {
        display: flex;
        align-self: stretch;
        align-items: stretch; /* il dittico riempie tutta l'altezza della lastra */
        justify-content: center;
        border-left: var(--hairline);
        margin-top: calc(-1 * var(--header-height));
        margin-right: calc(-1 * max(var(--space-lg), (100vw - var(--max-width)) / 2));
        padding: calc(var(--header-height) + var(--space-lg)) var(--space-lg) 0;
    }

    .hero-container {
        grid-template-columns: 1fr 460px;
        column-gap: var(--space-2xl);
    }

    .hero-content {
        padding: var(--space-3xl) 0;
        align-self: center;
    }
}

@media (min-width: 1200px) {
    .hero-container {
        grid-template-columns: 1fr 560px;
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* === COLLEGAMENTI RAPIDI === */
.quick-links {
    background: var(--white);
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
}

.quick-links-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: grid;
    /* Quattro collegamenti, quattro colonne: con cinque restava una colonna vuota
       a destra della fascia. */
    grid-template-columns: repeat(4, 1fr);
}

.quick-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.75rem 1.15rem;
    border-left: var(--hairline);
    color: inherit;
    text-decoration: none;
    transition: background var(--duration) var(--ease);
}

.quick-link:first-child {
    border-left: none;
}

.quick-link:hover,
.quick-link:focus-visible {
    background: var(--green-pale);
}

.quick-link-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--green);
    margin-top: 2px;
}

.quick-link-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quick-link-label {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--charcoal);
    line-height: 1.2;
}

.quick-link-desc {
    font-size: 0.8125rem;
    color: var(--medium-gray);
    line-height: 1.45;
}

/* Sotto i 900px due colonne, sotto i 560px una sola */
@media (max-width: 900px) {
    .quick-links-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .quick-link {
        padding: 1.4rem 1.25rem;
    }
    .quick-link:nth-child(odd) {
        border-left: none;
    }
    .quick-link:nth-child(n+3) {
        border-top: var(--hairline);
    }
    /* Le voci sono cinque: l'ultima riga ne ha una sola e occupa tutta la larghezza */
    .quick-link:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .quick-links-inner {
        grid-template-columns: 1fr;
    }
    .quick-link {
        border-left: none;
    }
    .quick-link + .quick-link {
        border-top: var(--hairline);
    }
}


/* === SECTIONS === */
.section {
    /* 6rem sopra e sotto aprivano fasce di bianco molto larghe fra una sezione
       e l'altra: 4.5rem tengono lo stacco senza il buco. */
    padding: 4.5rem var(--space-lg);
}

/* Il divisore ECG porta gia' la propria riga: la sezione che lo segue, o che lo
   precede, non deve aggiungerne una seconda a un passo di distanza. */
.ecg-divider + .section { border-top: 0; padding-top: var(--space-xl); }
.section:has(+ .ecg-divider) { border-bottom: 0; padding-bottom: var(--space-xl); }

/* Due sezioni contigue che parlano dello stesso argomento: 96px di padding sotto
   la prima piu' 96px sopra la seconda (piu' il margine dell'ultimo paragrafo)
   aprivano oltre 200px di bianco fra la fine del testo e il titolo successivo.
   Lo stacco resta leggibile, senza il buco in mezzo. */
.section.section-stack-end { padding-bottom: var(--space-lg); }
.section.section-stack-start { padding-top: var(--space-xl); }
.section-stack-end .service-detail-content > *:last-child { margin-bottom: 0; }

.section-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-header {
    max-width: 640px;
    margin-bottom: 3.5rem;
}

/* === SERVICES === */
.services {
    background: var(--off-white);
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

@media (min-width: 1080px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }
}

/* Card servizio: densità editoriale — hairline, icona a tratto, prezzo
   visibile nel piede. Niente ombre flottanti. */
.service-card {
    background: var(--white);
    border: var(--hairline);
    border-radius: 0;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.service-card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-soft);
}

.service-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--green);
}

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

.service-title {
    font-family: var(--font-display);
    font-size: 1.3125rem;
    margin-bottom: var(--space-xs);
}

.service-text {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
}

.service-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    border-top: var(--hairline);
    padding-top: var(--space-sm);
    margin-top: auto;
}

.service-price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--green);
    line-height: 1;
}

.service-duration {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--medium-gray);
}

/* Link SCORE2 in coda al quiz */
.quiz-score2-link {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

.quiz-score2-link .link-arrow {
    font-size: 0.9375rem;
}

/* Nota tariffe sotto la griglia */
.services-pricenote {
    margin-top: var(--space-lg);
    font-size: 0.9375rem;
    color: var(--dark-gray);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
}

.services-pricenote .link-arrow {
    font-size: 0.9375rem;
}

/* === ABOUT === */
.about {
    background: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.about-content {
    max-width: 500px;
}

.about-lead {
    font-size: 1.125rem;
    color: var(--dark-gray);
    line-height: 1.8;
}

/* Card equipe (homepage): ritratto verticale grande — i volti sono il primo
   segnale di fiducia, non un dettaglio da 100px. */
.team-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

.team-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: var(--hairline);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.team-card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-soft);
}

.team-name {
    font-family: var(--font-display);
    font-size: 1.3125rem;
    margin-bottom: 2px;
}

.team-role {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: var(--space-sm);
}

.team-bio {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    line-height: 1.6;
}

/* === CTA === */
.cta-section {
    background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    padding: var(--space-2xl) var(--space-lg);
    position: relative;
    overflow: hidden;
}

/* Trama puntinata sottile sul fondo scuro */
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0);
    background-size: 26px 26px;
    pointer-events: none;
}

.cta-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xl);
    position: relative;
}

@media (min-width: 768px) {
    .cta-container {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--white);
    margin-bottom: var(--space-sm);
}

.cta-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 1);
    max-width: 400px;
}

.cta-place {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Le CTA degli hub usano h2/p senza classi dedicate: garantisce
   testo bianco su fondo verde anche senza .cta-title/.cta-text */
.cta-section h2 {
    color: var(--white);
}

.cta-section p {
    color: rgba(255, 255, 255, 0.92);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Le tre etichette hanno lunghezze molto diverse (Prenota visita / WhatsApp /
   il numero su due righe): in fila sembrano tre oggetti scoordinati. In colonna,
   tutti larghi uguale, leggono come un unico blocco di contatti allineato al
   bordo destro della sezione. Lo stack ha gia' regole sue, resta fuori. */
@media (min-width: 768px) {
    .cta-actions:not(.cta-actions--stack) {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        min-width: 260px;
    }

    /* Il bottone del telefono ha due righe e crescerebbe di 10px sugli altri:
       l'altezza minima pareggia i tre. */
    .cta-actions:not(.cta-actions--stack) .btn {
        justify-content: center;
        min-height: 4.25rem;
    }
}

/* Gerarchia CTA finale: un solo bottone primario + contatti secondari testuali */
.cta-actions--stack {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .cta-actions--stack {
        align-items: flex-end;
    }

    /* La riga di contatti sotto al bottone e' piu' larga del bottone stesso:
       senza questo, il testo resta a sinistra e il bottone sembra spostato
       fuori asse. Stesso bordo destro per entrambi. */
    .cta-actions--stack .cta-alt {
        text-align: right;
    }
}

.cta-alt {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.72);
}

.cta-alt a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: opacity var(--duration) var(--ease);
}

.cta-alt a:hover {
    opacity: 0.8;
}

/* === CONTACT === */
.contact {
    background: var(--off-white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.contact-address {
    font-style: normal;
    margin-bottom: var(--space-xl);
}

.address-street {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: var(--space-xs);
}

.address-city {
    font-size: 1rem;
    color: var(--dark-gray);
    margin-bottom: var(--space-xs);
}

.address-note {
    font-size: 0.875rem;
    color: var(--medium-gray);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.contact-link {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    background: var(--white);
    border: 1px solid var(--light-gray);
    transition: all var(--duration) var(--ease);
}

.contact-link:hover {
    border-color: var(--green);
}

.contact-link-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--medium-gray);
    margin-bottom: 4px;
}

.contact-link-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--green);
}

.contact-parking {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--green);
    margin-top: var(--space-md);
}

.contact-parking svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* === FOOTER === */
.footer {
    background: var(--charcoal);
    color: var(--white);
    padding: var(--space-xl) var(--space-lg);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    .footer-main {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--white);
}

.footer-tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-lg);
    /* I 44px di altezza dei link fanno gia' da spazio fra le righe. */
    row-gap: 0;
}

@media (max-width: 767px) {
    .footer-nav {
        column-gap: var(--space-md);
    }
}

.footer-nav a {
    /* Area toccabile piena: sul telefono questi nove link stanno uno sotto
       l'altro e a 20px di altezza si sbaglia bersaglio. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--duration) var(--ease);
}

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

/* === FOOTER NEWSLETTER === */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    .footer-newsletter {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-xl);
    }

    .footer-newsletter-text,
    .newsletter-form {
        flex: 1;
        max-width: 480px;
    }
}

.footer-newsletter-text h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 4px;
}

.footer-newsletter-text p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-fields {
    display: flex;
    gap: var(--space-xs);
}

.newsletter-fields input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.newsletter-fields input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-fields input[type="email"]:focus {
    outline: 2px solid var(--green-light);
    outline-offset: -1px;
}

.newsletter-fields .btn {
    white-space: nowrap;
}

.newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--space-xs);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.newsletter-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: var(--green);
}

.newsletter-consent a {
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

/* Checkbox su colonna separata (gap 8px): solo verticale, zero rischio di
   sovrapporre un altro controllo. */
.newsletter-consent a::before {
    content: '';
    position: absolute;
    inset: -14px 0;
}

.newsletter-consent a:hover {
    color: var(--white);
}

.newsletter-feedback {
    margin-top: var(--space-xs);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.newsletter-feedback:empty {
    display: none;
}

.newsletter-feedback.success {
    color: var(--green-light);
}

.newsletter-feedback.error {
    color: var(--danger-on-dark);
}

.footer-bottom p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

/* === COOKIE BANNER === */
/* Quando il banner e' aperto il body si accorcia dell'altezza del banner
   (--cookie-banner-h, misurata dal JS): niente resta coperto. Il valore torna
   a 0 appena l'utente sceglie. */
body {
    padding-bottom: var(--cookie-banner-h, 0px);
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--light-gray);
    padding: var(--space-md) var(--space-lg);
    z-index: 1000;
    transform: translateY(100%);
    animation: slideUp 0.4s var(--ease) 1s forwards;
}

@keyframes slideUp {
    to { transform: translateY(0); }
}

.cookie-banner.hidden {
    display: none;
}

/* Riapertura dal footer: il secondo di ritardo serve solo al primo ingresso,
   qui il banner deve comparire subito dopo il clic. */
.cookie-banner.reopening {
    animation-delay: 0s;
}

.cookie-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.cookie-text {
    font-size: 0.875rem;
    color: var(--dark-gray);
    flex: 1;
    min-width: 200px;
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.cookie-btn {
    padding: 0.625rem 1.25rem;
    background: var(--green);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--duration) var(--ease);
}

.cookie-btn:hover {
    background: var(--green-dark);
}

.cookie-btn-reject {
    background: transparent;
    color: var(--dark-gray);
    border: 1px solid var(--medium-gray);
}

.cookie-btn-reject:hover {
    background: var(--light-gray);
}

.cookie-link {
    position: relative;
    font-size: 0.875rem;
    color: var(--dark-gray);
    text-decoration: underline;
}

/* Area di tocco allargata a >=44px senza toccare il testo visibile: il gap di
   .cookie-actions (24px) lascia margine sufficiente verso i pulsanti accanto. */
.cookie-link::before {
    content: '';
    position: absolute;
    inset: -12px -11px;
}

.cookie-link:hover {
    color: var(--charcoal);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    /* Due CTA affiancate 50/50 + telefono sotto: tutto sopra la piega */
    .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 0.75rem;
    }

    .hero-phone-alt {
        grid-column: 1 / -1;
        text-align: center;
        margin-top: 0.125rem;
    }

    /* Etichette compatte: "Prenota" senza "visita", kicker senza brand
       (il logo è già nell'header, un rigo sopra) */
    .hero-actions .btn-text-extra,
    .hero-label-brand {
        display: none;
    }

    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .cookie-banner {
        padding: 0.5rem 1rem;
    }

    .cookie-inner {
        gap: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-text {
        font-size: 0.875rem;
        min-width: auto;
    }

    .cookie-actions {
        gap: 0.5rem;
    }

    .cookie-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* === HUB CARDS (Patologie + Servizi index) === */
.hub-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 600px) {
    .hub-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hub-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--white);
    border: var(--hairline);
    border-radius: 0;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    text-decoration: none;
    color: inherit;
}

a.hub-card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-soft);
}

.hub-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    margin-bottom: var(--space-md);
}

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

.hub-card h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.hub-card p {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    line-height: 1.6;
    flex: 1;
}

.hub-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--light-gray);
    font-size: 0.875rem;
}

.hub-card-price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--green);
    line-height: 1;
}

.hub-card-duration {
    color: var(--medium-gray);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hub-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--green);
}

a.hub-card:hover .hub-card-link {
    text-decoration: underline;
}

/* === BREADCRUMB NAVIGATION (multi-level) === */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--medium-gray);
    margin-bottom: var(--space-md);
}

.breadcrumb-nav a {
    position: relative;
    color: var(--green);
    text-decoration: none;
    transition: opacity var(--duration) var(--ease);
}

/* Solo verticale: fra due link il gap e' di soli 4px (piu' il separatore "/"),
   un'estensione orizzontale rischierebbe di sovrapporre il link accanto. */
.breadcrumb-nav a::before {
    content: '';
    position: absolute;
    inset: -12px 0;
}

.breadcrumb-nav a:hover {
    opacity: 0.7;
}

.breadcrumb-nav .breadcrumb-separator {
    color: var(--medium-gray);
    font-size: 0.75rem;
}

.breadcrumb-nav .breadcrumb-current {
    color: var(--charcoal);
    font-weight: 500;
}

/* === SCROLL TO TOP === */
.scroll-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease), background var(--duration) var(--ease);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.scroll-to-top svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* === INLINE FORM ERRORS === */
.field-error {
    display: block;
    font-size: 0.875rem;
    color: var(--danger);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.form-group input.has-error,
.form-group textarea.has-error {
    border-color: var(--danger-border);
}

/* === CAL.COM LOADING STATE === */
.cal-embed-loading {
    /* Overlay: copre l'iframe finché il calendario non ha disegnato il contenuto */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--cream);
    border: 1px solid var(--light-gray);
}

.cal-embed-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--light-gray);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: calSpin 0.8s linear infinite;
}

@keyframes calSpin {
    to { transform: rotate(360deg); }
}

.cal-embed-loading-text {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--medium-gray);
}

/* === CAL.COM FALLBACK (mostrato se il calendario non carica) === */
.cal-embed-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    padding: var(--space-lg);
}

.cal-embed-fallback p {
    color: var(--dark-gray);
    font-size: 0.9375rem;
}

/* === SCROLL REVEAL (classi applicate solo da JS) === */
@media (prefers-reduced-motion: no-preference) {
    .reveal-init {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }

    .reveal-init.reveal-in {
        opacity: 1;
        transform: none;
    }

    /* Hero: fade-up leggero e scaglionato (mai su titolo/foto: sono l'LCP).
       Puro CSS con fill-mode both, condizionato SOLO alla classe .js messa
       dallo script inline nell'head: nessuna dipendenza da main.js, senza JS
       il contenuto resta visibile. */
    .js .hero-label { animation: heroFadeUp 0.5s var(--ease) both; }
    .js .hero-subtitle { animation: heroFadeUp 0.5s var(--ease) 0.09s both; }
    .js .hero-text { animation: heroFadeUp 0.5s var(--ease) 0.18s both; }
    .js .hero-actions { animation: heroFadeUp 0.5s var(--ease) 0.27s both; }

    /* ECG "a tratto": dasharray a valore sicuro (superiore alla lunghezza
       reale del tracciato). Hero: puro CSS al load. Divisori: stato iniziale
       applicato da JS (.ecg-init, sono sotto la piega) e disegno all'ingresso
       in viewport (.ecg-drawn). */
    .js .ecg-line path {
        stroke-dasharray: 340;
        animation: ecgDraw 1.3s var(--ease) 0.3s both;
    }

    .js .ecg-divider.ecg-init svg path {
        stroke-dasharray: 180;
        stroke-dashoffset: 180;
        transition: stroke-dashoffset 1s var(--ease);
    }

    .js .ecg-divider.ecg-drawn svg path { stroke-dashoffset: 0; }
}

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

@keyframes ecgDraw {
    from { stroke-dashoffset: 340; }
    to { stroke-dashoffset: 0; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === FOCUS STATES === */
:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

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

/* ============================================
   SUBPAGE STYLES
   ============================================ */

/* === PAGE HERO === */
/* Compattato (-35% altezza) e chiuso a destra da una linea ECG decorativa */
.page-hero {
    padding: calc(var(--header-height) + 3rem) var(--space-lg) 2.75rem;
    background: var(--off-white);
    border-bottom: 1px solid var(--light-gray);
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: '';
    position: absolute;
    right: 2.5rem;
    bottom: 2.6rem;
    width: 340px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='60' viewBox='0 0 340 60' fill='none'%3E%3Cpath d='M0 30 H96 l10 -12 10 12 h26 l9 -22 12 44 10 -22 h30 l7 -9 8 9 H340' stroke='%232E7D5E' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.22;
    pointer-events: none;
}

@media (max-width: 899px) {
    .page-hero::after {
        display: none;
    }
}

.page-hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.breadcrumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--green);
    margin-bottom: var(--space-lg);
    transition: opacity var(--duration) var(--ease);
}

/* Link isolato (nessun altro controllo accanto): estensione su tutti i lati. */
.breadcrumb::before {
    content: '';
    position: absolute;
    inset: -12px;
}

.breadcrumb:hover {
    opacity: 0.7;
}

.breadcrumb svg {
    width: 16px;
    height: 16px;
}

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

.page-hero-text {
    font-size: 1.125rem;
    color: var(--dark-gray);
    max-width: 600px;
}

/* === SERVICE DETAIL === */
.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 900px) {
    .service-detail-grid {
        grid-template-columns: 1fr 360px;
    }
}

.service-detail-content h2 {
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
}

.service-detail-content > h3 {
    font-size: 1.25rem;
    /* 4rem sopra un sottotitolo aprivano un buco dentro al testo: 2.5rem
       staccano lo stesso senza interrompere la lettura. Solo figli diretti:
       dentro i riquadri (.ap-alert) il titolo deve stare attaccato al bordo. */
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

.service-detail-content p {
    color: var(--dark-gray);
    margin-bottom: var(--space-md);
}

.service-list {
    list-style: none;
    margin-bottom: var(--space-lg);
}

.service-list li {
    padding: var(--space-md);
    background: var(--off-white);
    border-left: 3px solid var(--green);
    margin-bottom: var(--space-sm);
}

.service-list li strong {
    display: block;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.service-list li span {
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

.simple-list {
    list-style: none;
    margin-bottom: var(--space-lg);
}

.simple-list li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--dark-gray);
}

.simple-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--green);
    border-radius: 50%;
}

/* Service Sidebar */
.service-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.service-info-card,
.service-cta-card {
    padding: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--light-gray);
}

.service-info-card h4,
.service-cta-card h4 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

.service-info-card address {
    font-style: normal;
    line-height: 1.6;
}

.service-info-card address + .service-info-list {
    margin-top: var(--space-sm);
}

.service-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.service-info-item {
    display: flex;
    flex-direction: column;
}

.service-info-item dt {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--medium-gray);
    margin-bottom: 4px;
}

.service-info-item dd {
    font-weight: 500;
    color: var(--charcoal);
}

.service-cta-card p {
    color: var(--dark-gray);
    margin-bottom: var(--space-md);
}

.service-cta-card .btn {
    width: 100%;
    margin-bottom: var(--space-sm);
}

.service-cta-card .btn:last-child {
    margin-bottom: 0;
}

/* === RELATED SERVICES === */
.related-services {
    background: var(--cream);
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

.related-card {
    display: block;
    padding: var(--space-xl);
    background: var(--white);
    border: 1px solid var(--light-gray);
    transition: all var(--duration) var(--ease);
}

.related-card:hover {
    border-color: var(--green);
    transform: translateY(-4px);
}

.related-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.related-card p {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    margin-bottom: var(--space-md);
}

.related-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--green);
}

/* === CHI SIAMO PAGE === */
.about-mission {
    background: var(--white);
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 900px) {
    .mission-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mission-content h2 {
    font-size: 2rem;
    margin-bottom: var(--space-lg);
}

.lead-text {
    font-size: 1.125rem;
    color: var(--dark-gray);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

.mission-values {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.value-item {
    padding: var(--space-lg);
    background: var(--off-white);
    border-left: 3px solid var(--green);
}

.value-number {
    display: block;
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--green);
    margin-bottom: var(--space-xs);
}

.value-item h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.value-item p {
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

/* Team Section */
.team-section {
    background: var(--off-white);
}

.team-full-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

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

.team-full-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    display: flex;
    flex-direction: column;
}

/* Ritratto grande a tutta larghezza: il volto del medico è il contenuto
   principale della pagina, non un timbro. */
.team-full-avatar {
    width: 100%;
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
    border-bottom: var(--hairline);
}

.team-full-avatar picture {
    display: block;
    width: 100%;
    height: 100%;
}

.team-full-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    display: block;
}

.team-full-avatar--peveri img {
    object-position: center top;
}

.team-full-content {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.team-full-content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.team-full-content p {
    color: var(--dark-gray);
    margin-bottom: var(--space-md);
}

.team-expertise {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.team-expertise li {
    padding: 4px 12px;
    background: var(--green-pale);
    color: var(--green);
    font-size: 0.875rem;
    font-weight: 500;
}

.team-cta {
    margin-top: var(--space-lg);
}

.team-cta .btn {
    justify-content: center;
    text-align: center;
}

/* Su mobile la scheda e' larga ~295px: con il padding da 4rem restavano 165px
   di testo (circa 19 caratteri per riga) e il pulsante andava su 3-4 righe,
   con altezze diverse fra i due medici. */
@media (max-width: 767px) {
    .team-full-content {
        padding: var(--space-lg) var(--space-md) var(--space-lg);
    }

    .team-cta .btn {
        display: flex;
        width: 100%;
    }
}

/* Link al curriculum, sotto il pulsante di prenotazione nelle schede equipe */
.team-cv-link {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
}

/* ============================================
   CURRICULUM DEI MEDICI — cv-gramegna.html, cv-peveri.html
   ============================================ */

.cv-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 900px) {
    .cv-layout {
        grid-template-columns: 320px 1fr;
        gap: var(--space-xl);
        align-items: start;
    }

    /* Ritratto e dati di sintesi accompagnano la lettura del curriculum,
       invece di scorrere via dopo la prima sezione. */
    .cv-aside {
        position: sticky;
        top: calc(var(--header-height) + var(--space-lg));
    }
}

/* L'aspect-ratio sta sul contenitore, non sull'immagine: gli attributi
   width/height del tag <img> vincono sull'aspect-ratio dichiarato su di essa. */
.cv-portrait {
    border: 1px solid var(--light-gray);
    background: var(--white);
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
}

.cv-portrait picture {
    display: block;
    width: 100%;
    height: 100%;
}

.cv-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
}

.cv-portrait--peveri img {
    object-position: center top;
}

.cv-facts {
    margin-top: var(--space-md);
    border-top: var(--hairline);
}

.cv-fact {
    padding: var(--space-sm) 0;
    border-bottom: var(--hairline);
}

.cv-fact dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--medium-gray);
    margin-bottom: 2px;
}

.cv-fact dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--charcoal);
}

.cv-aside-cta {
    margin-top: var(--space-md);
}

.cv-aside-cta .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.cv-aside-back {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
}

.cv-block + .cv-block {
    margin-top: var(--space-xl);
}

.cv-block-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--charcoal);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--green);
    margin-bottom: var(--space-md);
}

.cv-timeline {
    border-left: 1px solid var(--light-gray);
    padding-left: var(--space-md);
}

.cv-entry {
    position: relative;
    padding-bottom: var(--space-md);
}

.cv-entry:last-child {
    padding-bottom: 0;
}

.cv-entry::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-md) - 4.5px);
    top: 0.45rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}

.cv-entry-period {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--green);
    margin-bottom: 2px;
}

.cv-entry-role {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 2px;
}

.cv-entry-place {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    margin: 0;
}

.cv-entry-note {
    font-size: 0.9375rem;
    color: var(--medium-gray);
    line-height: 1.6;
    margin-top: var(--space-xs);
}

.cv-list {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
}

.cv-list li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    font-size: 0.9375rem;
    color: var(--dark-gray);
    line-height: 1.6;
}

.cv-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 8px;
    height: 1px;
    background: var(--green);
}

.cv-highlight {
    padding: var(--space-sm) var(--space-md);
    background: var(--green-pale);
    border-left: 3px solid var(--green);
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

.cv-pubmed {
    margin-top: var(--space-md);
    font-size: 0.9375rem;
}

.cv-foot-cta {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: var(--hairline);
    font-size: 0.9375rem;
}

/* Il ritratto a piena larghezza su mobile diventa alto: si limita in altezza
   e resta la parte utile, il volto. */
@media (max-width: 899px) {
    .cv-portrait {
        aspect-ratio: 16 / 10;
    }
}

/* Studio Section */
.studio-section {
    background: var(--white);
}

.studio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

@media (min-width: 900px) {
    .studio-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.studio-content h2 {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.studio-content p {
    color: var(--dark-gray);
    margin-bottom: var(--space-lg);
}

.studio-features {
    list-style: none;
}

.studio-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--light-gray);
    font-size: 0.9375rem;
}

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

.studio-features svg {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
}

/* Studio Gallery */
.studio-gallery-main {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cream);
}

.studio-gallery-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.studio-gallery-img.active {
    opacity: 1;
}

.studio-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.studio-thumb {
    flex: 1;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 4/3;
    opacity: 0.5;
    transition: opacity 0.2s, border-color 0.2s;
}

.studio-thumb:hover {
    opacity: 0.8;
}

.studio-thumb.active {
    opacity: 1;
    border-color: var(--green);
}

.studio-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === CONTACT PAGE === */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 900px) {
    .contact-page-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    /* La mappa accompagna la lettura dei recapiti, invece di lasciare
       mezza colonna vuota */
    .contact-page-map {
        position: sticky;
        top: calc(var(--header-height) + var(--space-xl));
    }
}

.contact-block {
    margin-bottom: var(--space-xl);
}

.contact-block h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--light-gray);
}

.contact-block address {
    font-style: normal;
}

.contact-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.contact-photo-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Indirizzo dello studio, letto come una busta: prima chi ospita e il complesso,
   poi la via. Le due righe di contesto restano secondarie ma leggibili (il grigio
   medio a 0.875rem le rendeva una didascalia); lo stacco prima della via dice dove
   comincia l'indirizzo vero, e l'ultima riga non lascia spazio in coda. */
.contact-block address {
    line-height: 1.55;
}

.address-detail {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    margin-bottom: 2px;
}

.address-detail + .address-main {
    margin-top: var(--space-xs);
}

.address-main {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 4px;
}

.address-city {
    color: var(--dark-gray);
    margin-bottom: 0;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    transition: all var(--duration) var(--ease);
}

.contact-method:hover {
    border-color: var(--green);
}

.contact-method-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: var(--white);
    flex-shrink: 0;
}

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

.contact-method-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--medium-gray);
}

.contact-method-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--charcoal);
}

/* Fascia oraria della segreteria, sotto il numero */
.contact-method-note {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--medium-gray);
    margin-top: 0.15rem;
}

.hours-text {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.hours-note {
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

.parking-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--green-pale);
    color: var(--green-dark);
}

.parking-info svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.map-container {
    margin-bottom: var(--space-md);
}

.directions-link .btn {
    width: 100%;
}

.directions-link svg {
    width: 16px;
    height: 16px;
}

/* Contact Form Section */
.contact-form-section {
    background: var(--cream);
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--light-gray);
    padding: var(--space-xl);
}

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

.form-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.form-header p {
    color: var(--dark-gray);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-success {
    padding: var(--space-sm) var(--space-md);
    background: var(--green-pale);
    color: var(--green-dark);
    font-size: 0.875rem;
    border-left: 3px solid var(--green);
    animation: fadeIn 0.3s var(--ease);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 500px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    padding: var(--space-md);
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all var(--duration) var(--ease);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green);
    background: var(--white);
}

/* Ring visibile per navigazione da tastiera (al posto dell'outline nativo rimosso) */
.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.form-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
}

.form-checkbox input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--green);
}

.form-checkbox label {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--dark-gray);
}

.form-checkbox a {
    color: var(--green);
    text-decoration: underline;
}

/* === FAQ PAGE === */
.faq-page {
    background: var(--off-white);
}

.faq-categories {
    max-width: 800px;
    margin: 0 auto;
}

.faq-category {
    margin-bottom: var(--space-2xl);
}

.faq-category-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--light-gray);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--light-gray);
    transition: all var(--duration) var(--ease);
}

.faq-item:hover {
    border-color: var(--green);
}

/* Stato aperto persistente: indica quale domanda è espansa */
.faq-item[open] {
    border-color: var(--green);
}

.faq-question {
    width: 100%;
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--green);
    transition: transform var(--duration) var(--ease);
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

/* Apertura/chiusura animata dell'accordion: progressive enhancement,
   i browser senza interpolate-size mantengono il toggle istantaneo.
   Con JS attivo l'animazione è gestita da initFaqAccordion() in main.js
   (Web Animations API, più uniforme cross-browser): questo fallback CSS
   resta attivo solo quando lo script non è partito (html:not(.js)). */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    html:not(.js) .faq-item::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size var(--duration) var(--ease),
                    content-visibility var(--duration) allow-discrete;
    }

    html:not(.js) .faq-item[open]::details-content {
        block-size: auto;
    }
}

.faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
}

.faq-answer p {
    color: var(--dark-gray);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.faq-cta {
    max-width: 600px;
    margin: var(--space-2xl) auto 0;
    text-align: center;
    padding: var(--space-xl);
    background: var(--white);
    border: 1px solid var(--light-gray);
}

.faq-cta h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.faq-cta p {
    color: var(--dark-gray);
    margin-bottom: var(--space-lg);
}

.faq-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

/* ============================================
   INDEX PAGE - NEW SECTIONS
   ============================================ */

/* === HOW IT WORKS SECTION === */
.how-it-works {
    background: var(--off-white);
}

.section-header-center {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 900px) {
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
    }
}

.steps-grid .step-card {
    max-width: none;
}

.how-it-works-more {
    margin-top: var(--space-xl);
    text-align: center;
}

/* Step essenziali: numero serif su hairline, senza box — il percorso
   si legge come una riga tipografica, non come tre scatole. */
.step-card {
    flex: 1;
    max-width: 320px;
    padding: var(--space-lg) 0 0;
    border-top: 2px solid var(--charcoal);
    text-align: left;
    position: relative;
}

.step-number {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--green);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.6rem;
    line-height: 1;
}

.step-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-xs);
}

.step-card p {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    line-height: 1.65;
}

/* Connettori a freccia rimossi nel restyle editoriale: le card parlano da sole */
.step-connector {
    display: none;
}

/* === TEAM SECTION (INDEX) === */
.team {
    background: var(--white);
}

.team-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 900px) {
    .team-layout {
        grid-template-columns: minmax(280px, 1fr) 1.8fr;
        gap: var(--space-3xl);
        align-items: start;
    }
}

.team-intro {
    max-width: 450px;
}

/* Come nella sezione FAQ: la colonna del titolo resta ferma mentre le due
   schede dei cardiologi, molto piu' alte, scorrono accanto. Solo da 900px in
   su, dove le colonne sono affiancate. */
@media (min-width: 900px) {
    .team-intro {
        position: sticky;
        top: calc(var(--header-height) + var(--space-xl));
    }
}

.team-lead {
    font-size: 1.125rem;
    color: var(--dark-gray);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* === LINK ARROW === */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--green);
    transition: gap var(--duration) var(--ease);
}

.link-arrow:hover {
    gap: var(--space-md);
}

.link-arrow svg {
    width: 18px;
    height: 18px;
    transition: transform var(--duration) var(--ease);
}

.link-arrow:hover svg {
    transform: translateX(4px);
}

/* === SERVICES CTA === */
.services-cta {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--light-gray);
}

.calculator-card {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--green-pale);
    border: 2px solid var(--green);
    border-radius: 0;
    transition: all var(--duration) var(--ease);
    text-align: left;
}

.calculator-card:hover {
    background: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(46, 125, 94, 0.25);
}

.calculator-card:hover .calculator-card-icon,
.calculator-card:hover .calculator-card-title,
.calculator-card:hover .calculator-card-desc,
.calculator-card:hover .calculator-card-label,
.calculator-card:hover .calculator-card-arrow {
    color: var(--white);
}

.calculator-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    transition: color var(--duration) var(--ease);
}

.calculator-card-icon svg {
    width: 32px;
    height: 32px;
}

.calculator-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calculator-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green);
    transition: color var(--duration) var(--ease);
}

.calculator-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--charcoal);
    transition: color var(--duration) var(--ease);
}

.calculator-card-desc {
    font-size: 0.875rem;
    color: var(--dark-gray);
    transition: color var(--duration) var(--ease);
}

.calculator-card-arrow {
    width: 24px;
    height: 24px;
    color: var(--green);
    transition: all var(--duration) var(--ease);
}

.calculator-card:hover .calculator-card-arrow {
    transform: translateX(4px);
}

/* === REVIEWS SECTION === */
.reviews {
    background: var(--white);
    border-top: var(--hairline);
}

.reviews-subtitle {
    font-size: 1rem;
    color: var(--dark-gray);
    margin-top: calc(-1 * var(--space-md));
}

.reviews-rating-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: calc(-1 * var(--space-sm));
}

.reviews-stars {
    color: var(--green);
    font-size: 1.125rem;
    letter-spacing: 2px;
}

.reviews-rating-text {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    font-weight: 500;
}

/* Data dell'ultimo allineamento a MioDottore (la scrive
   tools/aggiorna-recensioni.py). Su riga propria sotto la media. */
.reviews-updated {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--medium-gray);
    margin-top: 0.15rem;
}

@media (min-width: 640px) {
    .reviews-rating-summary {
        flex-wrap: wrap;
    }
}

/* Reviews Carousel */
.reviews-carousel {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.reviews-track {
    display: flex;
    transition: transform 0.4s var(--ease);
}

.reviews-track .review-card {
    flex: 0 0 100%;
    min-width: 0;
}

@media (min-width: 600px) {
    .reviews-track .review-card {
        flex: 0 0 50%;
    }
}

@media (min-width: 900px) {
    .reviews-track .review-card {
        flex: 0 0 calc(100% / 3);
    }
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all var(--duration) var(--ease);
}

.carousel-btn:hover {
    border-color: var(--green);
    color: var(--green);
}

.carousel-btn svg {
    width: 20px;
    height: 20px;
}

.carousel-prev { left: 0; }
.carousel-next { right: 0; }

@media (max-width: 599px) {
    .carousel-btn { display: none; }
}

.carousel-dots {
    display: flex;
    justify-content: center;
    /* Niente gap: lo spazio fra i pallini ora lo da' il padding di .carousel-dot,
       che e' anche l'area di tocco. Un gap qui si sommerebbe rendendo la riga
       piu' larga del necessario. */
    margin-top: var(--space-md);
}

.carousel-dot {
    /* Punto visivo tenuto a 8px: background-clip lo confina al content-box.
       Il bottone vero e' 44x44 (box-sizing: border-box, riga 120), il padding
       fa da area di tocco invisibile attorno al pallino. */
    width: 44px;
    height: 44px;
    padding: 18px;
    border-radius: 50%;
    background: var(--light-gray);
    background-clip: content-box;
    border: none;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.carousel-dot.active {
    background: var(--green);
}

.reviews-google-link {
    display: inline-flex;
}

.review-card {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: var(--off-white);
    border: var(--hairline);
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.review-stars {
    color: var(--green);
    font-size: 0.875rem;
    letter-spacing: 2px;
    margin-bottom: var(--space-sm);
}

.review-text {
    font-size: 1rem;
    font-style: italic;
    color: var(--charcoal);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.review-text::before {
    content: '"';
    display: none;
}

.review-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.review-avatar {
    width: 32px;
    height: 32px;
    background: var(--green);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.review-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--charcoal);
}

.review-source {
    font-size: 0.875rem;
    color: var(--green);
    font-weight: 500;
}

.reviews-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

/* === FAQ BRIEF SECTION === */
.faq-brief {
    background: var(--white);
    border-top: var(--hairline);
}

.faq-brief-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 900px) {
    .faq-brief-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--space-2xl);
        align-items: start;
    }
}

.faq-brief-header {
    position: relative;
}

@media (min-width: 900px) {
    .faq-brief-header {
        position: sticky;
        top: calc(var(--header-height) + var(--space-xl));
    }
}

.faq-brief-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-brief-more {
    margin-top: var(--space-lg);
}

/* === CONTACT SECTION (INDEX) === */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.contact-info {
    max-width: 400px;
}

.contact-map {
    display: flex;
    flex-direction: column;
}

/* Sotto la mappa: senza questo la colonna destra finisce a meta' altezza e
   lascia 330px di vuoto accanto ai contatti. Stesso trattamento delle card
   telefono/WhatsApp di fianco, cosi' le due colonne si rispondono. */
.contact-hours {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--white);
    border: 1px solid var(--light-gray);
}

.contact-hours .hours-text {
    margin-bottom: var(--space-xs);
}

.contact-hours .hours-note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.map-link {
    display: block;
    margin-top: var(--space-sm);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--green);
    transition: opacity var(--duration) var(--ease);
}

.map-link:hover {
    opacity: 0.7;
}

/* === MAP EMBED === */
.map-embed {
    width: 100%;
    border: 1px solid var(--light-gray);
    overflow: hidden;
}

.map-embed iframe {
    display: block;
    width: 100%;
    height: 300px;
}

.map-embed-large {
    width: 100%;
    border: 1px solid var(--light-gray);
    overflow: hidden;
}

.map-embed-large iframe {
    display: block;
    width: 100%;
    height: 400px;
}

/* === MOBILE CTA STICKY BAR === */
.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--light-gray);
    padding: var(--space-sm);
    z-index: 99;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    .mobile-cta-bar {
        display: flex;
        gap: var(--space-sm);
    }

    /* Aggiungi padding al body per evitare che il contenuto sia coperto
       (con la riga d'orario sotto "Chiama" la barra è alta ~102px) */
    body {
        padding-bottom: calc(106px + var(--cookie-banner-h, 0px));
    }

    /* Alla prima visita il banner cookie non deve coprire la barra CTA:
       lo si posiziona sopra la barra (solo sulle pagine che la hanno).
       106px = altezza barra CTA mobile (~102px) + piccolo margine. */
    body:has(.mobile-cta-bar) .cookie-banner {
        bottom: 106px;
    }
}

.mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 4px;
    transition: all var(--duration) var(--ease);
}

.mobile-cta-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-cta-book {
    background: var(--green);
    color: var(--white);
}

.mobile-cta-book:hover {
    background: var(--green-dark);
}

.mobile-cta-phone {
    background: var(--white);
    color: var(--charcoal);
    border: 1px solid var(--light-gray);
}

.mobile-cta-phone:hover {
    border-color: var(--charcoal);
}

/* WhatsApp in palette brand (niente verde WhatsApp fuori scala) */
.mobile-cta-whatsapp {
    background: var(--white);
    color: var(--green);
    border: 1px solid var(--green);
}

.mobile-cta-whatsapp:hover {
    background: var(--green-pale);
}

/* ============================================
   NUOVE SEZIONI - QUIZ, VIDEO
   ============================================ */

/* === QUIZ INTERATTIVO === */
.quiz-section {
    background: var(--white);
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
}

.quiz-container {
    max-width: 700px;
    margin: 0 auto;
}

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

.quiz-intro {
    font-size: 1rem;
    color: var(--dark-gray);
    margin-top: calc(-1 * var(--space-md));
}

.result-not-applicable {
    border: 1px solid var(--danger-border);
    border-left: 4px solid var(--danger-border);
    border-radius: 2px;
    background: var(--danger-bg);
    padding: var(--space-md);
}

.result-not-applicable h4 {
    color: var(--danger);
    font-size: 1.0625rem;
    margin-bottom: 0.6rem;
}

.result-not-applicable p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

.quiz-alert {
    margin-bottom: var(--space-lg);
    text-align: left;
}

.quiz-result-alert {
    margin: var(--space-md) 0 0;
    text-align: left;
}

.quiz-disclaimer {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--medium-gray);
    margin-top: var(--space-xs);
}

/* Disclaimer al punto d'uso nelle pagine patologie: riusa il box .ap-alert */
.content-disclaimer {
    margin-top: var(--space-lg);
}

.quiz-progress {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.quiz-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--light-gray);
    border-radius: 2px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--green);
    transition: width 0.4s var(--ease);
    width: 0%;
}

.quiz-progress-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--medium-gray);
    white-space: nowrap;
}

.quiz-card {
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    padding: var(--space-xl);
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.quiz-question {
    display: none;
    flex-direction: column;
    flex: 1;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.quiz-question.active {
    display: flex;
}

/* Transizione tra domande, innescata da JS (goToQuestion in main.js) */
.quiz-question.quiz-q-exit {
    opacity: 0;
    transform: translateX(-12px);
}

.quiz-question.quiz-q-enter {
    opacity: 0;
    transform: translateX(12px);
}

.quiz-question-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--white);
    border: 1px solid var(--light-gray);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.quiz-option:hover {
    border-color: var(--green);
    background: var(--green-pale);
}

.quiz-option.selected {
    border-color: var(--green);
    background: var(--green-pale);
}

.quiz-option-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--light-gray);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration) var(--ease);
}

.quiz-option.selected .quiz-option-radio {
    border-color: var(--green);
}

.quiz-option.selected .quiz-option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--green);
    border-radius: 50%;
}

.quiz-option-text {
    font-size: 0.9375rem;
    color: var(--charcoal);
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--light-gray);
}

.quiz-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--duration) var(--ease);
}

.quiz-btn-prev {
    background: transparent;
    color: var(--dark-gray);
    border: 1px solid var(--light-gray);
}

.quiz-btn-prev:hover {
    border-color: var(--charcoal);
    color: var(--charcoal);
}

.quiz-btn-prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.quiz-btn-next {
    background: var(--green);
    color: var(--white);
    border: 1px solid var(--green);
}

.quiz-btn-next:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.quiz-btn-next:disabled {
    background: var(--light-gray);
    border-color: var(--light-gray);
    color: var(--medium-gray);
    cursor: not-allowed;
}

/* Quiz Result */
.quiz-result {
    display: none;
    text-align: center;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.quiz-result.active {
    display: flex;
}

.quiz-result-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-pale);
    border-radius: 50%;
    color: var(--green);
}

.quiz-result-icon svg {
    width: 32px;
    height: 32px;
}

.quiz-result-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
}

.quiz-result-text {
    font-size: 1rem;
    color: var(--dark-gray);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.quiz-result-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.quiz-restart {
    display: inline-block;
    margin-top: var(--space-lg);
    font-size: 0.875rem;
    color: var(--green);
    cursor: pointer;
    transition: opacity var(--duration) var(--ease);
}

.quiz-restart:hover {
    opacity: 0.7;
}

/* === VIDEO PILLOLE SECTION === */
.video-pillole {
    background: var(--cream);
}

.video-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.video-subtitle {
    font-size: 1rem;
    color: var(--dark-gray);
    margin-top: calc(-1 * var(--space-md));
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

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

.video-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    overflow: hidden;
    transition: all var(--duration) var(--ease);
}

.video-card:hover {
    border-color: var(--green);
    transform: translateY(-4px);
}

.video-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--medium-gray);
    overflow: hidden;
}

.video-thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--green-pale) 0%, var(--cream) 100%);
    opacity: 0.5;
}

.video-play-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    color: var(--green);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all var(--duration) var(--ease);
}

.video-card:hover .video-play-icon {
    transform: scale(1.1);
    background: var(--green);
    color: var(--white);
}

.video-play-icon svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}

.video-coming-soon {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: 4px 10px;
    background: var(--charcoal);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
}

.video-content {
    padding: var(--space-lg);
}

.video-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
    color: var(--charcoal);
}

.video-duration {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--green);
    letter-spacing: 0.05em;
}

.video-cta {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--light-gray);
}

.video-cta-text {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    margin-bottom: var(--space-sm);
}

/* ============================================
   IMAGE PLACEHOLDERS - Per foto reali
   ============================================ */

/* === HERO DIPTYCH === */
/* Due ritratti affiancati a tutta altezza della hero, separati da hairline:
   riempiono la colonna destra fino al bordo inferiore della sezione */
.hero-diptych {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--light-gray);
    border: var(--hairline);
    border-bottom: none; /* si appoggia sulla hairline di chiusura del hero */
}

/* Link wrapper — no stili link visibili */
.hero-diptych-link {
    text-decoration: none;
    color: inherit;
    display: contents;
}

.hero-diptych-figure {
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background: var(--white);
}

.hero-diptych-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 3.5; /* volto più presente rispetto al 3:4 pieno */
}

.hero-diptych-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* Gramegna: mostra più testa */
    display: block;
    transition: transform 0.3s ease;
    /* Armonizza i due ritratti (fondi e temperature diverse in origine) */
    filter: saturate(0.86) contrast(1.03);
}

/* Velo tonale comune: lega i due scatti alla palette dello studio */
.hero-diptych-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(46, 125, 94, 0.02) 0%, rgba(46, 125, 94, 0.06) 100%);
    pointer-events: none;
}

/* Peveri: immagine originale già allineata con Gramegna */
.hero-diptych-figure--peveri .hero-diptych-photo img {
    object-position: center 0%;
}

/* Hover sottile */
.hero-diptych-figure:hover .hero-diptych-photo img {
    transform: scale(1.03);
}

/* Didascalie — altezza fissa per allineamento */
.hero-diptych-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.5rem;
    min-height: 3rem;
    background: var(--white, #fff);
    border-top: var(--hairline);
}

.hero-diptych-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--charcoal);
    line-height: 1.3;
    white-space: nowrap;
}

.hero-diptych-role {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.4;
    margin-top: 2px;
}

/* Viewport molto stretti (es. 390px): il nome più lungo ("Dr.ssa Beatrice
   Peveri") rischia l'overflow nella caption, riduciamo leggermente il font */
@media (max-width: 399px) {
    .hero-diptych-name { font-size: 13px; }
}

/* Desktop: il dittico riempie la lastra e appoggia sulla hairline
   di chiusura del hero — presenza forte, volti interi, nomi subito visibili */
@media (min-width: 900px) {
    .hero-diptych {
        max-width: none;
        margin: 0;
    }
    /* Le foto assorbono tutta l'altezza disponibile della lastra:
       niente vuoto sopra, volti grandi */
    .hero-diptych-photo {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }
    .hero-diptych-caption { padding: 1.05rem 0.75rem; min-height: 4.5rem; }
    .hero-diptych-name { font-size: 1.125rem; }
    .hero-diptych-role { font-size: 0.6875rem; letter-spacing: 0.18em; }
}

/* === TEAM PHOTOS === */
.team-photo {
    overflow: hidden;
    aspect-ratio: 4 / 4.2;
    border-bottom: var(--hairline);
}

.team-photo picture,
.team-photo img {
    width: 100%;
    height: 100%;
}

.team-image {
    object-fit: cover;
    object-position: center 15%;
    transition: transform 0.4s var(--ease);
}

.team-card:hover .team-image {
    transform: scale(1.02);
}

.team-info {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

/* === STUDIO GALLERY === */
.studio-gallery {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--light-gray);
}

.studio-gallery-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--charcoal);
    margin-bottom: var(--space-md);
}

/* === GDPR CONSENT SCREENS === */
.quiz-consent,
.score2-consent {
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    padding: var(--space-xl);
}

.quiz-consent-box,
.score2-consent-box {
    max-width: 500px;
    margin: 0 auto;
}

.quiz-consent-title,
.score2-consent-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
    text-align: center;
    color: var(--charcoal);
}

.quiz-consent-intro,
.score2-consent-intro {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    text-align: center;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.quiz-consent-info,
.score2-consent-info {
    background: var(--white);
    border: 1px solid var(--light-gray);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.quiz-consent-info p,
.score2-consent-info p {
    font-size: 0.875rem;
    color: var(--dark-gray);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

.quiz-consent-info p:last-child,
.score2-consent-info p:last-child {
    margin-bottom: 0;
}

.quiz-consent-checkbox,
.score2-consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--green-pale);
    border: 1px solid var(--green);
    border-radius: 4px;
}

.quiz-consent-checkbox input,
.score2-consent-checkbox input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--green);
    cursor: pointer;
}

.quiz-consent-checkbox label,
.score2-consent-checkbox label {
    font-size: 0.875rem;
    color: var(--charcoal);
    line-height: 1.5;
    cursor: pointer;
}

.quiz-consent-checkbox label a,
.score2-consent-checkbox label a {
    color: var(--green);
    text-decoration: underline;
}

.quiz-consent-checkbox label a:hover,
.score2-consent-checkbox label a:hover {
    color: var(--green-dark);
}

.quiz-consent-btn,
.score2-consent-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

.quiz-consent-btn:disabled,
.score2-consent-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Contact Form Consent Checkboxes */
.form-consents {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.consent-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.consent-item input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--green);
    cursor: pointer;
}

.consent-item label {
    font-size: 0.875rem;
    color: var(--dark-gray);
    line-height: 1.5;
    cursor: pointer;
}

.consent-item label a {
    position: relative;
    color: var(--green);
    text-decoration: underline;
}

/* Stesso schema di .newsletter-consent a: checkbox su colonna separata. */
.consent-item label a::before {
    content: '';
    position: absolute;
    inset: -14px 0;
}

.consent-required {
    color: var(--green);
    font-weight: 600;
}

/* Form Messages */
.form-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
    border-radius: 4px;
}

.form-message svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.form-message strong {
    display: block;
    margin-bottom: 4px;
}

.form-message p {
    font-size: 0.875rem;
    margin: 0;
}

.form-success {
    background: var(--green-pale);
    border: 1px solid var(--green);
    color: var(--green-dark);
}

.form-success svg {
    color: var(--green);
}

.form-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
}

.form-error svg {
    color: var(--danger-border);
}

.form-privacy-note {
    font-size: 0.875rem;
    color: var(--medium-gray);
    text-align: center;
    margin-top: var(--space-md);
}

.form-whatsapp-note {
    font-size: 0.875rem;
    color: var(--dark-gray);
    text-align: center;
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: var(--green-pale);
    border-radius: 4px;
}

.required {
    color: var(--green);
}

/* ============================================
   BOOKING SECTION - Cal.com Integration
   ============================================ */

/* === BOOKING SECTION (INDEX PAGE) === */
.booking-section {
    background: var(--cream);
}

.booking-subtitle {
    font-size: 1rem;
    color: var(--dark-gray);
    margin-top: calc(-1 * var(--space-md));
}

.booking-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 900px) {
    .booking-container {
        grid-template-columns: 1fr 320px;
        align-items: start;
    }
}

/* === CAL.COM EMBED WRAPPER === */
.cal-embed-wrapper {
    position: relative;
    min-height: 500px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    overflow: hidden;
}

/* Placeholder while Cal.com is not configured */
.cal-embed-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl);
    min-height: 500px;
}

.cal-placeholder-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-pale);
    border-radius: 50%;
    color: var(--green);
    margin-bottom: var(--space-lg);
}

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

.cal-embed-placeholder h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
    color: var(--charcoal);
}

.cal-embed-placeholder p {
    font-size: 1rem;
    color: var(--dark-gray);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 400px;
}

.cal-placeholder-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

/* === BOOKING INFO SIDEBAR === */
.booking-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.booking-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--light-gray);
}

.booking-info-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-pale);
    border-radius: 50%;
    color: var(--green);
    flex-shrink: 0;
}

.booking-info-icon svg {
    width: 20px;
    height: 20px;
}

.booking-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.booking-info-text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--charcoal);
}

.booking-info-text span {
    font-size: 0.875rem;
    color: var(--dark-gray);
}

/* === BOOKING SECTION (CONTATTI PAGE) === */
.booking-section-page {
    background: var(--off-white);
}

.booking-page-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.booking-page-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-bottom: var(--space-sm);
}

.booking-page-header p {
    color: var(--dark-gray);
}

.booking-page-container {
    max-width: 800px;
    margin: 0 auto;
}

/* === BOOKING DUAL-DOCTOR TABS === */
.booking-doctor-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 800px;
    margin: 0 auto var(--space-md);
    border: 1px solid var(--light-gray);
}

.booking-doctor-tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--white);
    border: none;
    border-left: 1px solid var(--light-gray);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--charcoal);
    cursor: pointer;
    text-align: center;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.booking-doctor-tab:first-child {
    border-left: none;
}

.booking-doctor-tab:hover {
    background: var(--off-white);
}

.booking-doctor-tab.active {
    background: var(--green);
    color: var(--white);
}

.booking-doctor-tab:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

.booking-fallback {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    border: 1px solid var(--light-gray);
    background: var(--off-white);
    text-align: center;
}

.booking-fallback-sotto {
    margin-top: var(--space-lg);
}

.booking-fallback h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

.booking-fallback p {
    color: var(--dark-gray);
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.booking-fallback-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

@media (max-width: 560px) {
    .booking-doctor-tab {
        font-size: 0.9375rem;
        padding: var(--space-sm) var(--space-xs);
    }
}

/* === CONSENT ENHANCEMENTS === */
.consent-note {
    display: block;
    font-size: 0.875rem;
    color: var(--medium-gray);
    margin-top: 4px;
    font-style: italic;
}

.consent-reminder,
.consent-marketing {
    padding: var(--space-sm);
    background: var(--off-white);
    border-radius: 4px;
    transition: background var(--duration) var(--ease);
}

.consent-reminder:hover,
.consent-marketing:hover {
    background: var(--green-pale);
}

.consent-item label strong {
    color: var(--charcoal);
}

/* === CAL.COM IFRAME STYLING === */
.cal-embed-wrapper iframe,
#cal-embed iframe {
    border: none;
    width: 100%;
    min-height: min(620px, 80vh);
}

@media (max-width: 600px) {
    .cal-embed-wrapper iframe {
        min-height: 70vh;
    }
}

/* Hide placeholder when Cal.com is loaded */
.cal-loaded .cal-embed-placeholder {
    display: none;
}

/* ============================================
   BOOKING TABS - Dual Channel System
   ============================================ */

/* === BOOKING TABS NAVIGATION === */
.booking-tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    justify-content: center;
    flex-wrap: wrap;
}

.booking-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md) var(--space-xl);
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    min-width: 200px;
}

.booking-tab:hover {
    border-color: var(--green);
}

.booking-tab.active {
    border-color: var(--green);
    background: var(--green-pale);
}

.booking-tab-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    background: var(--green);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 2px;
    white-space: nowrap;
}

.booking-tab-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--charcoal);
    margin-bottom: 2px;
}

.booking-tab-desc {
    font-size: 0.875rem;
    color: var(--medium-gray);
}

.booking-tab.active .booking-tab-title {
    color: var(--green-dark);
}

.booking-tab.active .booking-tab-desc {
    color: var(--green);
}

/* === BOOKING OPTIONS === */
.booking-option {
    display: none;
    background: var(--white);
    border: 1px solid var(--light-gray);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.booking-option.active {
    display: block;
}

.booking-option-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.booking-option-header h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
    color: var(--charcoal);
}

.booking-option-header p {
    font-size: 1rem;
    color: var(--dark-gray);
    max-width: 500px;
    margin: 0 auto;
}

.booking-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.booking-option-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

.feature-item svg {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
}

/* === BUTTON SIZES === */
.btn-lg {
    padding: 1.25rem 2.5rem;
    font-size: 1.0625rem;
}

.btn-sm {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

.btn-xl {
    padding: 20px 48px;
    font-size: 1.125rem;
    gap: var(--space-sm);
}

.btn-xl .btn-icon {
    width: 24px;
    height: 24px;
}

/* === SIMPLIFIED BOOKING (Single Primary CTA) === */
.booking-primary-cta {
    text-align: center;
    margin: var(--space-xl) 0;
}

.booking-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-md);
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

.booking-trust-line svg {
    width: 18px;
    height: 18px;
    color: var(--green);
    flex-shrink: 0;
}

.link-subtle {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--duration) var(--ease);
}

.link-subtle:hover {
    color: var(--green-dark);
}

/* Cal.com section styling (contatti page) */
section.booking-calcom-section {
    background: var(--off-white);
    padding: var(--space-2xl) 0;
}

.calcom-header-minimal {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.calcom-header-minimal h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    color: var(--charcoal);
    margin-bottom: var(--space-xs);
}

.calcom-note {
    font-size: 0.875rem;
    color: var(--dark-gray);
}

/* Contact options in booking section */
.booking-contact-options {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--light-gray);
}

.booking-contact-options > p {
    font-size: 0.875rem;
    color: var(--medium-gray);
    margin-bottom: var(--space-sm);
}

.booking-contact-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* === BOOKING INFO SIDEBAR UPDATES === */
.booking-info-contact {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--light-gray);
    text-align: center;
}

.booking-info-contact p {
    font-size: 0.875rem;
    color: var(--medium-gray);
    margin-bottom: var(--space-sm);
}

.booking-info-contact .btn {
    margin: var(--space-xs);
}

/* === RESPONSIVE BOOKING TABS === */
@media (max-width: 600px) {
    .booking-tabs {
        flex-direction: column;
    }

    .booking-tab {
        min-width: 100%;
    }

    .booking-option {
        padding: var(--space-lg);
    }

    .booking-option-features {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* === BOOKING CONTAINER GRID UPDATE === */
@media (min-width: 900px) {
    .booking-container {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: var(--space-xl);
        align-items: start;
    }

    .booking-option {
        grid-column: 1;
    }

    .booking-info {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

/* === BOOKING CALCOM SECTION (Contatti Page) === */
.booking-calcom-section {
    border-top: 1px solid var(--light-gray);
    padding-top: var(--space-xl);
}

/* Le due sezioni si toccano: 80px di padding sotto la prenotazione piu' 96px sopra
   "Dove siamo" (piu' il bianco che il widget Cal.com si tiene in fondo) aprivano
   quasi 200px di nulla fra l'ultima card e il titolo. Dimezzati: le due sezioni
   restano distinte grazie al cambio di fondo, senza il buco in mezzo. */
section.booking-calcom-section {
    padding-bottom: var(--space-lg);
}

.booking-calcom-section + .contact-page {
    padding-top: var(--space-xl);
}

.booking-calcom-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--charcoal);
}

/* === SCREEN READER ONLY (Accessibility) === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === BLOG LISTING === */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

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

.blog-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--light-gray);
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.blog-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

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

.blog-card-date {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
    margin: var(--space-sm) 0 var(--space-md);
    line-height: 1.3;
}

.blog-card-excerpt {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--medium-gray);
}

.blog-card-author {
    font-weight: 500;
    color: var(--dark-gray);
}

.blog-card-reading {
    font-style: italic;
}

.blog-coming-soon {
    text-align: center;
    color: var(--medium-gray);
    font-size: 0.9375rem;
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-top: 1px solid var(--light-gray);
}

/* === BLOG POST === */
.blog-post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 900px) {
    .blog-post-grid {
        grid-template-columns: 1fr 240px;
    }
}

.blog-post-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--charcoal);
    margin: var(--space-xl) 0 var(--space-md);
}

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

.blog-post-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--dark-gray);
    margin-bottom: var(--space-md);
}

.blog-post-content .simple-list {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-lg);
}

.blog-post-content .simple-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--space-sm);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dark-gray);
}

.blog-post-content .simple-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--green);
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--medium-gray);
    margin-top: var(--space-sm);
}

.blog-post-meta span:not(:last-child)::after {
    content: '\00b7';
    margin-left: var(--space-md);
}

/* Blog sidebar TOC */
.blog-post-sidebar {
    order: -1;
}

@media (min-width: 900px) {
    .blog-post-sidebar {
        order: 0;
    }
}

.blog-toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    background: var(--off-white);
    padding: var(--space-lg);
    border-left: 2px solid var(--green);
}

.blog-toc h4 {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    color: var(--charcoal);
    margin-bottom: var(--space-md);
}

.blog-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-toc li {
    margin-bottom: var(--space-sm);
}

.blog-toc a {
    font-size: 0.875rem;
    color: var(--dark-gray);
    line-height: 1.4;
    transition: color var(--duration) var(--ease);
}

.blog-toc a:hover {
    color: var(--green);
}

/* Blog post CTA */
.blog-post-cta {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--green-pale);
    text-align: center;
}

.blog-post-cta h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

.blog-post-cta > p {
    color: var(--dark-gray);
    margin-bottom: var(--space-lg);
}

.blog-post-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

/* === PREPARAZIONE VISITA === */
.prep-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.prep-intro p {
    flex: 1;
    min-width: 280px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dark-gray);
}

.prep-print-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.prep-checklist {
    max-width: 700px;
}

.prep-checklist h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
    margin: var(--space-xl) 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--light-gray);
}

.prep-checklist h2:first-child {
    margin-top: 0;
}

.prep-checklist-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.prep-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.prep-checklist-item:hover {
    background: var(--off-white);
}

.prep-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--green);
    cursor: pointer;
}

.prep-checklist-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prep-checklist-text strong {
    font-size: 0.9375rem;
    color: var(--charcoal);
}

.prep-checklist-text span {
    font-size: 0.875rem;
    color: var(--medium-gray);
    line-height: 1.4;
}

.prep-cta {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--green-pale);
    text-align: center;
}

.prep-cta h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
    margin-bottom: var(--space-lg);
}

.prep-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

/* ============================================
   VIEW TRANSITIONS (cross-document, progressive enhancement)
   ============================================ */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.22s;
    }
}

/* ============================================
   INDICE DI PAGINA (pagine patologia)
   ============================================ */
.page-toc {
    max-width: 680px;
    margin: 0 0 var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--white);
    border: var(--hairline);
    border-left: 2px solid var(--green);
    box-shadow: var(--shadow-soft);
}

.page-toc-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: var(--space-sm);
}

.page-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    counter-reset: toc;
}

.page-toc li {
    counter-increment: toc;
}

.page-toc a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.9375rem;
    color: var(--dark-gray);
    transition: color var(--duration) var(--ease);
}

.page-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    color: var(--green-light);
}

.page-toc a:hover {
    color: var(--green);
}

@media (min-width: 768px) {
    .page-toc ol {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }
}

/* ============================================
   GALLERIA STUDIO (homepage, foto reali)
   Nastro a scorrimento automatico continuo: il track contiene le 5 foto
   più un clone aria-hidden; l'animazione trasla di -50% (metà identiche
   → loop senza stacchi). Pausa su hover/focus; con reduced-motion il
   nastro resta fermo e scorribile a mano (clone nascosto).
   ============================================ */
.studio-strip {
    overflow: hidden;
    border: var(--hairline);
    box-shadow: var(--shadow-soft);
    margin-top: var(--space-xl);
    background: var(--white);
}

.studio-track {
    display: flex;
    width: max-content;
    animation: studioScroll 55s linear infinite;
    will-change: transform;
}

.studio-strip:hover .studio-track,
.studio-strip:focus-within .studio-track {
    animation-play-state: paused;
}

@keyframes studioScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.studio-figure {
    margin: 0;
    background: var(--white);
    flex: 0 0 clamp(250px, 30vw, 400px);
    border-right: var(--hairline);
}

.studio-photo {
    overflow: hidden;
}

.studio-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.studio-figure:hover .studio-photo img {
    transform: scale(1.03);
}

/* Crop per foto: le riprese hanno molto soffitto/cielo — il taglio porta
   l'occhio su lettino/strumenti, ambienti e ingresso. */
.studio-photo--ambulatorio img { object-position: 75% 60%; }
.studio-photo--attesa img { object-position: center 70%; }
.studio-photo--esterno img { object-position: 22% 45%; }
.studio-photo--ambulatorio2 img { object-position: center 62%; }
.studio-photo--attesa2 img { object-position: center 68%; }

.studio-figure figcaption {
    padding: 0.65rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--medium-gray);
    border-top: var(--hairline);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .studio-figure {
        flex-basis: 78vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-track {
        animation: none;
    }
    .studio-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .studio-clone {
        display: none;
    }
}

/* Padding card ridotto su mobile: 64px desktop → 24px per non comprimere il contenuto su 390px */
@media (max-width: 767px) {
    .service-card,
    .review-card,
    .quiz-card {
        padding: var(--space-md);
    }
}

/* Dove siamo, subito visibile accanto alla prenotazione */
.booking-header-place {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--medium-gray);
}

.booking-header-place a {
    color: var(--green);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================
   AREA PAZIENTI (pazienti.html)
   ============================================ */

/* Scorciatoie nel page-hero */
.ap-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.ap-hero-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--green);
    border-radius: 2px;
    color: var(--green-dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    background: var(--white);
    transition: background 0.2s ease, color 0.2s ease;
}

.ap-hero-links a:hover,
.ap-hero-links a:focus-visible {
    background: var(--green);
    color: var(--white);
}

.ap-hero-links svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Scrivi allo studio: form + colonna di contesto */
.ap-writer {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (min-width: 900px) {
    .ap-writer {
        grid-template-columns: 3fr 2fr;
        gap: var(--space-xl);
        align-items: start;
    }
}

.ap-aside > * + * {
    margin-top: var(--space-md);
}

.ap-alert {
    border: 1px solid var(--danger-border);
    border-left: 4px solid var(--danger-border);
    border-radius: 2px;
    background: var(--danger-bg);
    padding: var(--space-sm) var(--space-md);
}

.ap-alert h3 {
    color: var(--danger);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.ap-alert ul {
    margin: 0 0 0.6rem;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

.ap-alert li {
    margin-bottom: 0.3rem;
}

.ap-alert p {
    font-size: 0.9rem;
    margin: 0;
}

.ap-alert strong {
    color: var(--danger);
}

.ap-alert em {
    /* senza questa regola l'`em` globale (verde) finisce su fondo rosso pallido:
       contrasto insufficiente. Stesso tono del testo dell'avviso. */
    color: var(--danger);
}

.ap-how {
    border: 1px solid var(--light-gray);
    border-radius: 2px;
    background: var(--off-white);
    padding: var(--space-sm) var(--space-md);
}

.ap-how h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.ap-how ol {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
}

.ap-how li {
    margin-bottom: 0.35rem;
}

.ap-how .ap-small {
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin: 0.6rem 0 0;
}

/* Modulo */
.ap-lead {
    max-width: 62ch;
}

.ap-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--space-sm);
}

@media (min-width: 600px) {
    .ap-row {
        grid-template-columns: 2fr 1fr;
    }
}

.ap-field {
    margin-bottom: var(--space-sm);
}

.ap-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--charcoal);
    font-size: 0.95rem;
}

.ap-hint {
    font-weight: 400;
    color: var(--medium-gray);
}

.ap-field input,
.ap-field select,
.ap-field textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--light-gray);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--charcoal);
    background: var(--white);
}

.ap-field input:focus,
.ap-field select:focus,
.ap-field textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
    border-color: var(--green);
}

.ap-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--dark-gray);
    margin: var(--space-sm) 0 var(--space-md);
    cursor: pointer;
}

.ap-consent input {
    margin-top: 0.2rem;
    width: auto;
    flex-shrink: 0;
}

.ap-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.ap-feedback {
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: var(--danger);
    min-height: 1.2em;
}

.ap-preview {
    margin-top: var(--space-md);
    border: 1px dashed var(--light-gray);
    border-radius: 2px;
    background: var(--cream);
    padding: var(--space-sm) var(--space-md);
}

.ap-preview h3 {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--medium-gray);
    margin-bottom: 0.4rem;
}

.ap-preview pre {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--dark-gray);
}

/* Passaparola */
.ap-referral {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (min-width: 800px) {
    .ap-referral {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-xl);
    }
}

.ap-ref-item {
    border-top: 2px solid var(--green);
    padding-top: var(--space-sm);
}

.ap-ref-item h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.ap-ref-item p {
    font-size: 0.92rem;
    color: var(--dark-gray);
    margin-bottom: 0.7rem;
}

.ap-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--green-dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid var(--green-light);
    padding-bottom: 1px;
}

.ap-ref-link:hover,
.ap-ref-link:focus-visible {
    color: var(--green);
    border-bottom-color: var(--green);
}

.ap-ref-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pricing-intro-note,
.booking-header-note {
    font-size: 0.9375rem;
    color: var(--dark-gray);
    margin-bottom: var(--space-md);
}

.booking-panel-note {
    font-size: 0.875rem;
    color: var(--dark-gray);
    margin-bottom: var(--space-sm);
}

.mobile-cta-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.mobile-cta-hours {
    font-size: 0.6875rem;
    font-weight: 500;
}

.form-send-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.form-send-actions .btn {
    flex: 1 1 14rem;
}

.ap-therapy-note {
    font-size: 0.88rem;
    color: var(--dark-gray);
    margin: 0 0 var(--space-xs);
}

.prep-therapy {
    margin-top: var(--space-lg);
}

.ap-urgent-note {
    font-size: 0.88rem;
    color: var(--danger);
    margin: 0 0 var(--space-sm);
}

/* === ARTWORK LINE-ART (luglio 2026) ===
   Cover blog, illustrazioni page-hero, 404, pattern hero home.
   Stile: line-art verde su off-white, coerente con .ecg-line. */

/* Cover nelle card del blog */
.blog-card-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--light-gray);
    background: var(--off-white);
}

.blog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration) var(--ease);
}

.blog-card:hover .blog-card-cover img {
    transform: scale(1.03);
}

/* Cover in testa all'articolo */
.article-cover {
    margin: 0 0 var(--space-lg);
    border: 1px solid var(--light-gray);
    background: var(--off-white);
}

.article-cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* Page-hero con illustrazione laterale */
.page-hero--illustrated .page-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-xl);
    align-items: center;
}

.page-hero--illustrated::after {
    display: none;
}

.page-hero-visual {
    margin: 0;
}

.page-hero-visual img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

@media (max-width: 899px) {
    .page-hero--illustrated .page-hero-container {
        grid-template-columns: 1fr;
    }

    .page-hero-visual {
        display: none;
    }
}

/* 404 con artwork */
.error-artwork {
    max-width: 300px;
    margin: 0 auto var(--space-lg);
}

.error-artwork img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

/* Pattern Swiss a micro-punti dietro il dittico della hero home */
@media (min-width: 900px) {
    .hero-visual {
        position: relative;
    }

    .hero-visual::before {
        content: '';
        position: absolute;
        inset: -1.5rem -1.5rem 2rem 40%;
        background-image: radial-gradient(var(--green-light) 1.3px, transparent 1.3px);
        background-size: 20px 20px;
        opacity: 0.35;
        pointer-events: none;
        z-index: 0;
    }
}

/* === HERO HOME v2 (luglio 2026, sessione B) ===
   Lastra con artwork organico generato (fallback: gradiente originale)
   e dittico a "stampa fotografica" che galleggia sull'artwork. */

@media (min-width: 900px) {
    .hero-visual {
        background:
            url('../images/hero-bg-1600.webp') right bottom / cover no-repeat,
            linear-gradient(180deg, var(--hero-wash-top) 0%, var(--hero-wash-bottom) 100%);
        align-items: center;
        padding-bottom: var(--space-lg);
    }

    /* L'artwork assorbe la funzione della texture a micro-punti */
    .hero-visual::before {
        display: none;
    }

    .hero-diptych {
        border: none;
        background: transparent;
        gap: 10px;
        max-width: 380px;
    }

    .hero-diptych-figure {
        border: 1px solid var(--light-gray);
        box-shadow: 0 14px 44px rgba(26, 26, 26, 0.10);
    }
}

@media (min-width: 1200px) {
    .hero-diptych {
        max-width: 420px;
    }
}

/* === HERO VIDEO + ANIMAZIONI (luglio 2026, sessione B) ===
   Video ambientale dello studio nella lastra destra della hero (solo
   desktop, avviato da JS quando reduced-motion non è attivo); velo brand
   per continuità con l'artwork. Sotto i 900px e con reduced-motion resta
   l'artwork statico. */

.hero-video {
    display: none;
}

@media (min-width: 900px) {
    .hero-visual {
        overflow: hidden;
    }

    .hero-video {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        opacity: 0;
        transition: opacity 0.9s ease;
    }

    .hero-video.is-playing {
        opacity: 1;
    }

    .hero-visual::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
            rgba(240, 247, 243, 0.50) 0%,
            rgba(235, 245, 240, 0.20) 45%,
            rgba(46, 125, 94, 0.16) 100%);
        z-index: 0;
        pointer-events: none;
    }

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

@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none !important;
    }
}

/* Illustrazioni dei page-hero: fluttuazione appena percettibile */
@media (prefers-reduced-motion: no-preference) {
    .page-hero--illustrated .page-hero-visual img {
        animation: heroFloat 7s ease-in-out infinite alternate;
    }
}

@keyframes heroFloat {
    from { transform: translateY(-5px); }
    to   { transform: translateY(5px); }
}

/* Cover blog: zoom dolce al passaggio, come le foto del dittico */
.blog-card-cover img,
.article-hero-figure img {
    transition: transform 0.45s var(--ease);
}

.blog-card:hover .blog-card-cover img {
    transform: scale(1.035);
}

/* ============================================
   SCEGLI-VISITA (pagina servizi)
   Riusa lo stile del quiz homepage; qui solo la riga
   prezzo/durata del risultato e la nota informativa.
   ============================================ */
.svc-result-meta {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--green);
    margin: 0.25rem 0 var(--space-md);
}

.svc-note {
    font-size: 0.8125rem;
    color: var(--medium-gray);
    margin-top: var(--space-md);
}