/* Felici Insieme BOX - replica del funnel BullyMake (home + quiz 8 step).
   Layout, ordine delle sezioni e proporzioni copiati da
   funnel-bullymake-riferimento-2026-09/screens/01-home-*.png e 02-quiz-*.png.
   Palette: Felici Insieme (terracotta della scatola stampata) al posto
   dell'arancione BullyMake #FF6105. Vedi FUNNEL-MAP.md. */

:root {
    --terracotta: #D95A40;   /* accento, era #FF6105 */
    --terracotta-dark: #B8452E;
    --petrolio: #2A6F75;     /* CTA, era il verde #5FC3A0 */
    --petrolio-dark: #1F565B;
    --crema: #F7F1E3;
    --ink: #231F20;          /* identico all'originale */
    --grey-bg: #D7D7D7;      /* identico all'originale */
    --grey-soft: #EFEFEF;
    --grey-text: #6E6E6E;
    --white: #FFFFFF;
    --radius: 10px;
    --wrap: 1180px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-weight: 400;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, .display {
    font-family: 'Anton', 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.02;
    margin: 0;
}

a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap--narrow { max-width: 760px; }
.center { text-align: center; }

/* ─── header ─── */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--terracotta);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 14px;
}
.site-header img { width: 150px; height: auto; }
.site-header__cta {
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    font-size: clamp(14px, 4vw, 18px); color: var(--white);
    text-decoration: none; white-space: nowrap; letter-spacing: .02em;
}

/* ─── bottoni ─── */
.btn {
    display: block; width: 100%; border: 0; cursor: pointer;
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    letter-spacing: .02em; text-align: center; text-decoration: none;
    white-space: nowrap;
    font-size: clamp(15px, 4.1vw, 22px);
    padding: 16px 12px; border-radius: 8px;
    background: var(--petrolio); color: var(--white);
}
.btn:hover { background: var(--petrolio-dark); }
.btn--orange { background: var(--terracotta); }
.btn--orange:hover { background: var(--terracotta-dark); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn--narrow { max-width: 420px; margin: 0 auto; }

/* ─── hero ─── */
.hero { background: var(--grey-bg); padding: 0 0 22px; }
.hero__media { position: relative; }
.hero__media img { width: 100%; }
.bubbles {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    padding: 16px 12px 6px; margin: 0; list-style: none;
}
.bubble {
    background: var(--terracotta); color: var(--white);
    border-radius: 999px; padding: 9px 16px;
    font-size: 14px; line-height: 1.15; text-align: center;
    max-width: 46%;
}
.bubble b { font-family: 'Anton', sans-serif; font-size: 17px; display: block; text-transform: uppercase; }
.eyebrow {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    font-size: clamp(17px, 5vw, 26px); margin: 4px 0 10px;
}
.eyebrow mark { background: var(--terracotta); color: var(--white); padding: 0 8px; }
.hero h1 { font-size: clamp(30px, 9vw, 58px); text-align: center; margin-bottom: 16px; }

/* ─── sezioni ─── */
.sec { padding: 34px 0; }
.sec--grey { background: var(--grey-bg); }
.sec--orange { background: var(--terracotta); color: var(--white); }
.sec--dark { background: var(--ink); color: var(--white); }
.sec h2 { font-size: clamp(25px, 7.3vw, 44px); text-align: center; }
.sec__lead {
    text-align: center; font-weight: 600; color: var(--terracotta);
    font-size: clamp(16px, 4.6vw, 20px); line-height: 1.3; margin: 12px auto 0; max-width: 620px;
}
.sec--orange .sec__lead, .sec--dark .sec__lead { color: var(--white); }
.sec__text { text-align: center; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.45; margin: 12px auto 0; max-width: 640px; }

/* ─── caroselli ─── */
.carousel { margin-top: 16px; }
.carousel__track {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 0 8px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: center; flex: 0 0 84%; max-width: 380px; }
.carousel__nav { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.carousel__nav button {
    width: 46px; height: 46px; border: 2px solid currentColor; background: transparent;
    border-radius: 8px; font-size: 20px; cursor: pointer; color: inherit; line-height: 1;
}
.carousel__dots { display: flex; gap: 10px; justify-content: center; margin: 14px 0 0; padding: 0; list-style: none; }
.carousel__dots button {
    width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: #B9B9B9;
}
.carousel__dots button[aria-current="true"] { background: var(--terracotta); }
.slide figcaption { text-align: center; margin-top: 10px; font-size: 15px; }
.slide figcaption b { display: block; color: var(--terracotta); font-weight: 600; }
.slide figcaption span { color: var(--grey-text); }
.slide img { border-radius: var(--radius); width: 100%; }

/* ─── cosa c'è nel box ─── */
.box-card {
    background: var(--white); color: var(--ink);
    border-radius: var(--radius); overflow: hidden; margin-top: 18px;
}
.box-card h2 { color: var(--terracotta); padding: 20px 16px 16px; }
.box-card__inner { background: var(--terracotta); color: var(--white); padding: 6px 14px 18px; }
.box-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.box-row img { width: 64px; height: 64px; flex: 0 0 64px; filter: brightness(0) invert(1); }
.box-row__body { flex: 1 1 auto; text-align: center; }
.box-row__title { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 19px; }
.box-row__note {
    display: block; background: var(--white); color: var(--terracotta);
    font-weight: 600; padding: 5px 10px; margin-top: 6px; font-size: 15px;
}

/* ─── tipi di gioco ─── */
.toy { background: var(--white); text-align: center; }
.toy__bones { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.toy__bones img { width: 26px; height: 26px; }
.toy h3 { font-size: 26px; }
.toy__sub { color: var(--terracotta); font-weight: 600; text-transform: uppercase; font-size: 15px; margin: 4px 0 12px; }
.toy__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toy__pics img { border-radius: 8px; aspect-ratio: 1/1; object-fit: cover; }
.toy__note { margin-top: 10px; font-size: 14px; color: var(--grey-text); line-height: 1.35; }
.scale { display: flex; gap: 12px; justify-content: center; margin-top: 14px; font-size: 15px; font-weight: 600; }
.scale span { border: 2px solid var(--ink); border-radius: 8px; padding: 8px 16px; }

/* ─── lista con spunte ─── */
.checks { list-style: none; margin: 18px auto 0; padding: 0; max-width: 620px; }
.checks li { display: flex; gap: 12px; padding: 10px 0; font-size: clamp(15px, 4.2vw, 17px); line-height: 1.4; }
.checks li::before { content: "\2713"; font-size: 22px; line-height: 1; opacity: .85; flex: 0 0 auto; }

/* ─── tabella noi / altri ─── */
.compare { margin-top: 20px; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.compare table { width: 100%; border-collapse: collapse; }
.compare thead th {
    background: var(--terracotta); color: var(--white);
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    padding: 12px 8px; font-size: 15px; line-height: 1.15;
}
.compare tbody td { padding: 12px 8px; text-align: center; border-top: 1px solid #E2E2E2; font-size: 14px; line-height: 1.3; }
.compare tbody .compare__label td { text-align: left; color: var(--grey-text); }
.compare .yes { color: var(--terracotta); font-size: 22px; line-height: 1; }
.compare .no { font-size: 20px; line-height: 1; }
.compare__note { font-size: 13px; color: var(--grey-text); line-height: 1.4; margin-top: 12px; }

/* ─── come funziona ─── */
.steps { list-style: none; counter-reset: s; margin: 18px 0 0; padding: 0; }
.steps li { display: flex; gap: 14px; padding: 9px 0; }
.steps li::before {
    counter-increment: s; content: counter(s);
    background: var(--terracotta); color: var(--white);
    font-family: 'Anton', sans-serif; font-size: 24px;
    width: 46px; height: 46px; flex: 0 0 46px;
    display: flex; align-items: center; justify-content: center;
}
.steps b { display: block; font-size: 17px; }
.steps span { color: var(--grey-text); font-size: 15px; line-height: 1.35; }

/* ─── galleria UGC ─── */
.gallery__track > * { flex: 0 0 72%; max-width: 320px; }
.gallery img { border-radius: var(--radius); aspect-ratio: 1/1; object-fit: cover; }

/* ─── garanzia ─── */
.guarantee { border: 3px solid var(--terracotta); border-radius: var(--radius); padding: 18px 16px; margin-top: 18px; text-align: center; background: var(--white); color: var(--ink); }
.guarantee h3 { color: var(--terracotta); font-size: 24px; }
.guarantee p { margin: 10px 0 0; font-size: 16px; line-height: 1.4; }
.guarantee small { display: block; margin-top: 10px; color: var(--grey-text); font-size: 13px; line-height: 1.4; }

/* ─── footer ─── */
.site-footer { background: var(--ink); color: #C9C9C9; padding: 28px 0 34px; font-size: 14px; }
.site-footer img { width: 160px; margin: 0 auto 16px; }
.site-footer ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
.site-footer a { color: #C9C9C9; }
.site-footer p { text-align: center; margin: 6px 0 0; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   QUIZ
   ══════════════════════════════════════════════════════════ */

.quiz { background: var(--white); padding-bottom: 120px; }
.progress { height: 6px; background: var(--grey-soft); }
.progress__bar { height: 6px; background: var(--petrolio); width: 100%; transform: scaleX(.14); transform-origin: left; transition: transform .25s ease; }
.quiz h1 { color: var(--terracotta); font-size: clamp(26px, 7.6vw, 40px); text-align: center; margin: 20px 0 16px; }
.quiz__sub { text-align: center; color: var(--grey-text); font-size: clamp(15px, 4.2vw, 18px); margin: 0 auto 16px; max-width: 560px; line-height: 1.35; }
.quiz__badge {
    display: block; width: fit-content; margin: 16px auto 0;
    background: var(--petrolio); color: var(--white); border-radius: 999px;
    padding: 7px 16px; font-weight: 600; font-size: 15px;
}

.field {
    width: 100%; border: 2px solid #C9C9C9; border-radius: 8px;
    padding: 15px 16px; font-family: inherit; font-size: 17px; color: var(--ink);
    background: var(--white);
}
.field::placeholder { color: #A5A5A5; text-transform: uppercase; }
.field:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }

.choice {
    display: flex; align-items: center; gap: 14px; width: 100%;
    border: 2px solid var(--ink); border-radius: var(--radius);
    background: var(--white); color: var(--ink);
    padding: 14px 16px; margin-top: 12px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 17px;
}
.choice img { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%; border: 2px solid var(--terracotta); padding: 6px; }
.choice b { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 19px; display: block; }
.choice small { display: block; color: var(--grey-text); font-size: 14px; }
.choice.is-on { background: var(--terracotta); border-color: var(--terracotta); color: var(--white); }
.choice.is-on img { background: var(--white); border-color: var(--white); }
.choice.is-on small { color: rgba(255,255,255,.9); }

.info { border-top: 1px dashed #C9C9C9; margin-top: 22px; padding-top: 16px; }
.info h2 { font-size: 20px; text-align: center; color: var(--ink); }
.info ul { list-style: none; margin: 12px 0 0; padding: 0; }
.info li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.info li img { width: 40px; height: 40px; flex: 0 0 40px; }
.info li b { display: block; color: var(--terracotta); font-weight: 600; font-size: 17px; }
.info li span { color: var(--grey-text); font-size: 14px; }

.legal { color: var(--grey-text); font-size: 13px; line-height: 1.45; margin: 12px 0 0; }
.legal a { color: var(--terracotta); }
.optin { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 1.35; }
.optin input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--petrolio); }

/* piani */
.plans { margin-top: 8px; }
.plan {
    position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
    border: 2px solid var(--ink); border-radius: var(--radius);
    background: var(--white); color: var(--ink);
    padding: 16px 14px; margin-top: 14px; cursor: pointer; text-align: left;
    font-family: inherit;
}
.plan.is-on { border-color: var(--terracotta); box-shadow: inset 0 0 0 2px var(--terracotta); }
.plan__badge {
    position: absolute; top: -12px; right: 10px;
    background: var(--petrolio); color: var(--white);
    font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 6px;
}
.plan__icon img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--terracotta); }
.plan__body { flex: 1 1 auto; }
.plan__name { display: block; font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 19px; }
.plan__first { display: block; font-size: 17px; margin-top: 2px; }
.plan__first b { font-family: 'Anton', sans-serif; color: var(--terracotta); font-size: 27px; }
.plan__then { display: block; color: var(--grey-text); font-size: 15px; }
.plan__perk { display: block; color: var(--petrolio); font-weight: 600; font-size: 14px; margin-top: 4px; }

/* add-on */
.addons { margin-top: 8px; }
.addon {
    position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
    border: 2px solid var(--ink); border-radius: var(--radius);
    background: var(--white); color: var(--ink);
    padding: 16px 14px; margin-top: 16px; cursor: pointer; text-align: left;
    font-family: inherit;
}
.addon.is-on { background: var(--terracotta); border-color: var(--terracotta); color: var(--white); }
.addon.is-on .addon__price, .addon.is-on .addon__text { color: rgba(255,255,255,.95); }
.addon__badge {
    position: absolute; top: -12px; right: 10px;
    background: var(--petrolio); color: var(--white);
    font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 6px;
}
.addon__icon img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--terracotta); padding: 6px; }
.addon.is-on .addon__icon img { border-color: var(--white); background: var(--white); }
.addon__body { flex: 1 1 auto; }
.addon__name { display: block; font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 18px; }
.addon__text { display: block; font-size: 14px; line-height: 1.35; color: var(--grey-text); margin: 3px 0; }
.addon__price { display: block; font-weight: 600; color: var(--terracotta); font-size: 16px; }
.addon__toggle {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    border: 2px solid currentColor; display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
}

/* riepilogo box */
.summary { list-style: none; margin: 16px 0 0; padding: 0; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.summary li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; border-top: 1px solid #E4E4E4; font-size: 15px; }
.summary li:first-child { border-top: 0; }
.summary li span { color: var(--grey-text); flex: 0 0 auto; }
.summary li b { text-align: right; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 17px; }
.total b { font-family: 'Anton', sans-serif; font-size: 28px; color: var(--terracotta); }

.confirm {
    display: flex; align-items: center; gap: 14px;
    background: var(--terracotta); color: var(--white);
    border-radius: var(--radius); padding: 16px 14px; margin-top: 8px;
}
.confirm img { width: 66px; height: 66px; flex: 0 0 66px; border-radius: 50%; background: var(--white); padding: 6px; object-fit: cover; }
.confirm b { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 20px; display: block; }
.confirm span { font-size: 15px; line-height: 1.35; }

/* barra azioni fissa in fondo, come l'originale su mobile */
.actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--white); border-top: 1px solid #E0E0E0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: flex; gap: 10px; align-items: center;
}
.actions .btn { flex: 1 1 auto; }
.actions__back {
    width: 56px; height: 52px; flex: 0 0 56px;
    border: 2px solid var(--ink); border-radius: 8px; background: var(--white);
    font-size: 22px; cursor: pointer; line-height: 1; color: var(--ink);
}
.actions__note { position: fixed; left: 0; right: 0; bottom: 0; }

/* la barra azioni e' fissa in fondo su mobile: il footer lascia spazio sotto,
   altrimenti le policy finiscono coperte. */
body[data-page="quiz"] .site-footer { padding-bottom: 110px; }

.step__note { text-align: center; color: var(--grey-text); font-size: 13px; line-height: 1.4; margin: 12px 0 0; }
.step__proof { text-align: center; margin-top: 22px; }
.step__proof img { max-width: 230px; margin: 0 auto 10px; }
.step__proof b { display: block; font-family: 'Anton', sans-serif; text-transform: uppercase; color: var(--terracotta); font-size: 20px; }
.step__proof span { display: block; color: var(--grey-text); font-size: 15px; margin-top: 4px; line-height: 1.35; }

/* ══════════════════════════════════════════════════════════
   DESKTOP
   ══════════════════════════════════════════════════════════ */

@media (min-width: 760px) {
    .site-header { padding: 10px 26px; }
    .site-header img { width: 190px; }
    .hero { padding-bottom: 34px; }
    /* su desktop l'originale ha un hero a fascia larga: la foto verticale della box
       va ritagliata, altrimenti da sola riempie tutto lo schermo. */
    .hero__media img { max-height: 520px; object-fit: cover; object-position: 50% 45%; }
    .bubble { max-width: 260px; font-size: 15px; }
    .sec { padding: 56px 0; }
    .carousel__track > * { flex: 0 0 32%; }
    .gallery__track > * { flex: 0 0 24%; }
    .box-card__inner { padding: 10px 40px 26px; }
    .box-row { padding: 16px 0; }
    .toys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .steps { max-width: 640px; margin-inline: auto; }
    .compare thead th { font-size: 18px; }
    .compare tbody td { font-size: 16px; }
    .quiz { padding-bottom: 40px; max-width: 620px; margin: 0 auto; }
    .actions { position: static; border-top: 0; padding: 18px 0 0; background: transparent; }
    body[data-page="quiz"] .site-footer { padding-bottom: 34px; }
}


/* ══════════════════════════════════════════════════════════
   Passata CRO/UX del 12/09/2026 (richiesta del titolare).
   Cambia solo leggibilita', affordance e stati: sezioni, ordine e
   leve restano quelle dell'originale. Deviazioni in FUNNEL-MAP.md.
   ══════════════════════════════════════════════════════════ */

:root { --grey-text: #595959; }   /* 7,0:1 su bianco, 4,6:1 sul grigio delle sezioni */

/* terracotta scura dove c'e' testo bianco sopra o testo terracotta su bianco: 5,3:1 (AA) */
.bubble, .sec--orange, .box-card__inner, .confirm, .eyebrow mark,
.steps li::before, .compare thead th, .btn--orange { background: var(--terracotta-dark); }
.btn--orange:hover { background: #9E3A26; }
.choice.is-on, .addon.is-on { background: var(--terracotta-dark); border-color: var(--terracotta-dark); }
.sec__lead, .slide figcaption b, .toy__sub, .box-row__note, .addon__price, .plan__first b,
.total b, .info li b, .step__proof b, .guarantee h3, .legal a, .box-card h2, .quiz h1 { color: var(--terracotta-dark); }
.field::placeholder { color: #6E6E6E; }

/* prima schermata: un bottone vero in alto e foto piu' bassa, cosi' titolo e CTA entrano nel primo viewport */
.site-header__cta {
    background: var(--petrolio); padding: 0 16px; border-radius: 8px;
    min-height: 44px; display: inline-flex; align-items: center;
    font-size: clamp(14px, 3.8vw, 17px);
}
.site-header__cta:hover { background: var(--petrolio-dark); }
.hero__media img { max-height: 52vh; object-fit: cover; object-position: 50% 62%; }
.hero .btn { margin-top: 4px; }

/* tap target: puntini, link del footer, toggle degli extra */
.carousel__dots { gap: 0; margin-top: 8px; }
.carousel__dots button { width: 44px; height: 44px; background: transparent; position: relative; border-radius: 0; }
.carousel__dots button::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 12px; height: 12px; border-radius: 50%; background: #8C8C8C;
}
.carousel__dots button[aria-current="true"] { background: transparent; }
.carousel__dots button[aria-current="true"]::after { background: var(--terracotta-dark); }
.site-footer a { display: inline-block; padding: 10px 4px; }
.addon__toggle { width: 44px; height: 44px; flex: 0 0 44px; }
.addon__icon { flex: 0 0 56px; }
.scale span { border: 0; padding: 4px 0; }

/* quiz: passo N di M, errori che parlano, piano scelto inequivocabile */
.progress__label { text-align: center; font-size: 14px; color: var(--grey-text); margin: 10px 0 -6px; }
.field.is-error { border-color: #B3261E; }
.field.is-error:focus { outline-color: #B3261E; }
.field__error { color: #B3261E; font-size: 15px; line-height: 1.35; margin: 8px 0 0; }
.btn[aria-disabled="true"] { opacity: 1; cursor: pointer; }
.plan__check {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: transparent;
}
.plan.is-on { background: var(--crema); border-color: var(--terracotta-dark); box-shadow: inset 0 0 0 3px var(--terracotta-dark); }
.plan.is-on .plan__check { background: var(--terracotta-dark); border-color: var(--terracotta-dark); color: var(--white); }
.plan__then s { color: var(--grey-text); margin-left: 6px; }
.plan-guarantee {
    margin: 16px 0 0; padding: 12px 14px; text-align: center;
    border: 2px solid var(--petrolio); border-radius: var(--radius);
    color: var(--ink); font-size: 15px; line-height: 1.4;
}
.plan-guarantee b { color: var(--petrolio-dark); }
.legal { font-size: 14px; }
.running {
    margin: 16px 0 0; padding: 12px 14px; background: var(--crema);
    border-radius: var(--radius); font-size: 15px; line-height: 1.45;
}
.running b { font-family: 'Anton', sans-serif; font-size: 20px; color: var(--terracotta-dark); }
.running[hidden] { display: none; }

/* prima schermata su telefono: i tre fumetti su una riga sola, foto un po' piu' bassa,
   cosi' titolo e bottone entrano interi nel primo viewport (misurato a 375x812) */
.bubbles { flex-wrap: nowrap; gap: 6px; padding: 12px 10px 4px; }
.bubble { flex: 1 1 0; max-width: none; padding: 8px 6px; font-size: 12px; }
.bubble b { font-size: 15px; }
.hero__media img { max-height: 46vh; }
@media (min-width: 760px) {
    .bubbles { gap: 12px; justify-content: center; }
    .bubble { flex: 0 1 260px; font-size: 15px; padding: 9px 16px; }
    .bubble b { font-size: 17px; }
    .hero__media img { max-height: 520px; }
}