/* chalco · pagina piattaforma (piattaforma.html, piattaforma-2.html) */
.pf .section + .section { padding-top: 136px; }
.pf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pf-hero .infographic { margin-top: 64px; }
.pf-ico { display: block; flex-shrink: 0; }

/* vantaggi: quattro blocchi a colore pieno */
.pf-ben .sec-title { margin-top: 18px; }
.pf-ben__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; }
.pf-ben__item { display: grid; align-content: start; gap: 14px; padding: 28px 26px 30px; background: var(--bg); color: var(--ink); min-height: 260px; }
.pf-ben__item:nth-child(2) { margin-top: 40px; } .pf-ben__item:nth-child(4) { margin-top: 40px; }
.pf-ben__item h3 { margin: 18px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pf-ben__item p { margin: 0; font-size: 15px; line-height: 1.6; }

/* integrazione */
.pf-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: end; }
.pf-sys { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; }
.pf-sys li { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; padding: 9px 16px; border: 1px solid var(--c-black); border-radius: 999px; background: #fff; }
.pf-int .infographic { margin-top: 48px; }

/* produzione e fruizione: banda colorata + tre box collegati */
.pf-band { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 30px 36px; background: #fff; border: 1px solid var(--c-black); border-top: 10px solid var(--c); }
.pf-band__k { margin: 0; font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pf-cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.pf-cards::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: -44px; height: 44px; border: 1px dashed var(--c-black); border-bottom: 0; border-radius: 22px 22px 0 0; }
.pf-cards::after { content: ""; position: absolute; left: 50%; top: -72px; height: 28px; border-left: 1px dashed var(--c-black); }
.pf-card { position: relative; display: grid; gap: 12px; padding: 22px 24px 26px; background: #fff; }
.pf-card::before { content: ""; position: absolute; left: 50%; top: -14px; width: 9px; height: 9px; margin-left: -4.5px; background: var(--c); }
.pf-card__ico { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--c-black); border-radius: 50%; }
.pf-card h3 { margin: 4px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pf-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-2); }
.pf-blk--y .pf-cards { direction: rtl; } .pf-blk--y .pf-card { direction: ltr; }

/* delivery: blocco nero con i canali */
.pf-out__box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px 48px; background: var(--c-black); color: #fff; }
.pf-out__box .label, .pf-out__box .lead-l { color: #fff; }
.pf-out__box .lead-l { margin-top: 20px; opacity: .85; }
.pf-out__box .sec-title { margin-top: 14px; color: #fff; }
.pf-del { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 0; min-width: 0; }
.pf-del__src { display: grid; justify-items: center; gap: 8px; max-width: 110px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: #fff; }
.pf-del__c { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--c-black); font-family: var(--font-sans); font-weight: 800; font-size: 22px; }
.pf-del__wires { width: 100%; height: 220px; }
.pf-del__out { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pf-del__out li { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 12px; border: 1px solid #fff; border-radius: 999px; white-space: nowrap; }

/* variante 2: percorso verticale con stazioni alternate */
.pf-route { position: relative; list-style: none; margin: 72px 0 0; padding: 0; display: grid; gap: 88px; }
.pf-route::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; margin-left: -7px; border-radius: 7px;
  background: linear-gradient(var(--c-blue), var(--c-red) 40%, var(--c-yellow) 70%, var(--c-black)); opacity: .22; }
.pf-route::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--c-black); }
.pf-st { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: start; }
.pf-st__node { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px;
  background: #fff; border: 1.5px solid var(--c-black); border-radius: 50%; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent); }
.pf-st__text { grid-row: 1; padding-top: 6px; }
.pf-st__k { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pf-st__k::after { content: ""; display: block; width: 56px; height: 6px; margin-top: 14px; background: var(--c); }
.pf-st__p { margin: 18px 0 0; font-size: 17px; line-height: 1.65; color: var(--c-ink-2); max-width: 46ch; }
.pf-st__cards { grid-row: 1; display: grid; gap: 14px; }
.pf-st--l .pf-st__text { grid-column: 1; text-align: right; justify-items: end; } .pf-st--l .pf-st__text .pf-st__p { margin-left: auto; } .pf-st--l .pf-st__k::after { margin-left: auto; }
.pf-st--l .pf-st__cards { grid-column: 3; }
.pf-st--r .pf-st__text { grid-column: 3; } .pf-st--r .pf-st__cards { grid-column: 1; }
.pf-mini { position: relative; padding: 16px 20px 18px; background: #fff; border: 1px solid var(--c-black); border-left: 6px solid var(--c); }
.pf-mini h3 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 14px; font-weight: 700; line-height: 1.3; }
.pf-mini p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-ink-2); }
.pf-st--end .pf-st__cards { background: var(--c-black); padding: 24px; }
.pf-ben--2 .pf-ben__item:nth-child(n) { margin-top: 0; }

@media (max-width: 1023px) {
  .pf .section + .section { padding-top: 96px; }
  .pf-ben__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-ben__item:nth-child(n) { margin-top: 0; }
  .pf-split, .pf-band, .pf-out__box { grid-template-columns: 1fr; gap: 20px; }
  .pf-cards { grid-template-columns: 1fr; margin-top: 32px; } .pf-cards::before, .pf-cards::after, .pf-card::before { display: none; }
  .pf-out__box { padding: 32px 24px; }
  .pf-route::before, .pf-route::after { left: 32px; }
  .pf-st { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 20px; }
  .pf-st__node { grid-column: 1 !important; }
  .pf-st .pf-st__text, .pf-st .pf-st__cards { grid-column: 2 !important; text-align: left !important; }
  .pf-st .pf-st__cards { grid-row: 2; }
  .pf-st--l .pf-st__k::after, .pf-st--l .pf-st__p { margin-left: 0; }
}
@media (max-width: 767px) {
  .pf-ben__grid { grid-template-columns: 1fr; }
  .pf-ben__item { min-height: 0; }
  .pf-del { grid-template-columns: 1fr; justify-items: start; gap: 16px; } .pf-del__wires { display: none; }
  .pf-del__out { grid-template-columns: 1fr 1fr; }
}
.pf-del { color: #fff; }
.pf-card.box, .pf-card.box:hover { box-shadow: none; }
.pf-blk--y .pf-cards { direction: ltr; }

/* 24.10 · frecce disegnate da piattaforma.js al posto della staffa tratteggiata */
.pf-cards::before, .pf-cards::after, .pf-card::before { content: none !important; }
.pf-blk .container { position: relative; }
.pf-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.pf-band, .pf-cards, .pf-fact { position: relative; z-index: 1; }
.pf-cards { margin-top: 110px; }
@media (max-width: 1023px) { .pf-cards { margin-top: 48px; gap: 48px; } .pf-card { margin-left: 0; } }

/* delivery: svg a proporzioni fisse */
.pf-out__box .pf-del, .pf-st--end .pf-del { display: block; width: 100%; max-width: 560px; justify-self: end; }
.pf-del__out, .pf-del__src, .pf-del__wires { display: none; }

/* infografica dal set al canale */
.pf-fact { margin: 96px 0 0; padding: 24px 16px 12px; background: rgba(255,255,255,.4); }
.pf-fact .label { margin: 0 0 8px 8px; color: var(--c-ink-2); }
.pf-fact__svg svg { width: 100%; height: auto; }
.pf-fact__svg--m { display: none; }
@media (min-width: 1024px) { .pf-fact { margin-left: calc(var(--gutter-x) * -1 + 16px); margin-right: calc(var(--gutter-x) * -1 + 16px); } }
@media (max-width: 767px) { .pf-fact__svg--d { display: none; } .pf-fact__svg--m { display: block; } .pf-fact { margin-left: calc(var(--gutter-x) * -1); margin-right: calc(var(--gutter-x) * -1); } }
.pf-hero .infographic--os { margin-top: 56px; margin-bottom: 0; }
.pf-ben__intro { margin-top: 24px; }

/* variante 1: i box di produzione e fruizione su fondo schiarito, come la versione D delle soluzioni */
.pf-cards[data-c="#E94F37"] .pf-card { background: #FCECE8 !important; }
.pf-cards[data-c="#E3A649"] .pf-card { background: #FBF3E5 !important; }
.pf-cards .pf-card { border: 1px solid var(--c-black); }
.pf-cards .pf-card__ico { background: #fff; }

/* variante 1 · export e delivery come le sezioni precedenti: banda con filo nero, sotto la parte schiarita */
.pf-cards--one { grid-template-columns: 1fr !important; }
.pf-cards[data-c="#0E0E10"] .pf-card { background: #EEF0F4 !important; }
.pf-del-card { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important; gap: 48px !important; align-items: center; padding: 40px 44px !important; }
.pf-del-card__t { display: grid; gap: 12px; }
.pf-del-card__t .label { margin: 0; color: var(--c-ink-2); }
.pf-del-card__t h3 { font-size: 30px !important; }
@media (max-width: 1023px) { .pf-del-card { grid-template-columns: 1fr !important; gap: 28px !important; padding: 26px 20px !important; } }
.pf-del-card .pf-del { max-width: 560px; justify-self: end; }

/* step 5a · vantaggi con i 5 KPI */
.pf-ben__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pf-ben__grid--5 .pf-ben__item { padding: 24px 20px 26px; min-height: 240px; }
.pf-ben__grid--5 .pf-ben__item h3 { font-size: 25px; }
@media (max-width: 1023px) { .pf-ben__grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pf-ben__grid--5 { grid-template-columns: 1fr; } .pf-ben__grid--5 .pf-ben__item { min-height: 0; } }

/* step 5b · produttività su grigio chiaro (con filo, sul fondo carta si perderebbe); export e delivery senza riquadro né fondo */
.pf-ben__item--lt { border: 0; }   /* 01.11: grigio scuro corporate #444444, senza bordo */
.pf .pf-st--end .pf-st__cards { background: none; border: 0; padding: 0; }

/* 01.11 · telefono: infografiche dentro i margini, titoli delle tappe accanto all'icona, export in verticale */
.pf-del-m { display: none; }
@media (max-width: 767px) {
  .pf-hero .infographic-m { margin-left: 0 !important; margin-right: 0 !important; padding-left: 4px; padding-right: 4px; }
  .pf-st .pf-st__text, .pf-st .pf-st__k { text-align: left !important; justify-items: start !important; }
  .pf-st .pf-st__k::after { margin-left: 0 !important; }
  .pf-st__text { padding-top: 10px; }
  .pf-st--end .pf-st__cards .pf-del { display: none !important; }
  .pf-st--end .pf-st__cards .pf-del-m { display: block; max-width: 340px; }
}

/* 02.11 (revisione 6) · la linea centrale del percorso finisce sul nodo export (aeroplanino);
   pallini che scendono (blu) e risalgono (rossi) lungo la linea, sotto le icone (piattaforma.js) */
.pf-route::before, .pf-route::after { bottom: var(--pf-fine, 0px); }
.pf-flow { position: absolute; left: 50%; top: 0; bottom: var(--pf-fine, 0px); width: 0; z-index: 0; pointer-events: none; }
/* 03.11 · ogni pallino è una "corsia" alta quanto la linea che si sposta con transform (fluido anche mentre si scorre) */
.pf-flow i { position: absolute; left: .5px; top: 0; bottom: 0; width: 10px; margin-left: -5px; opacity: 0;
  will-change: transform, opacity; animation: pfGiu var(--pf-t, 14s) linear infinite; }
.pf-flow i::before { content: ""; position: absolute; left: 0; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid #fff; box-sizing: border-box; background: #003376; }
.pf-flow i.su::before { background: #E94F37; }
.pf-flow i.su { animation-name: pfSu; }
@keyframes pfGiu { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes pfSu { 0% { transform: translateY(100%); opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-width: 1023px) { .pf-flow { left: 32px; } }
@media (prefers-reduced-motion: reduce) { .pf-flow { display: none; } }