/* ================================================================
   ANALISI SENSORIALE v5.0 — Ferrarini & Bonetti
   /templates/flex/css/analisi-sensoriale-v5.css
   ————————————————————————————————————————————————————————————————
   Due sezioni: Chooser (scuro) + Analysis (chiaro/cream)
   Usa --fb-* tokens dal sistema di design del sito.
   Responsive: mobile-first, container query per adattamento.
   ================================================================ */

/* ── Token locali aroma-wheel ─────────────────────────────────── */
.fbsv5 {
    --_c-lattico: #f0d870;
    --_c-vegetale: #7bbf5e;
    --_c-floreale: #c890c4;
    --_c-fruttato: #e89e4e;
    --_c-tostato: #a45835;
    --_c-animale: #b8a898;
    --_c-speziato: #d05868;
    --_c-altro: #7aaed0;

    container-type: inline-size;
    container-name: fbsv5;
    font-family: inherit;
    box-sizing: border-box;
}

.fbsv5 *,
.fbsv5 *::before,
.fbsv5 *::after {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   SEZIONE 1 — CHOOSER (scuro)
   ══════════════════════════════════════════════════════════════ */
.fbsv5-chooser {
    /*background: var(--fb-dark, #120e0b);*/
    padding: 40px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 45px;
    height: 85vh;
    /* riempie esattamente il pannello slider */
    overflow: hidden;
    position: relative;
}

/* Header testo */
.fbsv5-chooser__header {
    text-align: center;
    max-width: 720px;
}

.fbsv5-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--fb-gold, #c8962a);
    margin-bottom: 16px;
}

.fbsv5-eyebrow::before,
.fbsv5-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--fb-gold, #c8962a);
    opacity: .45;
}

.fbsv5-chooser__title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--fb-cream-100, #faf6ef);
    margin: 0 0 10px;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.fbsv5-chooser__lead {
    font-size: clamp(.82rem, 1.4vw, .95rem);
    color: rgba(250, 246, 239, .58);
    line-height: 1.6;
    margin: 0;
}

/* Grid 4 card */
.fbsv5-chooser__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 960px;
}

@container fbsv5 (min-width: 600px) {
    .fbsv5-chooser__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Card singola stagionatura */
.fbsv5-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(200, 150, 42, .18);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    padding: 0;
    transition: border-color .3s, transform .3s, box-shadow .3s;
    will-change: transform;
}

.fbsv5-card:hover,
.fbsv5-card:focus-visible {
    border-color: var(--fb-gold, #c8962a);
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(200, 150, 42, .3);
    outline: none;
}

.fbsv5-card.is-selected {
    border-color: var(--fb-gold, #c8962a);
    box-shadow: 0 0 0 2px var(--fb-gold, #c8962a), 0 16px 40px rgba(0, 0, 0, .5);
}

.fbsv5-card__num {
    position: absolute;
    top: 14px;
    left: 16px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--fb-gold, #c8962a);
    z-index: 2;
}

.fbsv5-card__img-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /* forma circolare */
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
    margin: 20px auto 0;
    border: 2px solid rgba(200, 150, 42, .25);
    transition: border-color .3s;
}

.fbsv5-card:hover .fbsv5-card__img-wrap,
.fbsv5-card.is-selected .fbsv5-card__img-wrap {
    border-color: var(--fb-gold, #c8962a);
}

.fbsv5-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}

.fbsv5-card:hover .fbsv5-card__img-wrap img {
    transform: scale(1.08);
}

.fbsv5-card__body {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    text-align: center;
}

.fbsv5-card__time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--fb-gold, #c8962a);
    letter-spacing: .06em;
}

.fbsv5-card__badge {
    font-size: .88rem;
    font-weight: 700;
    color: var(--fb-cream-100, #faf6ef);
    line-height: 1.2;
}

.fbsv5-card__desc {
    font-size: .76rem;
    color: rgba(250, 246, 239, .5);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fbsv5-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--fb-gold, #c8962a);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 4px;
    transition: gap .2s;
}

.fbsv5-card:hover .fbsv5-card__cta {
    gap: 10px;
}

.fbsv5-card__hover-ring {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color .3s;
}

/* Scroll hint in fondo al chooser */
.fbsv5-chooser__scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(250, 246, 239, .35);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fbsv5-scroll-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(250, 246, 239, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fbv5-bounce 2s ease-in-out infinite;
}

@keyframes fbv5-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ══════════════════════════════════════════════════════════════
   SEZIONE 2 — ANALISI (chiaro/cream)
   ══════════════════════════════════════════════════════════════ */
.fbsv5-analysis {
    background: var(--fb-cream-100, #faf6ef);
    height: 100vh;
    /* riempie l'intero pannello slider */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* lo scroll avviene dentro l'inner */
}

/* Barra top: torna + pills — fissa in cima al pannello */
.fbsv5-analysis__topbar {
    flex-shrink: 0;
    z-index: 10;
    background: var(--fb-cream-100, #faf6ef);
    border-bottom: 1px solid rgba(100, 78, 42, .12);
    display: flex;
    padding: 12px 24px;
    gap: 16px;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.fbsv5-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--fb-brown-500, #5c3d1e);
    background: none;
    border: 1px solid rgba(92, 61, 30, .25);
    border-radius: 100px;
    padding: 7px 16px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    letter-spacing: .04em;
}

.fbsv5-back-btn:hover {
    background: rgba(92, 61, 30, .08);
    border-color: rgba(92, 61, 30, .5);
    color: var(--fb-brown-900, #231a10);
}

/* Pill stagionatura */
.fbsv5-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fbsv5-pill {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 6px 16px;
    border-radius: 100px;
    border: 1.5px solid rgba(92, 61, 30, .2);
    background: none;
    color: var(--fb-brown-500, #5c3d1e);
    cursor: pointer;
    transition: all .22s;
}

.fbsv5-pill:hover,
.fbsv5-pill.is-active {
    background: var(--fb-brown-900, #231a10);
    border-color: var(--fb-brown-900, #231a10);
    color: var(--fb-cream-100, #faf6ef);
}

/* Layout principale analisi — area scrollabile */
.fbsv5-analysis__inner {
    flex: 1;
    /* occupa lo spazio rimanente dopo topbar */
    min-height: 0;
    /* necessario per overflow con flex */
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0px 0px 0px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

@container fbsv5 (min-width: 860px) {
    .fbsv5-analysis__inner {
        grid-template-columns: 340px 1fr;
        gap: 60px;
    }
}

/* SINISTRA */
.fbsv5-analysis__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fbsv5-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--fb-gold, #c8962a);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fbsv5-img-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 0, 0, .04);
    aspect-ratio: 4 / 3;
    max-height: 220px;
}

@container fbsv5 (min-width: 860px) {
    .fbsv5-img-frame {
        aspect-ratio: 3 / 4;
        max-height: 260px;
    }
}

.fbsv5-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease, transform .5s ease;
    display: block;
}

.fbsv5-img-frame__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center bottom, rgba(200, 150, 42, .12) 0%, transparent 70%);
    pointer-events: none;
}

/* Profilo (desktop: sotto immagine) */
.fbsv5-profile {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fbsv5-profile--mobile {
    display: none;
    /* mostrato su mobile, nascosto su desktop */
}

@container fbsv5 (max-width: 859px) {
    .fbsv5-profile {
        display: none;
        /* nasconde il profilo desktop su mobile */
    }

    .fbsv5-profile--mobile {
        display: flex;
    }
}

.fbsv5-profile__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fb-brown-900, #231a10);
    margin: 0;
    letter-spacing: -.01em;
}

.fbsv5-profile__desc {
    font-size: .92rem;
    color: var(--fb-brown-500, #5c3d1e);
    line-height: 1.7;
    margin: 0;
}

.fbsv5-profile__pairing {
    border-left: 3px solid var(--fb-gold, #c8962a);
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fbsv5-profile__pairing-label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--fb-gold, #c8962a);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fbsv5-profile__pairing-text {
    font-size: .88rem;
    color: var(--fb-brown-500, #5c3d1e);
    line-height: 1.6;
    margin: 0;
}

/* DESTRA — tab + panel */
.fbsv5-analysis__right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fbsv5-tab-nav {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid rgba(100, 78, 42, .12);
    margin-bottom: 28px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.fbsv5-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--fb-brown-500, #5c3d1e);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    letter-spacing: .02em;
}

.fbsv5-tab:hover {
    color: var(--fb-brown-900, #231a10);
}

.fbsv5-tab.is-active {
    color: var(--fb-brown-900, #231a10);
    border-bottom-color: var(--fb-gold, #c8962a);
}

/* Panel tab */
.fbsv5-panel {
    display: none;
    animation: fbv5-fade-in .32s ease;
}

.fbsv5-panel.is-active {
    display: block;
}

@keyframes fbv5-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fbsv5-note {
    margin: 20px 0 0;
    font-size: .88rem;
    color: var(--fb-brown-500, #5c3d1e);
    line-height: 1.65;
    padding: 14px 18px;
    background: rgba(200, 150, 42, .06);
    border-left: 3px solid var(--fb-gold, #c8962a);
    border-radius: 0 8px 8px 0;
}

/* ── Vista ─────────────────────────────────────────────────── */
.fbsv5-vista-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.fbsv5-vista-card {
    background: #fff;
    border: 1px solid rgba(100, 78, 42, .1);
    border-radius: 14px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: box-shadow .2s;
}

.fbsv5-vista-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}

.fbsv5-vista-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fb-cream-200, #f0ebe0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--fb-gold, #c8962a);
}

.fbsv5-vista-card__label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fb-brown-900, #231a10);
}

.fbsv5-vista-card__text {
    font-size: .84rem;
    color: var(--fb-brown-500, #5c3d1e);
    line-height: 1.5;
    margin: 0;
}

/* ── Olfatto ────────────────────────────────────────────────── */
.fbsv5-olfatto-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

@container fbsv5 (min-width: 540px) {
    .fbsv5-olfatto-layout {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.fbsv5-wheel-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.fbsv5-wheel {
    width: 100%;
    max-width: 240px;
    height: auto;
    display: block;
}

.fbsv5-wheel__seg {
    fill: rgba(100, 78, 42, .08);
    stroke: var(--fb-cream-100, #faf6ef);
    stroke-width: 2;
    transition: fill .3s;
    cursor: pointer;
}

.fbsv5-wheel__seg:hover,
.fbsv5-wheel__seg.is-active {
    fill-opacity: 1;
}

.fbsv5-wheel__seg[data-aroma="lattico"].is-active {
    fill: var(--_c-lattico);
}

.fbsv5-wheel__seg[data-aroma="vegetale"].is-active {
    fill: var(--_c-vegetale);
}

.fbsv5-wheel__seg[data-aroma="floreale"].is-active {
    fill: var(--_c-floreale);
}

.fbsv5-wheel__seg[data-aroma="fruttato"].is-active {
    fill: var(--_c-fruttato);
}

.fbsv5-wheel__seg[data-aroma="tostato"].is-active {
    fill: var(--_c-tostato);
}

.fbsv5-wheel__seg[data-aroma="animale"].is-active {
    fill: var(--_c-animale);
}

.fbsv5-wheel__seg[data-aroma="speziato"].is-active {
    fill: var(--_c-speziato);
}

.fbsv5-wheel__seg[data-aroma="altro"].is-active {
    fill: var(--_c-altro);
}

.fbsv5-wheel__center {
    fill: var(--fb-cream-100, #faf6ef);
    stroke: rgba(100, 78, 42, .12);
    stroke-width: 1;
}

.fbsv5-wheel__center-text {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    fill: var(--fb-brown-900, #231a10);
    text-anchor: middle;
}

.fbsv5-wheel-tip {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: var(--fb-brown-900, #231a10);
    color: var(--fb-cream-100, #faf6ef);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.4;
    opacity: 0;
    transition: opacity .15s;
    max-width: 160px;
    z-index: 5;
}

.fbsv5-wheel-tip.visible {
    opacity: 1;
}

.fbsv5-wheel-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    width: 100%;
}

.fbsv5-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    color: var(--fb-brown-500, #5c3d1e);
}

.fbsv5-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fbsv5-olfatto-notes__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fb-brown-900, #231a10);
    margin: 0 0 10px;
}

.fbsv5-olfatto-notes p {
    font-size: .88rem;
    color: var(--fb-brown-500, #5c3d1e);
    line-height: 1.7;
}

.fbsv5-aroma-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.fbsv5-aroma-tag {
    font-size: .76rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    background: rgba(200, 150, 42, .1);
    border: 1px solid rgba(200, 150, 42, .25);
    color: var(--fb-brown-900, #231a10);
}

/* ── Gusto ─────────────────────────────────────────────────── */
.fbsv5-gusto-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

@container fbsv5 (min-width: 540px) {
    .fbsv5-gusto-layout {
        grid-template-columns: 1fr 1fr;
    }
}

.fbsv5-radar-wrap {
    display: flex;
    justify-content: center;
}

.fbsv5-radar-canvas {
    max-width: 240px;
    width: 100%;
    height: auto !important;
}

.fbsv5-taste-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fbsv5-taste-bar {
    display: grid;
    grid-template-columns: 70px 1fr 36px;
    align-items: center;
    gap: 10px;
}

.fbsv5-taste-bar__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--fb-brown-900, #231a10);
    text-align: right;
}

.fbsv5-taste-bar__track {
    height: 8px;
    background: rgba(100, 78, 42, .1);
    border-radius: 100px;
    overflow: hidden;
}

.fbsv5-taste-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold, #c8962a), #e8a832);
    border-radius: 100px;
    width: 0;
    transition: width .7s cubic-bezier(.4, 0, .2, 1);
}

.fbsv5-taste-bar__val {
    font-size: .8rem;
    font-weight: 700;
    color: var(--fb-brown-900, #231a10);
    text-align: right;
    min-width: 28px;
}

/* ── Tatto ─────────────────────────────────────────────────── */
.fbsv5-texture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@container fbsv5 (max-width: 480px) {
    .fbsv5-texture-grid {
        grid-template-columns: 1fr;
    }
}

.fbsv5-texture-card {
    background: #fff;
    border: 1px solid rgba(100, 78, 42, .1);
    border-radius: 14px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: box-shadow .2s;
}

.fbsv5-texture-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}

.fbsv5-texture-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fb-cream-200, #f0ebe0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--fb-gold, #c8962a);
}

.fbsv5-texture-card__label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fb-brown-900, #231a10);
}

.fbsv5-gauge {
    width: 100%;
    height: 8px;
    background: rgba(100, 78, 42, .1);
    border-radius: 100px;
    overflow: hidden;
}

.fbsv5-gauge__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold, #c8962a), #e8a832);
    border-radius: 100px;
    width: 0;
    transition: width .7s cubic-bezier(.4, 0, .2, 1);
}

.fbsv5-texture-card__val {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--fb-brown-900, #231a10);
    line-height: 1;
}

.fbsv5-texture-card__val small {
    font-size: .6rem;
    color: var(--fb-brown-300, #a08060);
    font-weight: 400;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   INTRO PANELS
   ══════════════════════════════════════════════════════════════ */
.fbsv5-intro {
    padding: 80px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fbsv5-intro--dark {
    background: rgba(18, 14, 11, 0.56);
}

.fbsv5-intro--light {
    background: var(--fb-cream, #f5f0e6);
}

.fbsv5-intro__inner {
    max-width: 720px;
    width: 100%;
}

.fbsv5-intro--dark .fbsv5-eyebrow {
    color: var(--fb-gold, #c8962a);
}

.fbsv5-intro--light .fbsv5-eyebrow {
    color: var(--fb-brown-500, #7a5c38);
}

.fbsv5-intro__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 16px 0 28px;
    letter-spacing: -.02em;
}

.fbsv5-intro--dark .fbsv5-intro__title {
    color: var(--fb-cream, #f5f0e6);
}

.fbsv5-intro--light .fbsv5-intro__title {
    color: var(--fb-brown-900, #231a10);
}

.fbsv5-intro__body {
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0 0 16px;
}

.fbsv5-intro--dark .fbsv5-intro__body {
    color: rgba(245, 240, 230, .72);
}

.fbsv5-intro--light .fbsv5-intro__body {
    color: var(--fb-brown-700, #4a3420);
}

/* ══════════════════════════════════════════════════════════════
   QUOTE PANELS
   ══════════════════════════════════════════════════════════════ */
.fbsv5-quote {
    padding: 64px 24px;
    background: var(--fb-cream, #f5f0e6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.fbsv5-quote--dark {
    background: var(--fb-dark, #120e0b);
}

.fbsv5-quote__inner {
    max-width: 680px;
    width: 100%;
    position: relative;
}

.fbsv5-quote__mark {
    font-size: 6rem;
    line-height: .6;
    color: var(--fb-gold, #c8962a);
    opacity: .45;
    font-family: Georgia, 'Times New Roman', serif;
    user-select: none;
    display: block;
    margin-bottom: 8px;
}

.fbsv5-quote__text {
    font-size: clamp(1.25rem, 3vw, 1.85rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.01em;
    font-style: italic;
    margin: 0;
    border: none;
    padding: 0;
}

.fbsv5-quote .fbsv5-quote__text {
    color: var(--fb-brown-900, #231a10);
}

.fbsv5-quote--dark .fbsv5-quote__text {
    color: var(--fb-cream, #f5f0e6);
}

/* ══════════════════════════════════════════════════════════════
   CTA PANELS
   ══════════════════════════════════════════════════════════════ */
.fbsv5-cta {
    padding: 72px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fbsv5-cta--soft {
    background: #1e160f;
    border-top: 1px solid rgba(200, 150, 42, .15);
    border-bottom: 1px solid rgba(200, 150, 42, .15);
}

/* .fbsv5-cta--strong { background: var(--fb-dark, #120e0b); } */

.fbsv5-cta__inner {
    max-width: 640px;
    width: 100%;
}

.fbsv5-cta__title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px;
    color: var(--fb-cream, #f5f0e6);
    letter-spacing: -.02em;
}

.fbsv5-cta__body {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(245, 240, 230, .70);
    margin: 0 0 16px;
}

.fbsv5-cta__btn {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 36px;
    border-radius: 4px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    cursor: pointer;
}

.fbsv5-cta__btn:hover {
    transform: translateY(-2px);
}

/* CTA 1 soft — bordo oro */
.fbsv5-cta--soft .fbsv5-cta__btn {
    background: transparent;
    border: 2px solid var(--fb-gold, #c8962a);
    color: var(--fb-gold, #c8962a);
}

.fbsv5-cta--soft .fbsv5-cta__btn:hover {
    background: var(--fb-gold, #c8962a);
    color: var(--fb-dark, #120e0b);
}

/* CTA 2 strong — pieno oro */
.fbsv5-cta--strong .fbsv5-cta__btn {
    background: var(--fb-gold, #c8962a);
    border: 2px solid var(--fb-gold, #c8962a);
    color: var(--fb-dark, #120e0b);
}

.fbsv5-cta--strong .fbsv5-cta__btn:hover {
    background: #d8a63a;
    border-color: #d8a63a;
}

/* ── Separatore decorativo tra quote dark e analysis ─────────── */
.fbsv5-quote--dark+.fbsv5-cta--strong {
    border-top: 1px solid rgba(200, 150, 42, .12);
}

/* ════════════════════════════════════════════════════════════
   MOBILE — rimuovi altezze fisse e overflow hidden
   Su mobile il contenuto scorre naturalmente (no slider)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Chooser: rimuovi altezza fissa — le card devono essere tutte visibili */
    .fbsv5-chooser {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 48px 16px 56px;
        gap: 24px;
        justify-content: flex-start;
    }

    /* Scroll-hint non necessario su mobile scroll naturale */
    .fbsv5-chooser__scroll-hint {
        display: none;
    }

    /* Analysis: rimuovi altezza fissa e overflow hidden */
    .fbsv5-analysis {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    /* Inner: scroll naturale su mobile, non nested scroll */
    .fbsv5-analysis__inner {
        overflow-y: visible;
        min-height: auto;
        max-height: none;
        padding: 24px 16px 48px;
    }

    /* Topbar: padding più compatto su mobile */
    .fbsv5-analysis__topbar {
        padding: 10px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Intro sections: padding compatto */
    .fbsv5-intro__inner {
        padding: 48px 16px;
    }

    /* CTA sections: padding compatto */
    .fbsv5-cta__inner {
        padding: 0 16px;
    }

    /* Quote: padding compatto */
    .fbsv5-quote__inner {
        padding: 48px 20px;
    }
}