{"id":613,"date":"2026-06-06T10:49:54","date_gmt":"2026-06-06T10:49:54","guid":{"rendered":"https:\/\/test.okite.com\/?page_id=613"},"modified":"2026-06-12T10:14:14","modified_gmt":"2026-06-12T10:14:14","slug":"fondazioni","status":"publish","type":"page","link":"https:\/\/test.okite.com\/?page_id=613","title":{"rendered":"Fondazioni"},"content":{"rendered":"<style>.kb-row-layout-id613_0ce59c-1a > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id613_0ce59c-1a > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id613_0ce59c-1a > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id613_0ce59c-1a > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id613_0ce59c-1a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id613_0ce59c-1a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id613_0ce59c-1a alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column613_411c58-e5 > .kt-inside-inner-col,.kadence-column613_411c58-e5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column613_411c58-e5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column613_411c58-e5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column613_411c58-e5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column613_411c58-e5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column613_411c58-e5{position:relative;}@media all and (max-width: 1024px){.kadence-column613_411c58-e5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column613_411c58-e5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column613_411c58-e5\"><div class=\"kt-inside-inner-col\">\n<!-- ============================================================\n     SEZIONE HERO \u2014 I SOLAI PREFABBRICATI\n     Animazione 3D: Fondazione Prefabbricata (plinti + pilastri + travi)\n     Pronto per WordPress \u2014 incolla in blocco HTML Personalizzato\n     ============================================================ -->\n\n<style>\n.sp-section-wrap {\n  position: relative;\n  width: 100vw;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  overflow: hidden;\n  background: #ffffff;\n}\n\n.sp-hero {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 100vh;\n  padding: 100px 8vw 80px;\n  background: #ffffff;\n  position: relative;\n  overflow: hidden;\n}\n\n.sp-left {\n  flex: 0 0 50%;\n  z-index: 2;\n}\n\n.sp-tag {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: #d71920;\n  margin-bottom: 22px;\n  font-family: sans-serif;\n}\n\n.sp-title {\n  font-size: clamp(40px, 5.5vw, 82px);\n  line-height: 1.0;\n  font-weight: 900;\n  color: #111111;\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n  font-family: sans-serif;\n  margin: 0;\n}\n\n.sp-title .sp-red {\n  color: #C8281E;\n}\n\n.sp-divider {\n  width: 52px;\n  height: 3px;\n  background: #C8281E;\n  margin: 30px 0 28px;\n  border-radius: 2px;\n  border: none;\n}\n\n.sp-subtitle {\n  font-size: 16.5px;\n  line-height: 1.8;\n  color: #555555;\n  max-width: 440px;\n  font-family: sans-serif;\n  margin: 0;\n}\n\n.sp-cta {\n  margin-top: 44px;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #111111;\n  text-transform: uppercase;\n  letter-spacing: 0.14em;\n  text-decoration: none;\n  border-bottom: 2px solid #C8281E;\n  padding-bottom: 5px;\n  cursor: pointer;\n  font-family: sans-serif;\n  background: none;\n  border-top: none;\n  border-left: none;\n  border-right: none;\n  transition: color 0.2s, border-color 0.2s;\n}\n\n.sp-cta:hover {\n  color: #C8281E;\n}\n\n.sp-cta-arrow {\n  display: inline-block;\n  transition: transform 0.22s;\n}\n\n.sp-cta:hover .sp-cta-arrow {\n  transform: translateX(5px);\n}\n\n.sp-right {\n  flex: 0 0 46%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 500px;\n  position: relative;\n}\n\n#sp-canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n@media (max-width: 900px) {\n  .sp-hero {\n    flex-direction: column;\n    padding: 80px 6vw 60px;\n    min-height: auto;\n  }\n  .sp-left {\n    flex: none;\n    width: 100%;\n    margin-bottom: 40px;\n  }\n  .sp-right {\n    flex: none;\n    width: 100%;\n    height: 320px;\n  }\n  .sp-title {\n    font-size: clamp(36px, 10vw, 60px);\n  }\n  .sp-subtitle {\n    max-width: 100%;\n  }\n}\n<\/style>\n\n<div class=\"sp-section-wrap\">\n  <section class=\"sp-hero\" id=\"sp-hero\">\n\n    <!-- TESTO SX -->\n    <div class=\"sp-left\">\n      <span class=\"sp-tag\">Edilizia Industrializzata<\/span>\n      <h1 class=\"sp-title\">\n        LE FONDAZIONI<br>\n        <span class=\"sp-red\">PREFABBRICATE<\/span>\n      <\/h1>\n      <hr class=\"sp-divider\">\n      <p class=\"sp-subtitle\">\n        Seieffe Prefabbricati produce la prima fondazione interamente prefabbricata in cemento armato precompresso (C.A.P.) o in C.A.V. Un\u2019innovazione che riduce i costi di cantiere, assicura qualit\u00e0 e durata dei materiali, velocizza i tempi di realizzazione rispetto alle tradizionali fondazioni in opera. La Fondazione Prefabbricata offre un\u2019alternativa efficace e sicura alle tradizionali fondazioni in opera. E\u2019 progettata nel rispetto della normativa antisismica e secondo Eurocodice ed \u00e8 prodotta esclusivamente con calcestruzzo in classe di resistenza C40\/50.\n      <\/p>\n      <a href=\"#contatti\" class=\"sp-cta\">\n        Scopri di pi\u00f9 <span class=\"sp-cta-arrow\">\u2192<\/span>\n      <\/a>\n    <\/div>\n\n    <!-- CANVAS 3D DX -->\n    <div class=\"sp-right\">\n      <canvas id=\"sp-canvas\" width=\"520\" height=\"480\"><\/canvas>\n    <\/div>\n\n  <\/section>\n<\/div>\n\n<script>\n(function () {\n  var canvas = document.getElementById('sp-canvas');\n  if (!canvas) return;\n  var ctx = canvas.getContext('2d');\n  var hero = document.getElementById('sp-hero');\n\n  var targetRotX = -0.22, targetRotY = 0.42;\n  var rotX = -0.22, rotY = 0.42;\n  var animT = 0;\n\n  hero.addEventListener('mousemove', function (e) {\n    var r = hero.getBoundingClientRect();\n    var nx = (e.clientX - r.left) \/ r.width;\n    var ny = (e.clientY - r.top) \/ r.height;\n    targetRotY = (nx - 0.5) * 1.2 + 0.3;\n    targetRotX = (ny - 0.5) * 0.6 - 0.15;\n  });\n\n  \/* ---- proiezione 3D ---- *\/\n  function project(x, y, z, rx, ry, cx, cy, fov) {\n    var cY = Math.cos(ry), sY = Math.sin(ry);\n    var cX = Math.cos(rx), sX = Math.sin(rx);\n    var x1 = x * cY - z * sY;\n    var z1 = x * sY + z * cY;\n    var y1 = y * cX - z1 * sX;\n    var z2 = y * sX + z1 * cX;\n    var sc = fov \/ (fov + z2 + 350);\n    return { x: cx + x1 * sc, y: cy + y1 * sc, z: z2, s: sc };\n  }\n\n  function face3d(pts3, rx, ry, cx, cy, fov) {\n    return pts3.map(function (p) { return project(p[0], p[1], p[2], rx, ry, cx, cy, fov); });\n  }\n\n  function avgZ(pts2) {\n    return pts2.reduce(function (s, p) { return s + p.z; }, 0) \/ pts2.length;\n  }\n\n  function drawFace(pts2, fill, strokeC, lw) {\n    ctx.beginPath();\n    ctx.moveTo(pts2[0].x, pts2[0].y);\n    for (var i = 1; i < pts2.length; i++) ctx.lineTo(pts2[i].x, pts2[i].y);\n    ctx.closePath();\n    ctx.fillStyle = fill;\n    ctx.fill();\n    if (strokeC) { ctx.strokeStyle = strokeC; ctx.lineWidth = lw || 1; ctx.stroke(); }\n  }\n\n  \/* ---- costruisce un parallelepipedo generico ---- *\/\n  function box(ox, oy, oz, W, D, H, idPfx) {\n    var hw = W\/2, hd = D\/2, hh = H\/2;\n    var faces = [];\n    var o = function(v){ return [v[0]+ox, v[1]+oy, v[2]+oz]; };\n    faces.push({ id: idPfx+'_top',   pts: [[-hw,-hh,-hd],[hw,-hh,-hd],[hw,-hh,hd],[-hw,-hh,hd]].map(o) });\n    faces.push({ id: idPfx+'_front', pts: [[-hw,-hh,hd],[hw,-hh,hd],[hw,hh,hd],[-hw,hh,hd]].map(o) });\n    faces.push({ id: idPfx+'_right', pts: [[hw,-hh,-hd],[hw,-hh,hd],[hw,hh,hd],[hw,hh,-hd]].map(o) });\n    faces.push({ id: idPfx+'_left',  pts: [[-hw,-hh,-hd],[-hw,-hh,hd],[-hw,hh,hd],[-hw,hh,-hd]].map(o) });\n    faces.push({ id: idPfx+'_bot',   pts: [[-hw,hh,-hd],[hw,hh,-hd],[hw,hh,hd],[-hw,hh,hd]].map(o) });\n    faces.push({ id: idPfx+'_back',  pts: [[-hw,-hh,-hd],[hw,-hh,-hd],[hw,hh,-hd],[-hw,hh,-hd]].map(o) });\n    return faces;\n  }\n\n  \/* ---- palette colori per categoria ---- *\/\n  var palette = {\n    plinto: { top:'#d8d8d8', front:'#a8a8a8', right:'#787878', left:'#686868', bot:'#404040', back:'#585858' },\n    pilastro: { top:'#cccccc', front:'#999999', right:'#6a6a6a', left:'#5e5e5e', bot:'#383838', back:'#505050' },\n    trave:  { top:'#c4c4c4', front:'#909090', right:'#606060', left:'#565656', bot:'#343434', back:'#4a4a4a' }\n  };\n\n  function getColor(id, cat) {\n    var p = palette[cat] || palette.plinto;\n    if (id.indexOf('_top')   > -1) return { fill: p.top,   stroke: '#1a1a1a', lw: 1.3 };\n    if (id.indexOf('_front') > -1) return { fill: p.front, stroke: '#1a1a1a', lw: 0.9 };\n    if (id.indexOf('_right') > -1) return { fill: p.right, stroke: '#111',    lw: 0.8 };\n    if (id.indexOf('_left')  > -1) return { fill: p.left,  stroke: '#111',    lw: 0.7 };\n    if (id.indexOf('_bot')   > -1) return { fill: p.bot,   stroke: '#111',    lw: 0.6 };\n    if (id.indexOf('_back')  > -1) return { fill: p.back,  stroke: '#111',    lw: 0.6 };\n    return { fill: '#888', stroke: '#222', lw: 0.7 };\n  }\n\n  \/* ---- costruisce la fondazione completa ----\n     Composizione: \n       - 2 plinti (a sx e dx)\n       - 2 pilastri (uno per plinto)\n       - 2 travi di collegamento (longitudinale + trasversale)\n  *\/\n  function buildFoundation(fy) {\n    var allFaces = [];\n\n    \/* coordinate globali di offset per centrare la scena *\/\n    \/* Plinto sx: grande base quadrata piatta *\/\n    var pW = 130, pD = 130, pH = 35;\n    var pilW = 32, pilD = 32, pilH = 140;\n    var trW = 220, trD = 28, trH = 28; \/* trave longitudinale *\/\n    var trTW = 28, trTD = 130, trTH = 28; \/* trave trasversale *\/\n\n    \/* centri dei plinti *\/\n    var lx = -90, rx = 90, baseY = fy + 80;\n\n    \/* --- Plinto sinistro --- *\/\n    var pLfaces = box(lx, baseY, 0, pW, pD, pH, 'pL');\n    pLfaces.forEach(function(f){ f.cat='plinto'; allFaces.push(f); });\n\n    \/* --- Plinto destro --- *\/\n    var pRfaces = box(rx, baseY, 0, pW, pD, pH, 'pR');\n    pRfaces.forEach(function(f){ f.cat='plinto'; allFaces.push(f); });\n\n    \/* --- Pilastro sinistro (sopra plinto sx) --- *\/\n    var pilTopY = baseY - pH\/2 - pilH\/2;\n    var pilLfaces = box(lx, pilTopY, 0, pilW, pilD, pilH, 'pilL');\n    pilLfaces.forEach(function(f){ f.cat='pilastro'; allFaces.push(f); });\n\n    \/* --- Pilastro destro --- *\/\n    var pilRfaces = box(rx, pilTopY, 0, pilW, pilD, pilH, 'pilR');\n    pilRfaces.forEach(function(f){ f.cat='pilastro'; allFaces.push(f); });\n\n    \/* --- Trave longitudinale (collega i due pilastri in cima) --- *\/\n    var travTopY = pilTopY - pilH\/2 - trH\/2;\n    var trLfaces = box(0, travTopY, 0, trW, trD, trH, 'trL');\n    trLfaces.forEach(function(f){ f.cat='trave'; allFaces.push(f); });\n\n    \/* --- Trave trasversale sx (ortogonale, a met\u00e0 altezza pilastro) --- *\/\n    var trMidY = pilTopY + 10;\n    var trTLfaces = box(lx, trMidY, 0, trTW, trTD, trTH, 'trTL');\n    trTLfaces.forEach(function(f){ f.cat='trave'; allFaces.push(f); });\n\n    \/* --- Trave trasversale dx --- *\/\n    var trTRfaces = box(rx, trMidY, 0, trTW, trTD, trTH, 'trTR');\n    trTRfaces.forEach(function(f){ f.cat='trave'; allFaces.push(f); });\n\n    return allFaces;\n  }\n\n  \/* ---- render loop ---- *\/\n  function render() {\n    var CW = canvas.width, CH = canvas.height;\n    ctx.clearRect(0, 0, CW, CH);\n\n    rotX += (targetRotX - rotX) * 0.065;\n    rotY += (targetRotY - rotY) * 0.065;\n    animT += 0.009;\n\n    var fov = 680;\n    var cx = CW * 0.5, cy = CH * 0.5 + 20;\n    var floatY = Math.sin(animT) * 7;\n\n    var faces = buildFoundation(floatY);\n\n    var projected = faces.map(function (f) {\n      var p2 = face3d(f.pts, rotX, rotY, cx, cy, fov);\n      return { id: f.id, cat: f.cat, p2: p2, az: avgZ(p2) };\n    });\n    projected.sort(function (a, b) { return b.az - a.az; });\n\n    projected.forEach(function (f) {\n      var c = getColor(f.id, f.cat);\n      drawFace(f.p2, c.fill, c.stroke, c.lw);\n    });\n\n    \/* ombra sotto i plinti *\/\n    var shadowY = floatY + 80 + 35\/2 + 50;\n    var sc = project(0, shadowY, 0, rotX, rotY, cx, cy, fov);\n    var grad = ctx.createRadialGradient(sc.x, sc.y, 4, sc.x, sc.y, 160);\n    grad.addColorStop(0, 'rgba(0,0,0,0.11)');\n    grad.addColorStop(1, 'rgba(0,0,0,0)');\n    ctx.beginPath();\n    ctx.ellipse(sc.x, sc.y, 160, 28, 0, 0, Math.PI * 2);\n    ctx.fillStyle = grad;\n    ctx.fill();\n\n    requestAnimationFrame(render);\n  }\n\n  render();\n})();\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id613_ab4d7d-4a > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id613_ab4d7d-4a > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id613_ab4d7d-4a > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id613_ab4d7d-4a > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id613_ab4d7d-4a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id613_ab4d7d-4a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id613_ab4d7d-4a alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column613_d08945-65 > .kt-inside-inner-col,.kadence-column613_d08945-65 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column613_d08945-65 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column613_d08945-65 > .kt-inside-inner-col{flex-direction:column;}.kadence-column613_d08945-65 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column613_d08945-65 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column613_d08945-65{position:relative;}@media all and (max-width: 1024px){.kadence-column613_d08945-65 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column613_d08945-65 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column613_d08945-65\"><div class=\"kt-inside-inner-col\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione.jpg\" alt=\"\" class=\"wp-image-609\" srcset=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione.jpg 1024w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione-300x240.jpg 300w, https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione-768x614.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id613_6f5cd8-68 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id613_6f5cd8-68 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id613_6f5cd8-68 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id613_6f5cd8-68 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id613_6f5cd8-68 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id613_6f5cd8-68 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id613_6f5cd8-68 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column613_26b66a-55 > .kt-inside-inner-col,.kadence-column613_26b66a-55 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column613_26b66a-55 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column613_26b66a-55 > .kt-inside-inner-col{flex-direction:column;}.kadence-column613_26b66a-55 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column613_26b66a-55 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column613_26b66a-55{position:relative;}@media all and (max-width: 1024px){.kadence-column613_26b66a-55 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column613_26b66a-55 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column613_26b66a-55\"><div class=\"kt-inside-inner-col\">\n<!-- ============================================================\n     SEZIONE ELEMENTI + COSTI \u2014 FONDAZIONE PREFABBRICATA\n     Pronto per WordPress \u2014 incolla in blocco HTML Personalizzato\n     ============================================================ -->\n\n<style>\n.fp-wrap {\n  position: relative;\n  width: 100vw;\n  left: 50%;\n  margin-left: -50vw;\n  background: #fffff;\n  font-family: sans-serif;\n  overflow: hidden;\n}\n\n.fp-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 100px 8vw;\n}\n\n\/* ---- SEZIONE 1: ELEMENTI ---- *\/\n.fp-sec-label {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: #C82800;\n  margin-bottom: 16px;\n}\n\n.fp-sec-title {\n  font-size: clamp(30px, 3.5vw, 50px);\n  font-weight: 900;\n  color: #11111;\n  text-transform: uppercase;\n  line-height: 1.05;\n  margin: 0 0 60px 0;\n}\n\n\/* ---- SCHEDE ELEMENTI ---- *\/\n.fp-tabs-row {\n  display: flex;\n  gap: 0;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  margin-bottom: 0;\n}\n\n.fp-tab-btn {\n  flex: 1;\n  background: none;\n  border: none;\n  border-bottom: 3px solid transparent;\n  padding: 18px 12px;\n  cursor: pointer;\n  font-family: sans-serif;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n color:black\n  transition: color 0.2s, border-color 0.2s;\n  text-align: center;\n}\n\n.fp-tab-btn:hover {\n  color: rgba(0,0,0,0.35);;\n}\n\n.fp-tab-btn.active {\n  color: #111;\n  border-bottom: 3px solid #C8281E;\n}\n\n.fp-panels-wrap {\n  position: relative;\n  min-height: 280px;\n}\n\n.fp-panel {\n  display: none;\n  padding: 50px 0 20px;\n  animation: fpFadeIn 0.35s ease;\n}\n\n.fp-panel.active {\n  display: flex;\n  align-items: flex-start;\n  gap: 60px;\n}\n\n@keyframes fpFadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.fp-panel-num {\n  font-size: clamp(60px, 7vw, 90px);\n  font-weight: 900;\n  color: #C8281E;\n  line-height: 1;\n  flex-shrink: 0;\n  min-width: 80px;\n  opacity: 0.9;\n}\n\n.fp-panel-body {\n  flex: 1;\n  padding-top: 6px;\n}\n\n.fp-panel-body h3 {\n  font-size: clamp(18px, 2.2vw, 26px);\n  font-weight: 800;\n  color: #111;\n  text-transform: uppercase;\n  margin: 0 0 18px 0;\n  line-height: 1.15;\n}\n\n.fp-panel-body p {\n  font-size: 15.5px;\n  line-height: 1.8;\n  color:black;\n  margin: 0;\n  max-width: 560px;\n}\n\n.fp-panel-tag {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: #C8281E;\n  border: 1px solid rgba(200,40,30,0.4);\n  border-radius: 3px;\n  padding: 4px 10px;\n  margin-bottom: 16px;\n}\n\n\/* ---- PROGRESS BAR ---- *\/\n.fp-progress-bar {\n  height: 2px;\n  background: rgba(255,255,255,0.07);\n  margin-top: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n.fp-progress-fill {\n  height: 100%;\n  background: #C8281E;\n  transition: width 0.4s ease;\n}\n\n\/* ---- SEPARATORE ---- *\/\n.fp-separator {\n  width: 100%;\n  height: 1px;\n  background: rgba(255,255,255,0.07);\n  margin: 80px 0;\n}\n\n\/* ---- SEZIONE 2: COSTI ---- *\/\n.fp-costs-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 2px;\n  background: rgba(255,255,255,0.06);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.fp-cost-block {\n  background: #111111;\n  padding: 48px 40px;\n}\n\n.fp-cost-block.highlight {\n  background: #C8281E;\n}\n\n.fp-cost-num {\n  font-size: clamp(52px, 6vw, 80px);\n  font-weight: 900;\n  color: #ffffff;\n  line-height: 1;\n  margin-bottom: 12px;\n}\n\n.fp-cost-label {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,0.5);\n  margin-bottom: 20px;\n}\n\n.fp-cost-block.highlight .fp-cost-label {\n  color: rgba(255,255,255,0.75);\n}\n\n.fp-cost-text {\n  font-size: 15px;\n  line-height: 1.75;\n  color: rgba(255,255,255,0.6);\n  max-width: 420px;\n}\n\n.fp-cost-block.highlight .fp-cost-text {\n  color: rgba(255,255,255,0.85);\n}\n\n.fp-cost-divider {\n  width: 36px;\n  height: 2px;\n  background: rgba(255,255,255,0.25);\n  margin: 0 0 24px 0;\n  border-radius: 1px;\n}\n\n.fp-cost-block.highlight .fp-cost-divider {\n  background: rgba(255,255,255,0.5);\n}\n\n\/* ---- BADGE LISTA ---- *\/\n.fp-badge-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-top: 32px;\n}\n\n.fp-badge {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,0.6);\n  border: 1px solid rgba(255,255,255,0.15);\n  border-radius: 3px;\n  padding: 6px 14px;\n}\n\n\/* ---- RESPONSIVE ---- *\/\n@media (max-width: 760px) {\n  .fp-costs-grid { grid-template-columns: 1fr; }\n  .fp-panel.active { flex-direction: column; gap: 20px; }\n  .fp-panel-num { font-size: 52px; }\n  .fp-tabs-row { overflow-x: auto; }\n  .fp-tab-btn { font-size: 10px; padding: 14px 8px; white-space: nowrap; }\n}\n<\/style>\n\n<div class=\"fp-wrap\">\n  <div class=\"fp-inner\">\n\n    <!-- SEZIONE 1: ELEMENTI -->\n    <div class=\"fp-sec-label\">Composizione Strutturale<\/div>\n    <h2 class=\"fp-sec-title\">Gli Elementi della<br>Fondazione Prefabbricata<\/h2>\n\n    <div class=\"fp-tabs-row\" id=\"fp-tabs\">\n      <button class=\"fp-tab-btn active\" onclick=\"fpSetTab(0)\">01 \u2014 Plinto<\/button>\n      <button class=\"fp-tab-btn\" onclick=\"fpSetTab(1)\">02 \u2014 Connessione<\/button>\n      <button class=\"fp-tab-btn\" onclick=\"fpSetTab(2)\">03 \u2014 Travi<\/button>\n      <button class=\"fp-tab-btn\" onclick=\"fpSetTab(3)\">04 \u2014 Rompitratta<\/button>\n    <\/div>\n\n    <div class=\"fp-progress-bar\">\n      <div class=\"fp-progress-fill\" id=\"fp-progress\" style=\"width:25%\"><\/div>\n    <\/div>\n\n    <div class=\"fp-panels-wrap\">\n\n      <div class=\"fp-panel active\" id=\"fp-panel-0\">\n        <div class=\"fp-panel-num\">01<\/div>\n        <div class=\"fp-panel-body\">\n          <span class=\"fp-panel-tag\">Elemento Base<\/span>\n          <h3>Il Plinto Prefabbricato<\/h3>\n          <p>Elemento di base dimensionato in stabilimento per garantire un perfetto scarico delle forze statiche e dinamiche, calcolato specificatamente in base alle pressioni geometriche del terreno di cantiere.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"fp-panel\" id=\"fp-panel-1\">\n        <div class=\"fp-panel-num\">02<\/div>\n        <div class=\"fp-panel-body\">\n          <span class=\"fp-panel-tag\">Giunto Strutturale<\/span>\n          <h3>Il Sistema di Connessione<br>tra Plinto e Pilastro<\/h3>\n          <p>Giunto strutturale ad altissima precisione che elimina le criticit\u00e0 dei getti di collegamento tradizionali, garantendo stabilit\u00e0 immediata e un vincolo d&#8217;incastro perfetto all&#8217;estremit\u00e0 inferiore.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"fp-panel\" id=\"fp-panel-2\">\n        <div class=\"fp-panel-num\">03<\/div>\n        <div class=\"fp-panel-body\">\n          <span class=\"fp-panel-tag\">Reticolo Portante<\/span>\n          <h3>Le Travi di Collegamento<\/h3>\n          <p>Componenti prefabbricati modulari a sviluppo orizzontale che collegano solidalmente i plinti, configurando un reticolo di fondazione iperstatico capace di resistere in modo eccellente alle spinte sismiche.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"fp-panel\" id=\"fp-panel-3\">\n        <div class=\"fp-panel-num\">04<\/div>\n        <div class=\"fp-panel-body\">\n          <span class=\"fp-panel-tag\">Se Necessario<\/span>\n          <h3>Il Plinto Rompitratta<\/h3>\n          <p>Unit\u00e0 integrativa inserita nei modelli di calcolo ingegneristici laddove le luci di campata o le distribuzioni asimmetriche dei carichi industriali lo richiedano per preservare l&#8217;equilibrio della struttura.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- NAVIGAZIONE FRECCE -->\n    <div style=\"display:flex; gap:12px; margin-top:32px;\">\n      <button onclick=\"fpPrev()\" style=\"background:none; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.6); padding:12px 20px; cursor:pointer; font-size:18px; border-radius:3px; font-family:sans-serif; transition:all 0.2s;\" onmouseover=\"this.style.borderColor='rgba(255,255,255,0.5)'; this.style.color='#fff';\" onmouseout=\"this.style.borderColor='rgba(255,255,255,0.2)'; this.style.color='rgba(255,255,255,0.6)';\">\u2190<\/button>\n      <button onclick=\"fpNext()\" style=\"background:none; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.6); padding:12px 20px; cursor:pointer; font-size:18px; border-radius:3px; font-family:sans-serif; transition:all 0.2s;\" onmouseover=\"this.style.borderColor='rgba(255,255,255,0.5)'; this.style.color='#fff';\" onmouseout=\"this.style.borderColor='rgba(255,255,255,0.2)'; this.style.color='rgba(255,255,255,0.6)';\">\u2192<\/button>\n      <span id=\"fp-counter\" style=\"font-size:12px; font-weight:700; letter-spacing:0.1em; color:rgba(255,255,255,0.3); align-self:center; margin-left:8px; font-family:sans-serif;\">1 \/ 4<\/span>\n    <\/div>\n\n    <div class=\"fp-separator\"><\/div>\n\n    <!-- SEZIONE 2: COSTI -->\n    <div class=\"fp-sec-label\">Efficienza Certificata<\/div>\n    <h2 class=\"fp-sec-title\" style=\"margin-bottom:48px;\">Una Fondazione<br>con Costi Certi<\/h2>\n\n    <div class=\"fp-costs-grid\">\n\n      <div class=\"fp-cost-block highlight\">\n        <div class=\"fp-cost-num\">90<span style=\"font-size:0.45em;\">%<\/span><\/div>\n        <div class=\"fp-cost-label\">Riduzione costi di cantiere<\/div>\n        <div class=\"fp-cost-divider\"><\/div>\n        <p class=\"fp-cost-text\">L&#8217;uso di una fondazione prefabbricata in cemento armato precompresso riduce fino al 90% i costi di cantiere: meno scavo, niente manodopera specializzata, zero oneri aggiuntivi per la sicurezza.<\/p>\n      <\/div>\n\n      <div class=\"fp-cost-block\">\n        <div class=\"fp-cost-num\" style=\"font-size:clamp(28px,3vw,42px); margin-bottom:18px; color:rgba(255,255,255,0.9);\">Costi fissi<br>gi\u00e0 in progetto<\/div>\n        <div class=\"fp-cost-label\">Produzione industrializzata<\/div>\n        <div class=\"fp-cost-divider\"><\/div>\n        <p class=\"fp-cost-text\">Gli elementi sono prodotti interamente nel nostro stabilimento con un procedimento standardizzato che consente di offrire prezzi precisi e definitivi fin dalla fase di progetto, senza sorprese in cantiere.<\/p>\n        <div class=\"fp-badge-row\">\n          <span class=\"fp-badge\">\u2713 Nessun sorprese<\/span>\n          <span class=\"fp-badge\">\u2713 Tempi certi<\/span>\n          <span class=\"fp-badge\">\u2713 Qualit\u00e0 garantita<\/span>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function () {\n  var current = 0;\n  var total = 4;\n\n  function fpSetTab(idx) {\n    var tabs = document.querySelectorAll('.fp-tab-btn');\n    var panels = document.querySelectorAll('.fp-panel');\n    var progress = document.getElementById('fp-progress');\n    var counter = document.getElementById('fp-counter');\n\n    tabs.forEach(function (t, i) { t.classList.toggle('active', i === idx); });\n    panels.forEach(function (p, i) { p.classList.toggle('active', i === idx); });\n\n    if (progress) progress.style.width = ((idx + 1) \/ total * 100) + '%';\n    if (counter) counter.textContent = (idx + 1) + ' \/ ' + total;\n    current = idx;\n  }\n\n  window.fpSetTab = fpSetTab;\n\n  window.fpNext = function () {\n    fpSetTab((current + 1) % total);\n  };\n\n  window.fpPrev = function () {\n    fpSetTab((current - 1 + total) % total);\n  };\n\n  var autoplay = setInterval(function () { window.fpNext(); }, 5000);\n\n  var wrap = document.querySelector('.fp-wrap');\n  if (wrap) {\n    wrap.addEventListener('mouseenter', function () { clearInterval(autoplay); });\n  }\n})();\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id613_ef1b16-89 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id613_ef1b16-89 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id613_ef1b16-89 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id613_ef1b16-89 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id613_ef1b16-89 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id613_ef1b16-89 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id613_ef1b16-89 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column613_98d1e3-6f > .kt-inside-inner-col,.kadence-column613_98d1e3-6f > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column613_98d1e3-6f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column613_98d1e3-6f > .kt-inside-inner-col{flex-direction:column;}.kadence-column613_98d1e3-6f > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column613_98d1e3-6f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column613_98d1e3-6f{position:relative;}@media all and (max-width: 1024px){.kadence-column613_98d1e3-6f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column613_98d1e3-6f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column613_98d1e3-6f\"><div class=\"kt-inside-inner-col\">\n<style data-wp-block-html=\"css\">\n\/* CONTENITORE PRINCIPALE SU SFONDO BIANCO *\/\n.seieffe-process-container {\n    background-color: #ffffff;\n    padding: 60px 20px;\n    max-width: 1200px;\n    margin: 0 auto;\n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    color: #111111;\n}\n\n\/* HEADER SEZIONE *\/\n.seieffe-process-header {\n    text-align: center;\n    max-width: 700px;\n    margin: 0 auto 50px auto;\n}\n.seieffe-badge-red {\n    color: #ff3333; \/* Rosso brand *\/\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: 2.5px;\n    display: block;\n    margin-bottom: 10px;\n}\n.seieffe-process-header h2 {\n    font-size: 34px;\n    font-weight: 800;\n    margin: 0 0 15px 0 !important;\n    letter-spacing: -0.5px;\n}\n.seieffe-process-header p {\n    color: #666670;\n    font-size: 16px;\n    line-height: 1.5;\n}\n\n\/* BARRA DI NAVIGAZIONE TIMELINE INTERATTIVA *\/\n.seieffe-timeline-nav {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    margin-bottom: 50px;\n    padding-bottom: 15px;\n}\n.timeline-nav-item {\n    flex: 1;\n    text-align: center;\n    cursor: pointer;\n    z-index: 5;\n    padding: 10px;\n    transition: all 0.3s ease;\n}\n.phase-number {\n    display: block;\n    font-size: 28px;\n    font-weight: 900;\n    color: #cccccc; \/* Grigio disattivato *\/\n    margin-bottom: 5px;\n    transition: color 0.3s ease;\n}\n.phase-title {\n    font-size: 14px;\n    font-weight: 700;\n    color: #666670;\n    transition: color 0.3s ease;\n}\n\n\/* STATO ATTIVO SULLA SELEZIONE (NERO E ROSSO) *\/\n.timeline-nav-item.active .phase-number {\n    color: #ff3333; \/* Diventa Rosso *\/\n}\n.timeline-nav-item.active .phase-title {\n    color: #111111; \/* Diventa Nero *\/\n}\n\n\/* LINEA DI PROGRESSO GRAFICA *\/\n.timeline-progress-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background-color: #f0f0f5; \/* Grigio chiaro *\/\n    border-radius: 2px;\n}\n.timeline-progress-fill {\n    height: 100%;\n    width: 33.33%; \/* Cambia dinamicamente via JS *\/\n    background-color: #ff3333;\n    border-radius: 2px;\n    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n\/* SEZIONE INTERATTIVA: SPLIT IN DUE COLONNE *\/\n.seieffe-phase-display {\n    display: flex;\n    flex-direction: row;\n    gap: 50px;\n    align-items: center;\n}\n\n\/* CORNICE IMMAGINE CON ANIMAZIONE TRANSIZIONE *\/\n.seieffe-image-frame {\n    flex: 1.1;\n    height: 450px;\n    border-radius: 12px;\n    overflow: hidden;\n    background-color: #f7f7fa;\n    box-shadow: 0 15px 40px rgba(0,0,0,0.08);\n}\n.seieffe-image-frame img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: opacity 0.3s ease-in-out, transform 0.4s ease;\n}\n.seieffe-image-frame img.fade-out {\n    opacity: 0;\n    transform: scale(0.98);\n}\n\n\/* BLOCCO TESTI FISSI E DINAMICI *\/\n.seieffe-text-frame {\n    flex: 0.9;\n}\n.phase-text-block {\n    display: none;\n    animation: fadeInSlide 0.5s ease forwards;\n}\n.phase-text-block.active {\n    display: block;\n}\n\n@keyframes fadeInSlide {\n    from { opacity: 0; transform: translateY(15px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.phase-text-block h3 {\n    font-size: 24px;\n    font-weight: 700;\n    color: #111111;\n    margin: 0 0 15px 0 !important;\n}\n.phase-text-block p {\n    color: #555560;\n    font-size: 15px;\n    line-height: 1.6;\n    margin-bottom: 25px;\n}\n\n\/* ELENCO PUNTATO CON DECORO ROSSO *\/\n.phase-bullet-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n.phase-bullet-list li {\n    font-size: 14px;\n    color: #33333a;\n    margin-bottom: 12px;\n    position: relative;\n    padding-left: 22px;\n    line-height: 1.4;\n}\n.phase-bullet-list li::before {\n    content: \"\u25a0\";\n    position: absolute;\n    left: 0;\n    top: 1px;\n    color: #ff3333; \/* Quadrotte rosse industriali *\/\n    font-size: 12px;\n}\n\n\/* ADATTAMENTO RESPONSIVE PER DISPOSITIVI MOBILI *\/\n@media (max-width: 850px) {\n    .seieffe-phase-display {\n        flex-direction: column;\n        gap: 30px;\n    }\n    .seieffe-image-frame {\n        width: 100%;\n        height: 320px;\n    }\n    .seieffe-timeline-nav {\n        overflow-x: auto;\n        white-space: nowrap;\n        justify-content: flex-start;\n        gap: 20px;\n    }\n    .timeline-nav-item {\n        flex: initial;\n        min-width: 150px;\n    }\n    .timeline-progress-bar {\n        display: none; \/* Rimuove la barra rigida su mobile *\/\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nfunction switchSeieffePhase(phaseNumber) {\n    \/\/ 1. Aggiorna lo stato attivo sulla Navbar dei pulsanti\n    const navItems = document.querySelectorAll('.timeline-nav-item');\n    navItems.forEach((item, index) => {\n        if (index === (phaseNumber - 1)) {\n            item.classList.add('active');\n        } else {\n            item.classList.remove('active');\n        }\n    });\n\n    \/\/ 2. Muove la barra di progresso rossa inferiore\n    const progressBar = document.getElementById('seieffe-progress');\n    if (progressBar) {\n        if (phaseNumber === 1) progressBar.style.width = '33.33%';\n        if (phaseNumber === 2) progressBar.style.width = '66.66%';\n        if (phaseNumber === 3) progressBar.style.width = '100%';\n    }\n\n    \/\/ 3. Gestisce lo scambio immagini con effetto dissolvenza incrociata (Fade)\n    const imgElement = document.getElementById('seieffe-phase-img');\n    if (imgElement) {\n        imgElement.classList.add('fade-out');\n\n        setTimeout(() => {\n            \/\/ Associa ad ogni fase il rispettivo URL reale dell'immagine\n            if (phaseNumber === 1) imgElement.src = 'https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione_1.jpg';\n            if (phaseNumber === 2) imgElement.src = 'https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione_2-1024x819-1.jpg';\n            if (phaseNumber === 3) imgElement.src = 'https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione_3.jpg';\n            \n            imgElement.classList.remove('fade-out');\n        }, 300); \/\/ Sincronizzato con i millisecondi del CSS\n    }\n\n    \/\/ 4. Mostra il blocco di testo corrispondente e nasconde gli altri\n    const textBlocks = document.querySelectorAll('.phase-text-block');\n    textBlocks.forEach((block, index) => {\n        if (index === (phaseNumber - 1)) {\n            block.classList.add('active');\n        } else {\n            block.classList.remove('active');\n        }\n    });\n}\n<\/script>\n\n<div class=\"seieffe-process-container\">\n    \n    <div class=\"seieffe-process-header\">\n        <span class=\"seieffe-badge-red\">IL NOSTRO PROCESSO<\/span>\n        <h2>Fasi di Posa delle Fondazioni Prefabbricate<\/h2>\n        <p>Segui le tre fasi principali che trasformano il trasporto logistico in una struttura industriale finita e autoportante.<\/p>\n    <\/div>\n\n    <!-- NAVBAR INTERATTIVA DELLA TIMELINE -->\n    <div class=\"seieffe-timeline-nav\">\n        <div class=\"timeline-nav-item active\" onclick=\"switchSeieffePhase(1)\">\n            <span class=\"phase-number\">01<\/span>\n            <span class=\"phase-title\">PRIMA: Logistica e Arrivo<\/span>\n        <\/div>\n        <div class=\"timeline-nav-item\" onclick=\"switchSeieffePhase(2)\">\n            <span class=\"phase-number\">02<\/span>\n            <span class=\"phase-title\">DURANTE: Posa e Orientamento<\/span>\n        <\/div>\n        <div class=\"timeline-nav-item\" onclick=\"switchSeieffePhase(3)\">\n            <span class=\"phase-number\">03<\/span>\n            <span class=\"phase-title\">DOPO: Elevazione Strutturale<\/span>\n        <\/div>\n        <!-- Linea di scorrimento rossa di background -->\n        <div class=\"timeline-progress-bar\">\n            <div class=\"timeline-progress-fill\" id=\"seieffe-progress\"><\/div>\n        <\/div>\n    <\/div>\n\n    <!-- CONTENUTO DELLE FASI (SPLIT IN DUE COLONNE) -->\n    <div class=\"seieffe-phase-display\">\n        \n        <!-- AREA IMMAGINE ANIMATA CON GLI URL REALI -->\n        <div class=\"seieffe-image-frame\">\n            <img decoding=\"async\" id=\"seieffe-phase-img\" src=\"https:\/\/test.okite.com\/wp-content\/uploads\/2026\/06\/fondazione_1.jpg\" alt=\"Fasi installazione fondazioni Seieffe\">\n        <\/div>\n\n        <!-- AREA DESCRIZIONE DETTAGLIATA -->\n        <div class=\"seieffe-text-frame\">\n            <div id=\"phase-desc-1\" class=\"phase-text-block active\">\n                <h3>Fase 1: Trasporto speciale e logistica di cantiere<\/h3>\n                <p>I manufatti strutturali, come il plinto a piramide tronca, vengono caricati su mezzi pesanti dedicati e posizionati su apposite culle di contenimento per garantire un trasporto in totale sicurezza.<\/p>\n                <ul class=\"phase-bullet-list\">\n                    <li>Arrivo in cantiere in tempi predefiniti senza imprevisti stoccaggio.<\/li>\n                    <li>Nessuna necessit\u00e0 di cassonature o preparazioni complesse in loco.<\/li>\n                    <li>Manufatto pronto immediatamente per il sollevamento idraulico.<\/li>\n                <\/ul>\n            <\/div>\n\n            <div id=\"phase-desc-2\" class=\"phase-text-block\">\n                <h3>Fase 2: Sollevamento con gru e posizionamento millimetrico<\/h3>\n                <p>Il plinto viene agganciato tramite catene d&#8217;acciaio ad alta resistenza alla gru mobile. Gli operai specializzati assistono e guidano manualmente la struttura fino alla sua esatta collocazione sul sottofondo di magrone fresco.<\/p>\n                <ul class=\"phase-bullet-list\">\n                    <li>Sistema di centraggio assistito per l&#8217;allineamento degli assi.<\/li>\n                    <li>Azzeramento dei tempi morti legati al getto in opera tradizionale.<\/li>\n                    <li>Massima sicurezza operativa per il personale a terra.<\/li>\n                <\/ul>\n            <\/div>\n\n            <div id=\"phase-desc-3\" class=\"phase-text-block\">\n                <h3>Fase 3: Assemblaggio dei pilastri e delle travi di collegamento<\/h3>\n                <p>Una volta posata la base, si procede all&#8217;innesto verticale dei pilastri all&#8217;interno del bicchiere autocentrante e al montaggio delle travi di collegamento per l&#8217;irrigidimento finale della struttura.<\/p>\n                <ul class=\"phase-bullet-list\">\n                    <li>Creazione di un nodo strutturale monolitico e iperstatico.<\/li>\n                    <li>Prosecuzione immediata dei lavori di elevazione del capannone.<\/li>\n                    <li>Infrastruttura finale ad altissima durabilit\u00e0 e resistenza sismica.<\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id613_96b365-95 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id613_96b365-95 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id613_96b365-95 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id613_96b365-95 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id613_96b365-95 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id613_96b365-95 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id613_96b365-95 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column613_09bd78-38 > .kt-inside-inner-col,.kadence-column613_09bd78-38 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column613_09bd78-38 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column613_09bd78-38 > .kt-inside-inner-col{flex-direction:column;}.kadence-column613_09bd78-38 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column613_09bd78-38 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column613_09bd78-38{position:relative;}@media all and (max-width: 1024px){.kadence-column613_09bd78-38 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column613_09bd78-38 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column613_09bd78-38\"><div class=\"kt-inside-inner-col\">\n<h1 class=\"wp-block-heading has-text-align-center has-medium-gray-color has-vivid-red-background-color has-text-color has-background has-link-color has-xx-large-font-size wp-elements-37e93ed3e7afb0ae8e40e32b345c156e\"><strong>L&#8217;evoluzione della posa in opera diventa realt\u00e0 interattiva. <\/strong><\/h1>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id613_9ce8d3-85 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id613_9ce8d3-85 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id613_9ce8d3-85 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id613_9ce8d3-85 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id613_9ce8d3-85 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id613_9ce8d3-85 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id613_9ce8d3-85 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column613_a6e0bc-96 > .kt-inside-inner-col,.kadence-column613_a6e0bc-96 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column613_a6e0bc-96 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column613_a6e0bc-96 > .kt-inside-inner-col{flex-direction:column;}.kadence-column613_a6e0bc-96 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column613_a6e0bc-96 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column613_a6e0bc-96{position:relative;}@media all and (max-width: 1024px){.kadence-column613_a6e0bc-96 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column613_a6e0bc-96 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column613_a6e0bc-96\"><div class=\"kt-inside-inner-col\">\n<style data-wp-block-html=\"css\">\n.seieffe-3d-wrapper {\n    position: relative;\n    width: 100%;\n    height: 550px;\n    margin: 30px 0;\n    clear: both;\n    background-color: #eef2f5;\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.08);\n}\n\n#canvas-container-3d { \n    width: 100%; \n    height: 100%; \n}\n\n.info-box-3d {\n    position: absolute;\n    z-index: 99;\n    top: 20px;\n    left: 20px;\n    background: rgba(255, 255, 255, 0.95);\n    padding: 15px;\n    border-radius: 6px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    max-width: 290px;\n}\n.info-box-3d h3 { margin: 0 0 5px 0 !important; font-size: 16px !important; color: #d32f2f !important; font-family: sans-serif; }\n.info-box-3d p { margin: 0 !important; font-size: 12px !important; color: #333333 !important; line-height: 1.4 !important; font-family: sans-serif; }\n\n.controls-hint-3d {\n    position: absolute;\n    z-index: 99;\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: rgba(0, 0, 0, 0.75);\n    color: white;\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 12px;\n    pointer-events: none;\n    white-space: nowrap;\n    font-family: sans-serif;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nfunction loadScript(url, callback) {\n    let script = document.createElement(\"script\");\n    script.type = \"text\/javascript\";\n    script.src = url;\n    script.onload = callback;\n    document.head.appendChild(script);\n}\n\n\/\/ Caricamento asincrono di Three.js e dei relativi controlli mouse\/touch\nloadScript(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\", function() {\n    loadScript(\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\", function() {\n        initSeieffeFondazioneInstallata();\n    });\n});\n\nfunction initSeieffeFondazioneInstallata() {\n    const container = document.getElementById('canvas-container-3d');\n    if (!container) return;\n\n    \/\/ 1. SCENA, EFFETTO NEBBIA E CAMERAMAN PROFESSIONALE\n    const scene = new THREE.Scene();\n    scene.background = new THREE.Color(0xf4f6f9); \/\/ Sfondo bianco\/grigio chiaro pulito per il sito\n    scene.fog = new THREE.FogExp2(0xf4f6f9, 0.02);\n\n    const camera = new THREE.PerspectiveCamera(35, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n    camera.position.set(12, 8, 15); \/\/ Angolazione ottimale per mostrare sia la base che lo sviluppo in altezza\n\n    const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: \"high-performance\" });\n    renderer.setSize(container.clientWidth, container.clientHeight);\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n    renderer.shadowMap.enabled = true;\n    renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n    renderer.toneMapping = THREE.ACESFilmicToneMapping; \/\/ Ottimizzazione resa cromatica cemento\n    renderer.toneMappingExposure = 1.1;\n    container.appendChild(renderer.domElement);\n\n    \/\/ INTERAZIONE UTENTE (Orbit Controls)\n    const controls = new THREE.OrbitControls(camera, renderer.domElement);\n    controls.enableDamping = true;\n    controls.dampingFactor = 0.05;\n    controls.maxPolarAngle = Math.PI \/ 2 - 0.05; \/\/ Impedisce di andare sotto la linea del terreno\n    controls.target.set(0, 2, 0); \/\/ Sposta il baricentro visivo sul nodo plinto-pilastro\n\n    \/\/ 2. SISTEMA DI ILLUMINAZIONE (Studio Costruzioni)\n    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n    scene.add(ambientLight);\n\n    const sunLight = new THREE.DirectionalLight(0xfffdf5, 1.2);\n    sunLight.position.set(20, 35, 15);\n    sunLight.castShadow = true;\n    sunLight.shadow.mapSize.width = 2048;\n    sunLight.shadow.mapSize.height = 2048;\n    sunLight.shadow.bias = -0.0001;\n    scene.add(sunLight);\n\n    \/\/ Luce d'accento azzurrata dal lato opposto per risaltare i volumi geometrici\n    const skyLight = new THREE.DirectionalLight(0xdbe7ff, 0.4);\n    skyLight.position.set(-15, 10, -15);\n    scene.add(skyLight);\n\n    \/\/ 3. PALETTE MATERIALI COMPLETA\n    const matGreyConcrete = new THREE.MeshStandardMaterial({ color: 0xbcbfca, roughness: 0.85 }); \/\/ Cemento Plinto\n    const matColumnConcrete = new THREE.MeshStandardMaterial({ color: 0xc6cbd6, roughness: 0.8 }); \/\/ Cemento Pilastro\/Travi\n    const matGround = new THREE.MeshStandardMaterial({ color: 0x867b70, roughness: 1.0 }); \/\/ Terreno di scavo compattato\n    const matSteel = new THREE.MeshStandardMaterial({ color: 0x333338, metalness: 0.8, roughness: 0.4 }); \/\/ Bulloneria\/Dettagli\n\n    \/\/ 4. MODELLAZIONE DEL TERRENO DI INSTALLAZIONE\n    const groundGeo = new THREE.BoxGeometry(40, 1, 40);\n    const ground = new THREE.Mesh(groundGeo, matGround);\n    ground.position.y = -0.5;\n    ground.receiveShadow = true;\n    scene.add(ground);\n\n    \/\/ Griglia ingegneristica di riferimento a terra\n    const grid = new THREE.GridHelper(26, 26, 0xa6b0c2, 0xd0d7e5);\n    grid.position.y = 0.01;\n    scene.add(grid);\n\n    \/\/ 5. COSTRUZIONE COMPLESSO STRUTTURALE INSTALLATO (Plinto + Pilastro + Travi)\n    const strutturaCompletaGroup = new THREE.Group();\n\n    \/\/ ELEMENTO A: La base a piramide tronca (Il Plinto Seieffe)\n    const baseGeo = new THREE.CylinderGeometry(1.4, 4.0, 1.6, 4); \n    const baseMesh = new THREE.Mesh(baseGeo, matGreyConcrete);\n    baseMesh.rotation.y = Math.PI \/ 4; \/\/ Allineamento perfetto con gli assi del capannone\n    baseMesh.position.y = 0.8;\n    baseMesh.castShadow = true;\n    baseMesh.receiveShadow = true;\n    strutturaCompletaGroup.add(baseMesh);\n\n    \/\/ ELEMENTO B: Il bicchiere di fondazione superiore\n    const bicchiereGeo = new THREE.BoxGeometry(1.3, 1.8, 1.3);\n    const bicchiereMesh = new THREE.Mesh(bicchiereGeo, matGreyConcrete);\n    bicchiereMesh.position.y = 2.5;\n    bicchiereMesh.castShadow = true;\n    bicchiereMesh.receiveShadow = true;\n    strutturaCompletaGroup.add(bicchiereMesh);\n\n    \/\/ ELEMENTO C: Il Pilastro Industriale Verticale (Installato e cementato nel bicchiere)\n    const pilastroGeo = new THREE.BoxGeometry(0.8, 8.0, 0.8);\n    const pilastroMesh = new THREE.Mesh(pilastroGeo, matColumnConcrete);\n    pilastroMesh.position.y = 1.6 + 4.0; \/\/ Inserito parzialmente nel bicchiere per continuit\u00e0 strutturale\n    pilastroMesh.castShadow = true;\n    pilastroMesh.receiveShadow = true;\n    strutturaCompletaGroup.add(pilastroMesh);\n\n    \/\/ Mensole corte di incastro sul pilastro (Dettaglio prefabbricati tipico Seieffe)\n    const mensolaGeo = new THREE.BoxGeometry(0.8, 0.6, 0.4);\n    const mensolaL = new THREE.Mesh(mensolaGeo, matColumnConcrete);\n    mensolaL.position.set(0, 6.5, 0.5);\n    mensolaL.castShadow = true;\n    const mensolaR = mensolaL.clone();\n    mensolaR.position.set(0, 6.5, -0.5);\n    strutturaCompletaGroup.add(mensolaL, mensolaR);\n\n    \/\/ ELEMENTO D: Travi di collegamento orizzontali (Irrigidimento di base)\n    const traveGeoX = new THREE.BoxGeometry(8.0, 0.7, 0.5);\n    const traveX1 = new THREE.Mesh(traveGeoX, matColumnConcrete);\n    traveX1.position.set(4.0, 0.75, 0); \/\/ Connessa al fianco del plinto\n    traveX1.castShadow = true;\n    traveX1.receiveShadow = true;\n    strutturaCompletaGroup.add(traveX1);\n\n    const traveGeoZ = new THREE.BoxGeometry(0.5, 0.7, 8.0);\n    const traveZ1 = new THREE.Mesh(traveGeoZ, matColumnConcrete);\n    traveZ1.position.set(0, 0.75, 4.0);\n    traveZ1.castShadow = true;\n    traveZ1.receiveShadow = true;\n    strutturaCompletaGroup.add(traveZ1);\n\n    \/\/ ELEMENTO E: Bulloneria strutturale e piastre metalliche angolari di serraggio\n    for(let i = -0.5; i <= 0.5; i += 1.0) {\n        const piastraGeo = new THREE.BoxGeometry(0.1, 0.4, 0.4);\n        const piastra = new THREE.Mesh(piastraGeo, matSteel);\n        piastra.position.set(0.66, 2.2, i);\n        strutturaCompletaGroup.add(piastra);\n    }\n\n    scene.add(strutturaCompletaGroup);\n\n    \/\/ 6. ANIMAZIONE ROTATORIA CINEMATICA (Vetrina di Prodotto)\n    const clock = new THREE.Clock();\n\n    function animate() {\n        requestAnimationFrame(animate);\n\n        \/\/ Se l'utente non interagisce manualmente con il mouse o touch,\n        \/\/ la telecamera ruota automaticamente in modo fluido attorno alla fondazione ultimata\n        if (controls.state === -1) {\n            const tempo = clock.getElapsedTime() * 0.15; \/\/ Velocit\u00e0 di rotazione calibrata\n            const raggio = 18; \/\/ Distanza della telecamera dal centro della struttura\n            \n            camera.position.x = Math.cos(tempo) * raggio;\n            camera.position.z = Math.sin(tempo) * raggio;\n            \/\/ Mantiene una leggera oscillazione verticale fluida per mostrare i dettagli dall'alto verso il basso\n            camera.position.y = 7 + Math.sin(tempo * 2) * 1.5; \n        }\n\n        controls.update();\n        renderer.render(scene, camera);\n    }\n\n    \/\/ Gestione del ridimensionamento dinamico (Layout fluido WordPress)\n    window.addEventListener('resize', function() {\n        camera.aspect = container.clientWidth \/ container.clientHeight;\n        camera.updateProjectionMatrix();\n        renderer.setSize(container.clientWidth, container.clientHeight);\n    });\n\n    animate();\n}\n<\/script>\n\n<div class=\"seieffe-3d-wrapper\">\n    <div class=\"info-box-3d\">\n        <h3>Seieffe Prefabbricati S.p.A.<\/h3>\n        <p>Il modello tridimensionale interattivo mostra il sistema di fondazione prefabbricata Seieffe nella sua configurazione finale di esercizio, evidenziando la perfetta integrazione e l'interconnessione monolitica di tutti gli elementi strutturali che compongono l'ossatura del fabbricato.<\/p>\n    <\/div>\n\n    <div class=\"controls-hint-3d\">Usa il mouse per ruotare la scena e vedere il montaggio da ogni angolazione<\/div>\n    <div id=\"canvas-container-3d\"><\/div>\n<\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id613_62774d-24 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id613_62774d-24 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id613_62774d-24 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id613_62774d-24 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id613_62774d-24 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id613_62774d-24 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id613_62774d-24 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column613_a647ba-a1 > .kt-inside-inner-col,.kadence-column613_a647ba-a1 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column613_a647ba-a1 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column613_a647ba-a1 > .kt-inside-inner-col{flex-direction:column;}.kadence-column613_a647ba-a1 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column613_a647ba-a1 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column613_a647ba-a1{position:relative;}@media all and (max-width: 1024px){.kadence-column613_a647ba-a1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column613_a647ba-a1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column613_a647ba-a1\"><div class=\"kt-inside-inner-col\">\n<style data-wp-block-html=\"css\">\n\/* \u2500\u2500 CONFIGURAZIONE CHIARA E COMPLETA SU TUTTA LA LARGHEZZA \u2500\u2500 *\/\n.sf-full-width-preventivo-wrapper {\n    --seieffe-red: #C8102E;\n    --seieffe-red-hover: #9A0B21;\n    --bg-sezione-chiaro: #F9FAFB; \/* Sfondo generale chiaro *\/\n    --bg-scheda-bianco: #FFFFFF;  \/* Sfondo scheda interno bianco *\/\n    --border-neutral: #D1D5DB;    \/* Bordo caselle di base neutro *\/\n    --text-dark: #111827;         \/* Nero\/Grigio scuro per testi *\/\n    --text-muted: #4B5563;        \/* Grigio per sottotitoli *\/\n    --text-label: #374151;        \/* Colore etichette campi *\/\n    \n    width: 100vw !important;\n    position: relative;\n    left: 50% !important;\n    right: 50% !important;\n    margin-left: -50vw !important;\n    margin-right: -50vw !important;\n    overflow-x: hidden;\n    padding: 120px 48px;\n    background-color: var(--bg-sezione-chiaro) !important; \/* Sfondo chiaro *\/\n    font-family: 'Inter', -apple-system, sans-serif;\n}\n\n.sf-full-width-preventivo-wrapper * { \n    box-sizing: border-box; \n    margin: 0; \n    padding: 0; \n}\n\n.sf-full-width-preventivo-wrapper .sf-display { \n    font-family: 'Barlow Condensed', sans-serif; \n    font-weight: 900; \n    text-transform: uppercase; \n    letter-spacing: -0.01em; \n}\n\n\/* CONTENITORE FLUIDO ACCENTRATO *\/\n.sf-preventivo-container-fluid {\n    max-width: 1200px;\n    margin: 0 auto;\n    width: 100%;\n}\n\n\/* LA SCHEDA BIANCA *\/\n.sf-clean-preventivo-card {\n    background-color: var(--bg-scheda-bianco) !important; \/* Scheda bianca *\/\n    border: 1px solid #E5E7EB;\n    border-radius: 16px;\n    padding: 60px 50px;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); \/* Ombra morbida e pulita *\/\n}\n\n\/* INTESTAZIONE SCHEDA E COLORAZIONE TITOLI *\/\n.sf-clean-card-header {\n    margin-bottom: 50px;\n    text-align: left;\n}\n.sf-form-tagline {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: .25em;\n    color: #6B7280;\n    display: block;\n    margin-bottom: 12px;\n}\n.sf-form-main-title {\n    font-size: clamp(34px, 5vw, 54px);\n    line-height: 1.05;\n    margin-bottom: 15px !important;\n}\n\/* Richiedi Nera *\/\n.sf-form-main-title .text-black {\n    color: var(--text-dark) !important;\n}\n\/* Preventivo Rossa *\/\n.sf-form-main-title .text-red {\n    color: var(--seieffe-red) !important;\n}\n.sf-form-red-line {\n    width: 60px;\n    height: 4px;\n    background-color: var(--seieffe-red);\n    margin: 15px 0 20px 0;\n    border-radius: 2px;\n}\n.sf-form-lead-text {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.65;\n    color: var(--text-muted);\n    max-width: 850px;\n}\n\n\/* DIVISIONI DEL FORM *\/\n.sf-clean-form-layout {\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n}\n.sf-form-section-block {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n.sf-section-subtitle {\n    font-size: 14px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--text-dark);\n    border-bottom: 1px solid #E5E7EB;\n    padding-bottom: 10px;\n    text-align: left;\n}\n\n\/* GRIGLIA CAMPI *\/\n.sf-form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 24px;\n}\n\n.sf-form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    text-align: left;\n}\n.sf-form-group.full-width-field {\n    width: 100%;\n}\n\n.sf-form-group label {\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-label);\n}\n\n\/* CASELLE DI TESTO DI BASE (SOLO BORDO) E COMPORTAMENTO HOVER\/FOCUS IN ROSSO *\/\n.sf-clean-form-layout input[type=\"text\"],\n.sf-clean-form-layout input[type=\"email\"],\n.sf-clean-form-layout input[type=\"tel\"],\n.sf-clean-form-layout textarea {\n    background-color: #FFFFFF !important; \/* Sfondo caselle bianco di base *\/\n    border: 1px solid var(--border-neutral); \/* Solo il bordo visibile neutro *\/\n    border-radius: 6px;\n    padding: 16px 20px;\n    color: var(--text-dark);\n    font-family: 'Inter', sans-serif;\n    font-size: 14.5px;\n    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);\n    width: 100%;\n}\n\n\/* Quando l'utente va sopra o seleziona le caselle, diventano rosse (bordo e ombra) *\/\n.sf-clean-form-layout input:hover,\n.sf-clean-form-layout textarea:hover,\n.sf-clean-form-layout input:focus,\n.sf-clean-form-layout textarea:focus {\n    outline: none;\n    border-color: var(--seieffe-red) !important; \/* Il bordo diventa rosso *\/\n    box-shadow: 0 0 10px rgba(200, 16, 46, 0.12); \/* Sfumatura rossa di contorno *\/\n}\n\n\/* INFORMATIVA PRIVACY E BOTTONE *\/\n.sf-form-action-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 40px;\n    margin-top: 10px;\n    padding-top: 30px;\n    border-top: 1px solid #E5E7EB;\n}\n\n.sf-form-privacy-consent {\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    max-width: 65%;\n    text-align: left;\n}\n.sf-form-privacy-consent input[type=\"checkbox\"] {\n    margin-top: 3px;\n    accent-color: var(--seieffe-red);\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    flex-shrink: 0;\n}\n.sf-form-privacy-consent label {\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--text-muted);\n    cursor: pointer;\n}\n\n\/* PULSANTE ROSSO DI INVIO *\/\n.sf-btn-form-submit {\n    background-color: var(--seieffe-red);\n    color: #ffffff;\n    border: none;\n    padding: 18px 40px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: .12em;\n    border-radius: 6px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 14px;\n    white-space: nowrap;\n    transition: background-color 0.25s, transform 0.2s;\n    box-shadow: 0 8px 20px rgba(200, 16, 46, 0.15);\n}\n\n.sf-btn-form-submit:hover {\n    background-color: var(--seieffe-red-hover);\n    transform: translateY(-2px);\n}\n\n.sf-btn-arrow-icon {\n    font-size: 16px;\n    font-weight: 900;\n    transition: transform 0.2s;\n}\n.sf-btn-form-submit:hover .sf-btn-arrow-icon {\n    transform: translateX(5px);\n}\n\n\/* RESPONSIVE PER APPARATI MOBILE *\/\n@media (max-width: 900px) {\n    .sf-full-width-preventivo-wrapper { padding: 80px 20px; }\n    .sf-clean-preventivo-card { padding: 40px 24px; }\n    .sf-form-fields-grid { grid-template-columns: 1fr; gap: 20px; }\n    .sf-form-action-footer { flex-direction: column; align-items: flex-start; gap: 30px; }\n    .sf-form-privacy-consent { max-width: 100%; }\n    .sf-btn-form-submit { width: 100%; justify-content: center; }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function() {\n    function caricaMotoreGsap(url, callback) {\n        if (typeof gsap !== \"undefined\") { callback(); return; }\n        let script = document.createElement(\"script\");\n        script.type = \"text\/javascript\";\n        script.src = url;\n        script.onload = callback;\n        document.head.appendChild(script);\n    }\n\n    caricaMotoreGsap(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\", function() {\n        let scriptST = document.createElement(\"script\");\n        scriptST.src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\";\n        scriptST.onload = function() {\n            gsap.registerPlugin(ScrollTrigger);\n            \n            \/\/ Apparizione controllata fluida quando l'utente raggiunge il modulo nello scorrimento della pagina\n            gsap.from('.sf-clean-preventivo-card', {\n                opacity: 0,\n                y: 40,\n                duration: 0.8,\n                ease: 'power2.out',\n                scrollTrigger: {\n                    trigger: '.sf-clean-preventivo-card',\n                    start: 'top 88%',\n                    once: true\n                }\n            });\n        };\n        document.head.appendChild(scriptST);\n    });\n})();\n<\/script>\n\n<div class=\"sf-full-width-preventivo-wrapper\">\n    <div class=\"sf-preventivo-container-fluid\">\n        \n        <div class=\"sf-clean-preventivo-card\">\n            \n            <!-- INTESTAZIONE CHIARA -->\n            <div class=\"sf-clean-card-header\">\n                <span class=\"sf-form-tagline\">UFFICIO TECNICO & COMMERCIALE<\/span>\n                <!-- Titolo con \"Richiedi\" in nero e \"Preventivo\" in rosso -->\n                <h2 class=\"sf-form-main-title sf-display\">\n                    <span class=\"text-black\">Richiedi<\/span> <span class=\"text-red\">Preventivo<\/span>\n                <\/h2>\n                <div class=\"sf-form-red-line\"><\/div>\n                <p class=\"sf-form-lead-text\">\n                    Compila i campi sottostanti per sottoporre il tuo progetto ai nostri ingegneri. Riceverai un'analisi preliminare e un piano di spesa preciso e definitivo per la tua struttura.\n                <\/p>\n            <\/div>\n\n            <!-- BLOCCO FORM -->\n            <form class=\"sf-clean-form-layout\" onsubmit=\"event.preventDefault(); alert('Richiesta inviata con successo all\\'Ufficio Tecnico Seieffe.');\">\n                \n                <!-- SEZIONE 1: DATI CONTATTO -->\n                <div class=\"sf-form-section-block\">\n                    <h4 class=\"sf-section-subtitle\">1. Informazioni di Contatto<\/h4>\n                    <div class=\"sf-form-fields-grid\">\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-nome\">Nome e Cognome *<\/label>\n                            <input type=\"text\" id=\"sf-nome\" placeholder=\"Es. Mario Rossi\" required>\n                        <\/div>\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-azienda\">Azienda \/ Societ\u00e0 *<\/label>\n                            <input type=\"text\" id=\"sf-azienda\" placeholder=\"Es. Seieffe Costruzioni S.r.l.\" required>\n                        <\/div>\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-email\">Email Aziendale *<\/label>\n                            <input type=\"email\" id=\"sf-email\" placeholder=\"Es. nome@azienda.it\" required>\n                        <\/div>\n                        <div class=\"sf-form-group\">\n                            <label for=\"sf-tel\">Telefono \/ Contatto Diretto *<\/label>\n                            <input type=\"tel\" id=\"sf-tel\" placeholder=\"Es. +39 0824 XXXXXX\" required>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- SEZIONE 2: DETTAGLI OPERA -->\n                <div class=\"sf-form-section-block\">\n                    <h4 class=\"sf-section-subtitle\">2. Specifiche del Progetto<\/h4>\n                    <div class=\"sf-form-group full-width-field\">\n                        <label for=\"sf-messaggio\">Descrizione dei lavori e Localit\u00e0 del Cantiere *<\/label>\n                        <textarea id=\"sf-messaggio\" rows=\"5\" placeholder=\"Indica le dimensioni di massima del fabbricato, la destinazione d'uso, l'area dello scavo o le specifiche classi di carico richieste se gi\u00e0 definite...\" required><\/textarea>\n                    <\/div>\n                <\/div>\n\n                <!-- SEZIONE 3: CONFERMA E INVIO -->\n                <div class=\"sf-form-action-footer\">\n                    <div class=\"sf-form-privacy-consent\">\n                        <input type=\"checkbox\" id=\"sf-privacy-check\" required>\n                        <label for=\"sf-privacy-check\">Acconsento al trattamento dei dati personali secondo la Privacy Policy di Seieffe Prefabbricati S.p.A.<\/label>\n                    <\/div>\n                    \n                    <button type=\"submit\" class=\"sf-btn-form-submit\">\n                        <span>Invia Richiesta Progetto<\/span>\n                        <span class=\"sf-btn-arrow-icon\">\u2192<\/span>\n                    <\/button>\n                <\/div>\n\n            <\/form>\n\n        <\/div>\n\n    <\/div>\n<\/div>\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Edilizia Industrializzata LE FONDAZIONI PREFABBRICATE Seieffe Prefabbricati produce la prima fondazione interamente prefabbricata in cemento armato precompresso (C.A.P.) o in C.A.V. Un\u2019innovazione che riduce i costi di cantiere, assicura qualit\u00e0 e durata dei materiali, velocizza i tempi di realizzazione rispetto alle tradizionali fondazioni in opera. La Fondazione Prefabbricata offre un\u2019alternativa efficace e sicura alle tradizionali [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":64,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/align-wide-fix-trasparent.php","meta":{"footnotes":""},"class_list":["post-613","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.okite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=613"}],"version-history":[{"count":30,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/613\/revisions"}],"predecessor-version":[{"id":878,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/613\/revisions\/878"}],"up":[{"embeddable":true,"href":"https:\/\/test.okite.com\/index.php?rest_route=\/wp\/v2\/pages\/64"}],"wp:attachment":[{"href":"https:\/\/test.okite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}