/* ===================================================================
   REMEA - CSS compatibilita pagine vetrina (6.2)
   Riveste il contenuto delle pagine esistenti col nuovo look premium,
   ridefinendo le classi e le variabili vecchie.
   Va caricato DOPO remea.css.
   =================================================================== */

/* -- Rimappa le variabili vecchie ai nuovi valori intensificati -- */
:root {
  --deep-olive: #4F5F50;       /* era #2B2E27 -> ora sage-deep */
  --pale-stone: #E7DDD0;       /* warm beige */
  --soft-sage: #A8B5A3;
  --warm-beige: #E7DDD0;
  --warm-grey: #6B7468;        /* piu scuro = piu leggibile */
  --section-pad: clamp(3.5rem, 8vw, 7rem);
  --max-width: 1200px;
  /* --charcoal, --ivory, --sage, --font-* ereditati da remea.css (gia coerenti) */
}

/* -- Hero di pagina -- */
.page-hero {
  background: linear-gradient(160deg, var(--ivory) 0%, var(--ivory-warm) 50%, var(--sage-mist) 100%) !important;
  padding-top: clamp(3.5rem, 7vw, 6rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}
.page-hero-desc { color: var(--charcoal-soft) !important; font-size: 1.05rem !important; line-height: 1.75 !important; }
.page-hero-image img, .page-hero img { border-radius: var(--r-xl) !important; box-shadow: var(--shadow-lg) !important; }

/* -- Label e titoli di sezione -- */
.section-label {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important; font-weight: 500 !important;
  letter-spacing: 0.22em !important; text-transform: uppercase !important;
  color: var(--sage-deep) !important;
}
.section-title { font-family: var(--font-title) !important; font-weight: 400 !important; color: var(--charcoal) !important; }

/* -- Card generiche (ambiti, indicazioni, blocchi) -- */
.ambito-item, .ambito-pp-card, .indicazione-card, .block, .card-box, .info-card {
  background: var(--white) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease) !important;
  border: none !important;
}
.ambito-item:hover, .ambito-pp-card:hover, .indicazione-card:hover, .block:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* numeri step */
.num, .block .num, .step-num {
  color: var(--sage-deep) !important;
  font-family: var(--font-title) !important;
}

/* -- Bottoni -- */
.btn-primary, .btn-primary-light {
  border-radius: var(--r-pill) !important;
  background: var(--sage-deep) !important;
  color: var(--ivory) !important;
  letter-spacing: 0.08em !important;
  transition: all 0.25s var(--ease) !important;
}
.btn-primary:hover, .btn-primary-light:hover {
  background: var(--charcoal) !important;
  transform: translateY(-2px) !important;
}
.btn-outline {
  border-radius: var(--r-pill) !important;
  box-shadow: inset 0 0 0 1.5px var(--taupe) !important;
  border: none !important;
  color: var(--charcoal) !important;
  transition: all 0.25s var(--ease) !important;
}
.btn-outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--sage-deep) !important;
  color: var(--sage-deep) !important;
  transform: translateY(-2px) !important;
}
/* bottone chiaro su fondo scuro (cta-final) */
.cta-final .btn-primary-light, .cta-final .btn-light {
  background: var(--ivory) !important; color: var(--charcoal) !important;
}
.cta-final .btn-primary-light:hover { background: var(--white) !important; }

/* -- CTA final scura -- */
.cta-final { background: var(--charcoal) !important; }
.cta-final-desc { color: rgba(247,243,236,0.75) !important; }

/* -- FAQ -- */
.faq-item { border-radius: var(--r-md) !important; background: var(--white) !important; box-shadow: var(--shadow-sm) !important; margin-bottom: 0.8rem !important; border-bottom: none !important; overflow: hidden !important; }
.faq-question { padding: 1.3rem 1.5rem !important; font-weight: 500 !important; color: var(--charcoal) !important; }
.faq-answer-inner { padding: 0 1.5rem 1.4rem !important; color: var(--ink-muted) !important; line-height: 1.7 !important; }
.faq-question .icon { color: var(--sage-deep) !important; }

/* -- Immagini arrotondate ovunque nel contenuto -- */
.page-hero-image, .content-image, .founder-image, .studio-image { border-radius: var(--r-xl) !important; overflow: hidden !important; }

/* -- Sezioni: ritmo con sfondi alternati (se usano classi note) -- */
.bg-stone, .section-stone { background: var(--ivory-warm) !important; }
.bg-sage, .section-sage { background: var(--sage-mist) !important; }

/* -- Launch banner / sticky / cookie: arrotondo e intono -- */
.launch-banner { background: var(--sage-deep) !important; }
.sticky-bottom .sb-book, .sb-book { border-radius: var(--r-pill) !important; background: var(--sage-deep) !important; }
.cookie-banner { border-radius: var(--r-lg) !important; }
.cookie-btn-accept { border-radius: var(--r-pill) !important; background: var(--sage-deep) !important; color: var(--ivory) !important; }
.cookie-btn-settings { border-radius: var(--r-pill) !important; }
.exit-box { border-radius: var(--r-xl) !important; }

/* -- Form (contatti, lavora-con-noi) -- */
input, textarea, select {
  border-radius: var(--r-sm) !important;
}
button[type="submit"], .form-submit { border-radius: var(--r-pill) !important; }

/* ===================================================================
   COMPONENTI FUNZIONALI - layout completo
   (il CSS inline che li conteneva e stato rimosso, qui li ricreo)
   =================================================================== */

/* Launch banner (barra promo in cima, sopra l'header) */
.launch-banner {
  background: var(--sage-deep) !important;
  color: var(--ivory);
  text-align: center;
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  font-size: 0.78rem;
  position: relative;
  z-index: 101;
}
.launch-banner a { color: #fff; font-weight: 600; text-decoration: underline; }
.launch-banner .lb-countdown { font-family: var(--font-title); font-size: 1rem; color: #fff; margin-left: 0.5rem; font-weight: 500; }
.launch-banner .lb-close {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(247,243,236,0.7); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0.2rem;
}
.launch-banner .lb-close:hover { color: #fff; }
@media (max-width: 600px) {
  .launch-banner { font-size: 0.7rem; padding: 0.5rem 2rem 0.5rem 0.6rem; }
  .launch-banner .lb-countdown { display: block; margin: 0.2rem 0 0; }
}

/* Sticky bottom bar (mobile: prenota + whatsapp) */
.sticky-bottom {
  display: none;
  position: fixed; bottom: 0; left: 0; width: 100%;
  z-index: 900;
  background: var(--charcoal);
  padding: 0.6rem 1rem;
  gap: 0.6rem;
}
.sticky-bottom a {
  flex: 1; text-align: center; padding: 0.8rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--r-pill);
}
.sticky-bottom .sb-book { background: var(--ivory) !important; color: var(--charcoal) !important; }
.sticky-bottom .sb-wa { background: #25D366 !important; color: #fff !important; }
@media (max-width: 768px) { .sticky-bottom { display: flex; } }

/* Cookie banner */
.cookie-banner {
  position: fixed; bottom: 1.2rem; left: 1.2rem; right: 1.2rem;
  max-width: 460px; z-index: 950;
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1.4rem 1.6rem;
}
.cookie-inner { display: flex; flex-direction: column; gap: 1rem; }
.cookie-text { font-size: 0.85rem; line-height: 1.6; color: var(--charcoal-soft); }
.cookie-text a { color: var(--sage-deep); text-decoration: underline; }
.cookie-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-btn {
  padding: 0.6rem 1.3rem; font-size: 0.78rem; font-weight: 500;
  cursor: pointer; border-radius: var(--r-pill); border: none;
  letter-spacing: 0.04em; transition: all 0.2s var(--ease);
}
.cookie-btn-accept { background: var(--sage-deep) !important; color: var(--ivory) !important; }
.cookie-btn-accept:hover { background: var(--charcoal) !important; }
.cookie-btn-settings { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--taupe-soft); color: var(--charcoal-soft) !important; }

/* Exit-intent overlay */
.exit-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(38,53,45,0.55);
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.exit-overlay.is-open { display: flex; }
.exit-box {
  background: var(--ivory); border-radius: var(--r-xl);
  padding: clamp(2rem,5vw,3rem); max-width: 460px; width: 100%;
  position: relative; box-shadow: var(--shadow-lg); text-align: center;
}
.exit-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.6rem; line-height: 1;
  color: var(--ink-muted); cursor: pointer;
}
.exit-close:hover { color: var(--charcoal); }
.exit-form input {
  width: 100%; padding: 0.85rem 1rem; margin: 0.5rem 0;
  border: 1px solid var(--taupe-soft); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 0.95rem;
}
.exit-form button {
  width: 100%; margin-top: 0.5rem; border-radius: var(--r-pill) !important;
  background: var(--sage-deep); color: var(--ivory);
  padding: 0.9rem; border: none; cursor: pointer; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem;
}

/* ===================================================================
   FIX reveal - garantisce che il testo sia SEMPRE visibile.
   L'animazione d'ingresso e un extra gestito via JS dove presente;
   senza JS il contenuto resta comunque pienamente visibile.
   =================================================================== */
.reveal { opacity: 1 !important; transform: none !important; }
.reveal.in { opacity: 1 !important; transform: none !important; }

/* Hero content sempre visibile (l'animazione fadeUp del vecchio CSS e stata rimossa) */
.page-hero-content, .page-hero-inner { opacity: 1 !important; animation: none !important; }


/* ===================================================================
   LAYOUT pagine vetrina - griglie e contenitori
   (recuperati dal CSS originale, con variabili rimappate)
   =================================================================== */

/* Regola generica: qualsiasi *-grid ha un layout a griglia sensato */
[class$="-grid"] { display: grid; gap: 2rem; }

/* Sezioni contenitore */
.ambiti, .metodo, .faq, .ambiti-pp, .indicazioni, .intro, .valori, .definizione, .pilastri, .meccanismo, .cose, .come-funziona { padding: clamp(3.5rem, 8vw, 7rem) 0; }

.faq { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--ivory-warm); }
.faq-header { text-align: center; margin-bottom: 3rem; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.percorso-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.percorso-step { padding: 2.5rem 2rem; border-left: 1px solid var(--ivory-warm); }
.percorso-step:first-child { border-left: none; }
.step-number { font-family: var(--font-title); font-size: 3.5rem; font-weight: 300; color: var(--sage-soft); line-height: 1; margin-bottom: 1.2rem; opacity: 0.7; }
.percorso-step h3 { font-family: var(--font-title); font-size: 1.35rem; font-weight: 400; color: var(--charcoal); margin-bottom: 0.8rem; }
.percorso-step p { font-size: 0.88rem; line-height: 1.8; color: var(--charcoal-soft); }
.ambiti { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--ivory-warm); }
.ambiti-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
.ambiti-text { font-size: 0.95rem; line-height: 1.85; color: var(--charcoal-soft); max-width: 440px; margin-bottom: 2rem; }
.ambiti-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.metodo { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--ivory); }
.metodo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.metodo-image img { width: 100%; height: 480px; object-fit: cover; }
.metodo-text { font-size: 0.95rem; line-height: 1.85; color: var(--charcoal-soft); max-width: 500px; margin-bottom: 1rem; }
.metodo-cta { margin-top: 2rem; display: flex; align-items: center; gap: 2rem; }
.definizione-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.pilastri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.come-funziona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.cose-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 4rem; align-items: start; }
.meccanismo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.indicazioni { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--ivory); }
.indicazioni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.indicazione-card { padding: 2rem 1.8rem; background: var(--ivory-warm); position: relative; overflow: hidden; transition: transform .3s; }
.indicazione-card:hover { transform: translateY(-3px); }
.indicazione-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--sage-deep); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.indicazione-card:hover .indicazione-line { transform: scaleX(1); }
.indicazione-card h4 { font-family: var(--font-title); font-size: 1.15rem; font-weight: 400; color: var(--charcoal); margin-bottom: .6rem; }
.indicazione-card p { font-size: .85rem; line-height: 1.75; color: var(--charcoal-soft); }
.pressioni-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.quando-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contesto-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 4rem; align-items: start; }
.fasi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ambiti-pp { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--ivory); }
.ambiti-pp-header { max-width: 640px; margin-bottom: 3rem; }
.ambiti-pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.spiegazione-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 4rem; align-items: start; }
.sintomi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.spazio-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 4rem; align-items: start; }
.valori-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.founder-full-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
.visione-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 4rem; align-items: start; }
.integ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.contatti-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.lavora-content { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--ivory-warm); }
.lavora-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 860px; margin: 0 auto; }
.block { margin-bottom:2.5rem; }
.num { color:var(--sage-deep);font-size:1.1rem;margin-right:0.5rem; }


/* Responsive: griglie multi-colonna diventano singola su mobile */
@media (max-width: 860px) {
  .ambiti-grid, .metodo-grid, .split-grid, .studio-grid, .approccio-grid,
  .contatti-grid, .hero-grid, .definizione-grid, .meccanismo-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}
@media (max-width: 700px) {
  .ambiti-list, .ambiti-pp-grid, .percorso-steps, .indicazioni-grid,
  .pilastri-grid, .come-funziona-grid, .cose-grid, .valori-grid, .blocks-grid { grid-template-columns: 1fr !important; }
  .percorso-step { border-left: none !important; padding: 1.5rem 0 !important; }
}

/* ===================================================================
   RITOCCHI 6.2.1 - footer, bottoni, foto, card mobile scrollabili
   =================================================================== */

/* --- 1. FOOTER: colori perfezionati (testo piu' leggibile, link piu' vivi) --- */
.site-footer { background: #1F2B24 !important; color: rgba(247,243,236,0.78) !important; }
.site-footer p, .footer-brand p { color: rgba(247,243,236,0.62) !important; }
.footer-col h4 { color: #fff !important; }
.footer-col a, .footer-bottom a { color: rgba(247,243,236,0.72) !important; }
.footer-col a:hover, .footer-bottom a:hover { color: var(--sage-soft) !important; }
.footer-payoff { color: var(--sage-soft) !important; }
.footer-disclaimer { color: rgba(247,243,236,0.45) !important; border-top: 1px solid rgba(247,243,236,0.1); padding-top:1.5rem; margin-top:1rem; }
.footer-founder { color: rgba(247,243,236,0.5) !important; }

/* --- 2. BOTTONI: fix layout --- */
/* btn-primary-light = bottone CHIARO (su fondo scuro), NON verde scuro */
.btn-primary-light {
  background: var(--ivory) !important;
  color: var(--charcoal) !important;
  border-radius: var(--r-pill) !important;
  border: none !important;
  padding: 0.95rem 2rem !important;
  font-weight: 500 !important; letter-spacing: 0.08em !important;
  display: inline-flex !important; align-items: center !important; gap: 0.5rem !important;
  transition: all 0.25s var(--ease) !important;
}
.btn-primary-light:hover { background: #fff !important; color: var(--charcoal) !important; transform: translateY(-2px) !important; }

/* Bottone WhatsApp (verde brand WhatsApp) - era senza stile */
.btn-whatsapp, .gz-btn-wa {
  display: inline-flex !important; align-items: center !important; justify-content:center !important; gap: 0.5rem !important;
  background: #25D366 !important; color: #fff !important;
  border-radius: var(--r-pill) !important; border: none !important;
  padding: 0.95rem 2rem !important; font-weight: 600 !important;
  letter-spacing: 0.04em !important; font-size: 0.85rem !important;
  transition: all 0.25s var(--ease) !important; text-decoration: none !important;
}
.btn-whatsapp:hover, .gz-btn-wa:hover { background: #1ebe57 !important; transform: translateY(-2px) !important; color:#fff !important; }

/* Allineo TUTTI i bottoni: stessa altezza, niente overflow */
.btn-primary, .btn-outline, .btn-primary-light, .btn-whatsapp, .btn-light {
  line-height: 1.2 !important; text-align: center !important; cursor: pointer !important;
  white-space: nowrap !important; vertical-align: middle !important;
}

/* --- 3. FOTO: angoli arrotondati su TUTTE le immagini di contenuto --- */
/* Tutte le img dentro il main/sezioni, esclusi logo e pixel tracking */
section img:not(.logo-icon), main img:not(.logo-icon),
.page-hero-image img, .metodo-image img, .ambiti-image img,
.definizione-image img, .spazio-image img, .studio-image img,
.contesto-image img, .spiegazione-image img, .cose-image img,
.pressioni-image img, .founder-full img, .founder-image img {
  border-radius: var(--r-lg) !important;
}
/* I contenitori immagine: clip agli angoli */
.page-hero-image, .metodo-image, .ambiti-image, .definizione-image,
.spazio-image, .studio-image, .contesto-image, .spiegazione-image,
.cose-image, .pressioni-image, .founder-full, .founder-image {
  border-radius: var(--r-lg) !important; overflow: hidden !important;
}

/* --- 4. CARD MOBILE: griglie scrollabili orizzontalmente (no elenco) --- */
@media (max-width: 768px) {
  .ambiti-list, .ambiti-pp-grid, .pilastri-grid, .sintomi-grid, .fasi-grid,
  .indicazioni-grid, .cose-grid, .valori-grid, .come-funziona-grid,
  .meccanismo-grid, .definizione-grid, .blocks-grid, .benefits, .info-cards,
  .pressioni-grid, .quando-grid, .percorso-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important;
    padding: 0.5rem 1.2rem 1.2rem !important;
    margin: 0 -1.2rem !important;
    scrollbar-width: none !important;
  }
  /* nasconde la scrollbar su webkit */
  .ambiti-list::-webkit-scrollbar, .pilastri-grid::-webkit-scrollbar,
  .sintomi-grid::-webkit-scrollbar, .fasi-grid::-webkit-scrollbar,
  .indicazioni-grid::-webkit-scrollbar, .cose-grid::-webkit-scrollbar,
  .ambiti-pp-grid::-webkit-scrollbar, .percorso-steps::-webkit-scrollbar,
  .meccanismo-grid::-webkit-scrollbar, .definizione-grid::-webkit-scrollbar { display: none !important; }

  /* Ogni card: larghezza fissa, snap */
  .ambito-item, .ambiti-pp-card, .pilastro, .sintomo-card, .fase-card,
  .indicazione-card, .cosa-card, .valore, .block, .benefit, .info-card,
  .percorso-step {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    scroll-snap-align: start !important;
    border-left: none !important;
  }
}