/* CerboSolutions sopra il CSS di Webflow (caricato dopo, vince a parità di specificità).
   Copiato da rebrand.py in cerbo/cerbo.css. I percorsi url() sono relativi a questo file. */

@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap;
  src: url('./space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap;
  src: url('./space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap;
  src: url('./space-grotesk-latin-700-normal.woff2') format('woff2'); }

/* ------------------------------------------------------------ colori del marchio */
:root {
  --cerbo-ossidiana: #0b0b0c;
  --cerbo-grafite: #111112;
  --cerbo-grafite-2: #181819;
  --cerbo-avorio: #eeede8;
  --cerbo-grigio: #93928e;
  --cerbo-ambra: #fa8b51;
  --cerbo-display: 'Space Grotesk', 'Inter', Arial, sans-serif;
  --cerbo-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --_colors---dark: var(--cerbo-ossidiana);
  --_colors---dark900: var(--cerbo-ossidiana);
  --_colors---light: var(--cerbo-avorio);
  --_colors---nav_color: var(--cerbo-avorio);
  --_colors---grey100: var(--cerbo-avorio);
  --_colors---grey200: #e2e1db;
  --_colors---grey300: #c4c3bd;
  --_colors---grey400: var(--cerbo-grigio);
  --_colors---grey500: #75746f;
  --_colors---grey600: #222224;
  --_colors---grey700: #1d1d1f;
  --_colors---grey800: var(--cerbo-grafite-2);
  --_colors---grey01: var(--cerbo-grafite-2);
}
/* sezioni chiare: avorio caldo invece del bianco/grigio freddo, grigi più scuri per il contrasto (≥ 4,5:1) */
.theme-invert {
  --_themes---background: var(--cerbo-avorio);
  --_themes---text: var(--cerbo-ossidiana);
  --_themes---nav_color: var(--cerbo-ossidiana);
  --_colors---grey400: #5f5e5a;
  --_colors---grey500: #5f5e5a;
}
.numbers.theme-invert { background-color: var(--cerbo-avorio); }
.numbers_gradient { background-image: linear-gradient(180deg, #e6e5df 14%, rgba(238, 237, 232, 0)); }
.numbers_gradient.is-bottom { background-image: linear-gradient(0deg, #e6e5df 14%, rgba(238, 237, 232, 0)); }
.made_point { opacity: .6; }
/* FAQ: domande chiuse a .64 invece di .5 (contrasto 4,9:1 sull'avorio), link delle risposte in ambra al passaggio */
.accordion { opacity: .64; }
.faq [data-accordion='panel'] a:hover { color: #c4581f !important; }
.theme-invert .made_point_number { color: var(--_themes---text); }
.made_point.is-active { opacity: 1; }
.text-tiny.text-cl-grey-custome { color: #5c5b57; }
.earth_point { background-color: rgba(17, 17, 18, .62); }

/* pulsanti: avorio con passaggio in ambra; quello della barra in grafite */
.button:hover { background-color: var(--cerbo-ambra); color: var(--cerbo-ossidiana); }
.button:hover:where(.w-variant-b2a47393-e449-8f34-02c6-286b846f1d34) { background-color: #262628; color: var(--cerbo-avorio); }
.button { transition: background-color .25s ease, color .25s ease; }
:is(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--cerbo-ambra); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--cerbo-ambra); color: var(--cerbo-ossidiana); }

/* ------------------------------------------------------------ caratteri: titoli Space Grotesk, etichette monospace */
:is(h1, h2, .text-style-h1, .text-style-h2, .text-style-h3, .concierge_column_p, .numbers_track_item) {
  font-family: var(--cerbo-display);
  letter-spacing: -0.012em;
}
:is(.faq_h3, .section_header2_count, .made_point_number, .loader3_time, .marquee, .marquee span,
    .footer2_col_name, .eyebrow_change_item, .earth_point .text-small, .popup_list_soon) {
  font-family: var(--cerbo-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.concierge_column_p { line-height: .98; } /* Space Grotesk ha le maiuscole più alte di Inter: righe meno attaccate */
.marquee_item span { font-size: 1.1rem !important; }
.marquee_time span { white-space: nowrap; }
/* nota sotto i contatti del footer: è un testo, non un'etichetta */
.footer2_col > .footer2_col_name ~ .footer2_col_name { font-family: inherit; text-transform: none; letter-spacing: 0; white-space: normal; }

/* ------------------------------------------------------------ hero: carta 3D o immagine ferma */
.hero_video {
  background: radial-gradient(ellipse 38% 34% at 50% var(--cerbo-card-y, 60%), rgba(250, 139, 81, .13), rgba(250, 139, 81, 0) 70%), var(--cerbo-ossidiana);
}
.hero_card_canvas, .hero_card_fallback { opacity: 0; transition: opacity .7s ease; }
.hero_card_canvas.is-in, .hero_card_fallback.is-in { opacity: 1; }
.hero_card_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero_card_fallback { position: absolute; height: auto; transform: translateY(-50%); object-fit: contain; pointer-events: none; }

/* ------------------------------------------------------------ elementi della copia di partenza non usati */
.footer2_bottom_download, .popup_fee_wrap, .popup_member_wrap .sr-only, .popup_list_soon { display: none !important; }
.earth_point svg, .popup_list_item svg { color: var(--cerbo-ambra); }
.popup_list_item svg path { fill: var(--cerbo-ambra); }
/* menu del telefono: WhatsApp come pulsante secondario a filo, distinto da «Parliamone» */
.nav_link_apply_wrap.is-mobile .button[href^="https://wa.me"] { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(238, 237, 232, .3); }

/* ------------------------------------------------------------ popup: campi raccolti, consenso leggibile, conferma come testo */
.popup_bottom_fields { margin-top: 0; padding-top: 2.4rem; }
.popup_checkbox_field .w-form-label { font-size: 1.3rem; line-height: 1.45; color: var(--cerbo-grigio); }
.popup_checkbox_field { padding-left: 0 !important; gap: 1.2rem; cursor: pointer; }
.popup_checkbox { flex: none; width: 1.8rem; height: 1.8rem; margin: .1rem 0 0; border-radius: .4rem; border-color: #4a4a4c; }
.popup_checkbox.w--redirected-checked { background-color: var(--cerbo-ambra); border-color: var(--cerbo-ambra); }
.popup_field_form:focus { border-bottom-color: var(--cerbo-ambra); }
.success-message .form_message { justify-content: flex-start; align-items: flex-start; }
.success-message .succes_status.button {
  background: none; padding: 2.4rem 0 0; max-width: none; text-align: left; border-radius: 0;
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.success-message .succes_status.button::before {
  content: ''; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--cerbo-ambra)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5' fill='none' stroke='%230b0b0c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.success-message .succes_status p { color: var(--cerbo-avorio) !important; font-size: 1.6rem; line-height: 1.45; }
.success-message .succes_status a { color: var(--cerbo-ambra); text-decoration: underline; }

/* ------------------------------------------------------------ telefono e tablet */
@media screen and (max-width: 991px) {
  /* la barra in alto non finisce più sopra i testi: sfumatura del colore della sezione sotto */
  .nav_content::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 2.8rem);
    background: linear-gradient(180deg, var(--cerbo-nav-bg, rgba(11, 11, 12, .9)) 0%, var(--cerbo-nav-bg, rgba(11, 11, 12, .9)) 45%, rgba(0, 0, 0, 0) 100%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
    pointer-events: none; z-index: -1;
  }
  .nav_menu.active ~ .nav_menu_btn { opacity: 1; }
  .footer2_top { flex-flow: column; gap: 6.4rem; }
  .footer2_top_left { max-width: 100%; }
  .footer2_links_wrap { max-width: 100%; }
  .accordion_wrap { max-width: 64%; }
}
@media screen and (max-width: 767px) {
  .faq_accordion { flex-flow: column; gap: .8rem; padding-top: 4.8rem; }
  .faq_h3 { padding-top: 0; }
  .accordion_wrap { max-width: 100%; width: 100%; }
}

/* ------------------------------------------------------------ movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .hero_card_canvas, .hero_card_fallback, .button { transition: none; }
}