/* chalco · pagina prodotti (prodotti.html) */
.pl .section + .section { padding-top: 120px; }
.pl-hero { padding-top: 72px; }
.pl-hero .label { margin: 0 0 22px; color: var(--c-ink-2); }
.pl-h1 { margin: 0; max-width: 16ch; font-size: var(--fs-section); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1; text-wrap: balance; }
.pl-lead { margin-top: 28px; }
.pl-logo { display: block; width: 100%; height: auto; }

/* mappa: core sopra, tre layer sotto */
.pl-tree { margin-top: 72px; }
.pl-tree__core { display: block; width: min(360px, 70%); margin: 0 auto; padding: 22px 30px; background: #fff; border: 1px solid var(--c-black); transition: transform .2s, box-shadow .2s; }
.pl-tree__lines { display: block; width: calc(100% - 2 * (100% / 6)); margin: 0 auto; height: 56px; }
.pl-tree__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pl-tree__layer { position: relative; display: grid; gap: 14px; padding: 26px 26px 20px; background: #fff; border: 1px solid var(--c-black); border-top: 8px solid var(--c); transition: transform .2s, box-shadow .2s; }
.pl-tree__layer:hover, .pl-tree__core:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--c, var(--c-black)); }
.pl-tree__verb, .pl-tree__n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.pl-tree__n { color: var(--c-ink-2); font-weight: 600; letter-spacing: .14em; }
.pl-tree__n::after { content: " ↓"; }

/* core */
.pl-core__box { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 36px 40px; background: var(--c-black); color: #fff; }
.pl-core__logo svg g[fill], .pl-core__logo svg text { fill: #fff; }
.pl-core__logo svg circle { fill: #fff; }
.pl-core__logo svg path[fill="#0E0E10"] { fill: #fff; }
.pl-core__box p { margin: 0; font-size: 18px; line-height: 1.65; max-width: 60ch; }

/* scheda di un tech layer */
.pl-sec { scroll-margin-top: 100px; }
.pl-band { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 34px 40px; background: #fff; border: 1px solid var(--c-black); border-top: 10px solid var(--c); }
.pl-band__text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--c-ink-2); max-width: 60ch; }
.pl-band__text b { color: var(--c-ink); text-transform: uppercase; letter-spacing: .14em; font-family: var(--font-mono); font-size: 13px; }
.pl-modules { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pl-modules li { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--c); color: var(--c-ink); background: #fff; }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.pc { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 24px; background: #fff; border: 1px solid var(--c-black); box-shadow: 6px 6px 0 var(--c); scroll-margin-top: 110px; transition: transform .2s, box-shadow .2s; }
.pc:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--c); }
.pc:target { outline: 2px solid var(--c); outline-offset: 6px; }
.pc-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed rgba(14,14,16,.3); }
.pc-glyph { width: 40px; height: 40px; flex-shrink: 0; }
.pc-name { display: grid; gap: 6px; min-width: 0; }
.pc-word { display: block; width: 74px; height: auto; }
.pc h3 { margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.pc p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--c-ink-2); flex: 1; }
.pc-cta { align-self: flex-start; }
.pc-soon { align-self: flex-start; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-2); padding: 12px 0 2px; border-top: 1px solid var(--c-line); }

/* chiusura */
.pl-end__in { display: grid; gap: 32px; justify-items: start; }

@media (max-width: 1023px) {
  .pl .section + .section { padding-top: 88px; }
  .pl-tree__row, .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-tree__lines { display: none; }
  .pl-tree__core { margin-bottom: 24px; }
  .pl-band, .pl-core__box { grid-template-columns: 1fr; gap: 22px; padding: 28px; }
  .pl-band__logo, .pl-core__logo { max-width: 340px; }
}
@media (max-width: 767px) {
  .pl-hero { padding-top: 40px; }
  .pl-tree { margin-top: 44px; }
  .pl-tree__row, .pl-grid { grid-template-columns: 1fr; }
  .pl-tree__core { width: 100%; }
  .pl-band, .pl-core__box { padding: 22px 20px; }
  .pl-band__text, .pl-core__box p { font-size: 16px; }
}

/* ======================================================= 24.10 sera */
/* selettore delle due versioni (solo per la revisione) */
.pv-switch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 36px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pv-switch__lab { color: var(--c-ink-3); margin-right: 6px; }
.pv-switch a { padding: 7px 12px; border: 1px solid var(--c-black); background: #fff; }
.pv-switch a[aria-current="page"] { background: var(--c-black); color: #fff; }

/* logo istituzionale di prodotto: CHALCO, sotto glifo e nome in montserrat */
.plogo { display: grid; gap: 6px; min-width: 0; }
.plogo .pc-word { width: 92px; }
.plogo__row { display: flex; align-items: center; gap: 7px; }
.plogo__row img { width: 22px; height: 22px; flex-shrink: 0; }
.plogo__name { font-family: var(--font-sans); font-size: 19px; font-weight: 400; letter-spacing: .01em; line-height: 1.1; color: var(--c-ink); overflow-wrap: anywhere; }
.pc-head { display: block; }
/* "scopri" ancora non collegato */
.btn.is-off { cursor: default; }

/* ---------- prodotti 2 · infografica */
.pi .section + .section { padding-top: 64px; }
.pi-stage { position: relative; padding: 48px 40px 56px; background: rgba(255,255,255,.4); }
.pi-core { display: grid; justify-items: center; gap: 12px; width: min(420px, 100%); margin: 0 auto; padding: 22px 28px; background: var(--c-black); color: #fff; text-align: center; }
.pi-core .pl-logo { max-width: 300px; }
.pi-core .pl-logo g[fill], .pi-core .pl-logo text, .pi-core .pl-logo circle { fill: #fff; }
.pi-core p { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; opacity: .85; }
.pi-top { display: block; width: calc(100% * 2 / 3 + 24px); max-width: 100%; height: 72px; margin: 0 auto; overflow: visible; }
.pi-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pi-col { position: relative; min-width: 0; }
.pi-layer { display: grid; gap: 12px; padding: 20px 22px; background: #fff; border: 1px solid var(--c-black); border-top: 8px solid var(--c); }
.pi-mods { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pi-mods li { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 5px 9px; border: 1px solid var(--c); background: #fff; }
.pi-branch { position: relative; padding-left: 72px; margin-left: 2px; }
.pi-wires { position: absolute; left: 0; top: 0; overflow: visible; }
.pi-list { list-style: none; margin: 0; padding: 0; }
.pi-node { position: relative; height: 96px; display: flex; align-items: center; }
.pi-node__btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: #fff; border: 1px solid var(--c-black); cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: transform .2s, box-shadow .2s; }
.pi-node__btn:hover, .pi-node.is-on .pi-node__btn { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--c); }
.pi-node__btn:focus-visible { outline: 2px solid var(--c-black); outline-offset: 3px; }
.pi-node__dot { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--c-black); background: #fff; }
.pi-node__dot img { width: 26px; height: 26px; }
.pi-node .plogo__row img { display: none; }   /* il glifo è già nel cerchio */
.pi-node .plogo .pc-word { width: 70px; }
.pi-node .plogo__name { font-size: 15px; }
.pi-pop { position: absolute; z-index: 20; left: calc(100% + 16px); top: 50%; width: 280px; display: grid; gap: 10px; padding: 18px 18px 18px;
  background: #fff; border: 1px solid var(--c-black); border-top: 4px solid var(--c); box-shadow: 6px 6px 0 var(--c);
  opacity: 0; visibility: hidden; transform: translate(-6px, -50%); transition: opacity .2s, transform .25s, visibility 0s linear .25s; }
.pi-pop::before { content: ""; position: absolute; right: 100%; top: 50%; width: 16px; border-top: 1px dashed var(--c-black); }
.pi-node.is-on .pi-pop { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.pi-col:last-child .pi-pop { left: auto; right: calc(100% + 16px); }
.pi-col:last-child .pi-pop::before { right: auto; left: 100%; }
.pi-pop__head { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pi-pop p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-ink-2); }
.pi-pop .pi-pop__head { color: var(--c-ink); }
.pi-pop .pc-cta { justify-self: start; }

@media (max-width: 1023px) {
  .pi-stage { padding: 32px 20px 40px; }
  .pi-top { display: none; }
  .pi-core { margin-bottom: 32px; }
  .pi-cols { grid-template-columns: 1fr; gap: 48px; max-width: 560px; margin: 0 auto; }
  .pi-node { height: auto; min-height: 96px; flex-direction: column; align-items: stretch; justify-content: center; }
  .pi-pop, .pi-col:last-child .pi-pop { position: static; width: auto; transform: none; display: none; margin: 10px 0 8px; box-shadow: none; }
  .pi-pop::before { content: none; }
  .pi-node.is-on .pi-pop { display: grid; transform: none; }
}
@media (max-width: 767px) {
  .pi-stage { margin: 0 calc(var(--gutter-x) * -1); padding: 28px 16px 36px; }
}
.pi-core .pl-logo path[fill="#0E0E10"] { fill: #fff; }
.pi-core .pl-logo circle { fill: var(--c-black); }
.pi-col:has(.pi-node.is-on) { z-index: 30; }
.pi-node.is-on { z-index: 30; }

/* ======================================================= 24.10 sera · revisione 2 */
/* infografica dei livelli sotto il titolo */
.pl-livelli { margin: 64px 0 0; padding: 24px 16px 8px; background: rgba(255,255,255,.4); }
.pl-livelli__svg svg { width: 100%; height: auto; }

/* prodotti 1: schede più libere, collegate con frecce; il colore resta solo sulla banda del layer */
.pl-sec .container { position: relative; }
.pl-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.pl-wires__dots { animation: aiDash 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pl-wires__dots { animation: none; } }
.pl-band, .pl-modules, .pc { position: relative; z-index: 1; }
.pc, .pc:hover { box-shadow: none; transform: none; }
.pc:hover { border-color: var(--c); }
.pl-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 110px; margin-top: 96px; }
.pl-grid .pc { grid-column: span 4; }
@media (min-width: 1024px) {
  .pl-grid .pc:nth-child(6n+1) { grid-column: 1 / span 4; }
  .pl-grid .pc:nth-child(6n+2) { grid-column: 5 / span 4; margin-top: 64px; }
  .pl-grid .pc:nth-child(6n+3) { grid-column: 9 / span 4; margin-top: 20px; }
  .pl-grid .pc:nth-child(6n+4) { grid-column: 2 / span 4; }
  .pl-grid .pc:nth-child(6n+5) { grid-column: 6 / span 4; margin-top: 56px; }
  .pl-grid .pc:nth-child(6n+6) { grid-column: 9 / span 4; margin-top: 8px; margin-left: 32px; }
  .pl-band { width: 86%; }
  .pl-sec:nth-of-type(odd) .pl-band { margin-left: auto; }
}
@media (max-width: 1023px) {
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; margin-top: 64px; }
  .pl-grid .pc { grid-column: auto; }
  .pl-grid .pc:nth-child(even) { margin-top: 40px; }
}
@media (max-width: 767px) {
  .pl-grid { grid-template-columns: 1fr; row-gap: 56px; }
  .pl-grid .pc:nth-child(even) { margin-top: 0; margin-left: 24px; }
  .pl-grid .pc:nth-child(odd) { margin-right: 24px; }
  .pl-livelli { margin: 40px calc(var(--gutter-x) * -1) 0; padding: 12px 4px 4px; }
}

/* prodotti 2: icone senza cerchio, pop up sotto con spessore nero */
.pi-node__dot { border: 0; width: 34px; height: 34px; background: none; border-radius: 0; }
.pi-node__dot img { width: 32px; height: 32px; }
.pi-node.is-on { z-index: 40; }
.pi-pop, .pi-col:last-child .pi-pop { left: 0; right: 0; top: calc(100% - 4px); width: auto; transform: translateY(-6px); box-shadow: 6px 6px 0 var(--c-black); }
.pi-node.is-on .pi-pop, .pi-col:last-child .pi-node.is-on .pi-pop { transform: none; }
.pi-pop::before, .pi-col:last-child .pi-pop::before { content: ""; left: 28px; right: auto; top: -10px; width: 0; height: 10px; border-top: 0; border-left: 1px dashed var(--c-black); }
@media (max-width: 1023px) { .pi-pop, .pi-col:last-child .pi-pop { box-shadow: 6px 6px 0 var(--c-black); } }
@media (min-width: 1024px) {
  .pl-grid .pc:nth-child(6n+4) { grid-column: 1 / span 4; margin-left: 56px; margin-top: 0; }
  .pl-grid .pc:nth-child(6n+5) { grid-column: 5 / span 4; margin-left: 56px; margin-top: 48px; }
  .pl-grid .pc:nth-child(6n+6) { grid-column: 9 / span 4; margin-left: 56px; margin-right: -24px; margin-top: 16px; }
}
/* prodotti 2: infografica dei livelli collegata alla mappa con una freccia */
.pi-livelli { margin-top: 0; }
.pi-link { display: block; width: 40px; height: 120px; margin: 0 auto; overflow: visible; }
.pi .pl-hero + .section { padding-top: 40px; }
/* infografica dei livelli: più larga, come le infografiche della home */
@media (min-width: 1024px) { .pl-livelli { margin-left: calc(var(--gutter-x) * -1 + 16px); margin-right: calc(var(--gutter-x) * -1 + 16px); padding: 28px 8px 12px; } }
/* schema geometrico: righe allineate, spazio a sinistra per la dorsale */
.pl-grid { padding-left: 64px; row-gap: 104px; margin-top: 96px; }
.pl-grid .pc:nth-child(n) { margin: 0 !important; grid-column: span 4 !important; }
.pl-band { width: 100% !important; margin-left: 0 !important; }
@media (max-width: 1023px) { .pl-grid { padding-left: 48px; row-gap: 80px; } .pl-grid .pc:nth-child(n) { grid-column: auto !important; } }
@media (max-width: 767px) { .pl-grid { padding-left: 36px; row-gap: 72px; } }
/* prodotti 2: chiusura con il livello API · delivery, come nell'infografica dei livelli */
.pi-bottom { margin-top: 24px; }
.pi-api { display: grid; justify-items: center; gap: 6px; width: min(860px, 100%); margin: 0 auto; padding: 22px 28px 24px; text-align: center;
  background: #E6EBF2; border: 1.5px dashed var(--c-blue); }
.pi-api p { margin: 0; font-family: var(--font-mono); color: var(--c-blue); }
.pi-api__t { font-size: 15px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.pi-api__s { font-size: 13px; font-style: italic; }
.pi-api ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pi-api li { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 6px 12px; background: #fff; border: 1px solid var(--c-black); border-radius: 999px; }
.pi-livelli + .pi-stage { margin-top: 32px; }
@media (max-width: 1023px) { .pi-bottom { display: none; } .pi-api { margin-top: 40px; } }