/* tf-marketing.css — componenti conversione condivisi (path comune)
   v1 · 2026-06-23 · sticky mobile CTA + trust bar inline (Variante A)
   Brand arancione: #f3850e (primary-500). Usato dalle pagine marketing core. */

/* ===== Trustpilot primitives (condivise) ===== */
.tfm-stars{display:inline-flex;gap:3px;flex:none}
.tfm-star{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;background:#00b67a;border-radius:4px}
.tfm-star svg{width:11.5px;height:11.5px;color:#fff}
.tfm-tp{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:#191919;letter-spacing:-.02em;font-size:13.5px;white-space:nowrap}
.tfm-tp svg{color:#00b67a}

/* ===== Trust bar inline (Variante A) ===== */
.tfm-trust{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;
  padding:13px 20px;margin:22px 0 0;
  border:1px solid #f1e4d3;border-radius:14px;
  background:linear-gradient(180deg,#fffdf9,#fff8ef);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  font-size:14px;color:#334155;line-height:1.3}
.tfm-trust .tfm-grp{display:inline-flex;align-items:center;gap:9px}
.tfm-trust strong{color:#0f172a;font-weight:700}
.tfm-trust .tfm-sep{width:1px;height:22px;background:#ecdcc6;flex:none}
.tfm-trust .tfm-ico{width:17px;height:17px;color:#f3850e;flex:none}
.tfm-trust--center{justify-content:center;text-align:left;margin-left:auto;margin-right:auto}
@media (max-width:719px){
  .tfm-trust{gap:10px 18px;padding:14px 16px}
  .tfm-trust .tfm-sep{display:none}
}

/* ===== Social proof slim per hero scuri (testo chiaro, niente box) ===== */
.tfm-proof-dark{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 11px;margin:22px 0 0;font-size:14px;line-height:1.3;color:rgba(255,255,255,.9)}
.tfm-proof-dark strong{color:#fff;font-weight:700}
.tfm-proof-dark .tfm-tp{color:#fff}
.tfm-proof-dark .tfm-tp svg{color:#00b67a}

/* ===== Hero product shot (immagine prodotto sotto l'hero) ===== */
.tfm-hero-shot{margin:52px auto 0;max-width:880px;padding:0 16px;width:100%}
.tfm-hero-shot img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 28px 55px rgba(0,0,0,.30))}
@media (max-width:639px){.tfm-hero-shot{margin-top:36px;max-width:520px}}

/* ===== Sticky mobile CTA (condivisa, arancione brand) ===== */

/* ===== Sub-hero condiviso (pagine marketing non-home) — TF-SUBHERO-2026-06-28 · v4 =====
   Card brand arancione (gradiente come index hero), "editoriale a SX + ritratto a DX".
   Il ritratto è rifilato (busto a filo immagine) e ancorato in basso: tocca il bordo inferiore
   a ogni misura. Card FULL-BLEED come l'hero index (margin 8px); il CONTENUTO è cappato a 1290
   e centrato → il ritratto resta agganciato al bordo destro del contenuto (gutter simmetrici).
   min-height alta: testa modella + titolo restano SOTTO l'header glass fisso (top-14, ~116px).
   Path comune per uniformare gli hero delle sotto-pagine (contatti 1° adopter). */
.tfm-subhero{position:relative;overflow:hidden;border-radius:34px;margin:8px 8px 0;
  background:linear-gradient(-45deg,#9a3a0a,#c2570a,#e8710a,#f3850e,#e8710a,#c2570a);
  background-size:400% 400%;animation:tfmSubheroShift 16s ease infinite;
  box-shadow:0 34px 84px -34px rgba(154,58,10,.58)}
@keyframes tfmSubheroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.tfm-subhero{animation:none}}
.tfm-subhero::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);opacity:.5;pointer-events:none}
.tfm-subhero__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:16px;
  align-items:stretch;max-width:1290px;margin:0 auto;padding:46px 52px 0;min-height:600px}
.tfm-subhero__body{min-width:0;display:flex;flex-direction:column;justify-content:center;padding-bottom:46px}
.tfm-subhero__title{font-size:clamp(34px,4.6vw,55px);line-height:1.03;font-weight:800;letter-spacing:-.032em;color:#fff;margin:0 0 20px}
/* TF-SUBHERO-FILL-2026-06-28 — parola evidenziata con riempimento gradiente (stesso effetto di "Semplice" in index hero), sostituisce il vecchio underline SVG */
.tfm-subhero__fill{white-space:nowrap;background:linear-gradient(135deg,#fcb24a 0%,#f3850e 45%,#fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tfm-subhero__sub{font-size:18px;line-height:1.55;color:rgba(255,255,255,.92);max-width:430px;margin:0 0 30px}
.tfm-subhero__cta{display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:14px;
  background:#fff;color:#b45309;font-size:15px;font-weight:700;text-decoration:none;align-self:flex-start;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.3);transition:transform .2s}
.tfm-subhero__cta:hover{transform:translateY(-2px)}
.tfm-subhero__cta svg{width:18px;height:18px;flex:none}
.tfm-subhero__media{position:relative;min-width:0}
.tfm-subhero__media img{position:absolute;bottom:0;right:40px;height:430px;width:auto;display:block;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.32))}
.tfm-subhero__halo{position:absolute;bottom:0;right:30px;width:330px;height:74%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.20),transparent 70%);filter:blur(34px);z-index:0;pointer-events:none}
/* variante text-only (pagine senza media) */
.tfm-subhero--text .tfm-subhero__grid{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;padding-bottom:48px;min-height:0}
.tfm-subhero--text .tfm-subhero__body{padding-bottom:0}
.tfm-subhero--text .tfm-subhero__sub{margin-left:auto;margin-right:auto}
@media(max-width:860px){
  .tfm-subhero{border-radius:26px}
  /* padding-top alto: libera il titolo dall'header glass fisso (top-14 + pill ~ 112px) */
  .tfm-subhero__grid{grid-template-columns:minmax(0,1fr);padding:122px 22px 0;gap:6px;min-height:0}
  .tfm-subhero__body{padding-bottom:4px}
  .tfm-subhero__title{font-size:33px;letter-spacing:-.02em}
  .tfm-subhero__sub{max-width:none;font-size:15px}
  .tfm-subhero__media{display:flex;justify-content:center;align-items:flex-end;margin-top:10px}
  .tfm-subhero__media img{position:static;right:auto;height:auto;max-height:340px}
  .tfm-subhero__halo{display:none}
}

/* ===== Striscia "altri modi per contattarci" (sotto il sub-hero) — TF-CMETH-2026-06-28 ===== */
.tfm-cmeth{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:18px auto 0;padding:0 16px}
.tfm-cmeth a,.tfm-cmeth div{display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:16px;
  border:1px solid #ecdcc6;background:#fff;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.tfm-cmeth a:hover{border-color:#f3850e;box-shadow:0 12px 28px -14px rgba(243,133,14,.4);transform:translateY(-2px)}
.tfm-cmeth__ico{flex:none;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#fff7ed;color:#d2640a}
.tfm-cmeth__ico svg{width:20px;height:20px}
.tfm-cmeth__t{display:block;font-size:14px;font-weight:700;color:#0f172a;line-height:1.25}
.tfm-cmeth__s{display:block;font-size:12.5px;color:#64748b;margin-top:2px}
@media(max-width:760px){.tfm-cmeth{grid-template-columns:1fr;gap:10px;margin-top:14px}}

/* ===== Hero card condivisa — forma "rounded inset" (path comune index/contatti/funzionalita) — TF-HERO-CARD-2026-06-28 =====
   Shell della hero: card arancione full-bleed con angoli arrotondati + gradiente animato (stesso shift di .tfm-subhero)
   + texture a pois. Va su un <section> con `overflow-hidden mx-[8px] mt-[8px] rounded-2xl ... xl:rounded-[56px]`.
   Il contenuto (centrato o 2-col) resta nel markup di pagina. */
.tfm-hero-card{background:linear-gradient(-45deg,#9a3a0a,#c2570a,#e8710a,#f3850e,#e8710a,#c2570a);
  background-size:400% 400%;animation:tfmSubheroShift 16s ease infinite}
.tfm-hero-card::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);opacity:.5;pointer-events:none}
@media(prefers-reduced-motion:reduce){.tfm-hero-card{animation:none}}
/* pill feature hero — cascade in (path comune) */
@keyframes tfmHeroPillIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.tfm-hero-pill{animation:tfmHeroPillIn .6s cubic-bezier(.16,1,.3,1) both}
.tfm-hero-pill:nth-child(1){animation-delay:.15s}.tfm-hero-pill:nth-child(2){animation-delay:.3s}
.tfm-hero-pill:nth-child(3){animation-delay:.45s}.tfm-hero-pill:nth-child(4){animation-delay:.6s}
@media(prefers-reduced-motion:reduce){.tfm-hero-pill{animation:none}}
/* shimmer sweep per la CTA bianca della hero (path comune) — usa uno <span class="tfm-hero-shine"> dentro un bottone position:relative;overflow:hidden */
@keyframes tfmHeroShine{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.tfm-hero-shine{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);animation:tfmHeroShine 3s ease-in-out infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.tfm-hero-shine{animation:none}}

/* TF-CTA-MODEL-2026-06-28 — modello cutout sul CTA finale (band arancione "Inizia a fatturare").
   Path comune: la band prende .tfm-cta-band, il modello .tfm-cta-model + lato (--left/--right).
   Testo/CTA sempre sopra il modello (z-3); modello nascosto < 860px (no overlap su mobile). */
.tfm-cta-band{min-height:430px}
.tfm-cta-band h2,.tfm-cta-band p,.tfm-cta-band a{position:relative;z-index:3}
.tfm-cta-model{position:absolute;bottom:0;height:430px;width:auto;display:block;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.28));z-index:2;pointer-events:none}
.tfm-cta-model--left{left:18px}
.tfm-cta-model--right{right:18px}
@media(max-width:860px){.tfm-cta-band{min-height:0}.tfm-cta-model{display:none}}

/* TF-ICON-FLEX-GUARD-2026-07-09 (#svg-flat-android): co-locato — le pagine
   marketing non caricano tf-shared.css. Icona della striscia "altri modi di
   contatto" (svg figlio di un box flex 42x42) → flex:none anti-schiacciamento. */
.tfm-cmeth__ico > svg { flex: none; }

/* TF-CTAF-KC-2026-07-16 — CTA finale "K-C": pannello pastello con ritratto
   (path comune marketing: index, funzionalita, faq, come-funziona, tutorial,
   chi-siamo, guide, sicurezza, prezzi, blog). Variante --flip = foto a sinistra.
   Le landing/ restano sulla band TF-CTA-MODEL sopra (stile ads con animazione). */
.tfm-ctaf{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);border-radius:36px;background:#fff7ed;border:1px solid #fde68a;overflow:hidden}
.tfm-ctaf--flip{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.tfm-ctaf--flip .tfm-ctaf-figure{order:-1}
.tfm-ctaf-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:64px}
.tfm-ctaf-h2{margin:0 0 16px;max-width:18ch;font-size:clamp(28px,3vw,38px);line-height:1.12;letter-spacing:-.022em;font-weight:700;color:#0f172a}
.tfm-ctaf-p{margin:0 0 32px;max-width:44ch;font-size:16.5px;line-height:1.6;color:rgba(15,23,42,.62)}
.tfm-ctaf-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:14px 28px;font-size:15px;font-weight:600;color:#fff;text-decoration:none;background-color:#f59e0b;box-shadow:0 1px 2px rgba(15,23,42,.08);transition:background-color .15s ease,box-shadow .15s ease}
.tfm-ctaf-primary:hover{background-color:#d97706}
.tfm-ctaf-primary:focus-visible{outline:2px solid #b45309;outline-offset:2px}
.tfm-ctaf-bolt{flex:none;display:block;width:15px;height:15px}
.tfm-ctaf-figure{position:relative;min-height:340px}
.tfm-ctaf-img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:90%;width:auto;max-width:none;user-select:none}
@media(max-width:1023px){
.tfm-ctaf,.tfm-ctaf--flip{grid-template-columns:minmax(0,1fr)}
.tfm-ctaf--flip .tfm-ctaf-figure{order:0}
.tfm-ctaf-copy{padding:48px 40px 8px}
.tfm-ctaf-figure{min-height:300px}
.tfm-ctaf-img{height:92%}
}
@media(max-width:639px){
.tfm-ctaf{border-radius:28px}
.tfm-ctaf-copy{padding:36px 24px 4px}
.tfm-ctaf-copy .tfm-ctaf-primary{width:100%}
.tfm-ctaf-figure{min-height:250px}
}