/* ===== Cassandra Capoferri — Portfolio · shared styles ===== */ :root{ --bg:#F6F8F6; --surface:#FFFFFF; --surface-2:#FAFBFA; --teal:#0E6E6E; --teal-d:#0A4F4F; --teal-dd:#08383A; --coral:#FF6B5C; --coral-d:#E9553F; --yellow:#F5B733; --ink:#1C2825; --muted:#5f6f69; --line:#dfe4e0; --shadow:0 18px 46px rgba(12,50,44,.13); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:88px} body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip} body.home{background-color:#F6F8F6;background-image:linear-gradient(rgba(14,110,110,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(14,110,110,.04) 1px,transparent 1px);background-size:26px 26px} h1,h2,h3,h4,.dsp{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.01em} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} p,li,.pb-desc,.lb-info p{-webkit-hyphens:manual;hyphens:manual} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* NAV — sticker chips (unique) */ nav{position:sticky;top:0;z-index:60;padding:16px 24px 0;transition:transform .38s cubic-bezier(.2,.8,.2,1),background .3s ease,padding .3s ease,box-shadow .3s ease} nav.nav-scrolled{background:rgba(246,248,246,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:11px;padding-bottom:11px;box-shadow:0 6px 22px rgba(20,40,35,.09)} nav.nav-hidden{transform:translateY(-125%)} nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;box-shadow:none;padding:0;max-width:1440px;width:100%;margin:0 auto} .logo{display:flex;align-items:center;gap:11px;font-family:'Poppins';font-weight:700;font-size:17px;color:var(--ink)} .logo .mark{width:40px;height:40px;border-radius:12px;background:var(--teal-dd);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700;box-shadow:0 6px 14px rgba(8,56,58,.25),inset 0 2px 2px rgba(255,255,255,.18)} .navlinks{display:flex;gap:7px;font-size:13.5px;font-weight:500;align-items:center} .navlinks a{background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:100px;box-shadow:0 4px 9px rgba(20,40,35,.06);transition:transform .2s,color .2s,background .2s,border-color .2s} .navlinks a:nth-child(odd){transform:rotate(-2.5deg)} .navlinks a:nth-child(even){transform:rotate(2deg)} .navlinks a:hover{transform:rotate(0) translateY(-2px);border-color:var(--teal);color:var(--teal)} .navlinks a.active{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:0 6px 14px rgba(255,107,92,.32);transform:rotate(0)} .navcta{background:var(--teal-dd);color:#fff;padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;box-shadow:0 6px 14px rgba(8,56,58,.22);transform:rotate(2deg);transition:.2s} .navcta:hover{transform:rotate(0) translateY(-2px)} .navtoggle{display:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:20px;cursor:pointer;padding:6px 10px} .btn.pri{background:var(--coral);color:#fff} .btn.pri:hover{background:var(--coral-d);transform:translateY(-2px)} .btn.sec{background:transparent;border:1.5px solid var(--teal);color:var(--teal)} .btn.sec:hover{background:var(--teal);color:#fff} @keyframes spin{to{transform:rotate(360deg)}} /* SECTION SHELL */ section{padding:78px 0} @keyframes spin{to{transform:rotate(360deg)}} @keyframes scrollzoom{from{opacity:0;transform:scale(1.55)}to{opacity:1;transform:scale(1)}} @keyframes blink{50%{opacity:0}} @keyframes twfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* sfondo home stile Apple: UN unico gradiente uniforme su tutta la pagina, nessuno stacco */ body.home{background:#ffffff;min-height:100vh} #categorias{position:relative;overflow:hidden} #categorias .wrap{position:relative;z-index:2} .catcard.light .num{color:rgba(20,50,45,.22)} .catcard.light .go{background:var(--teal-dd)} /* PROJECT DETAIL (Ourvita-style brand board) */ .proj{padding:20px 0 80px} .proj .layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start} .tile{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--surface);position:relative;cursor:pointer;transition:.25s} .tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .tile img{width:100%;height:100%;object-fit:cover} .tile.contain{background:var(--surface-2)} .tile.contain img{object-fit:contain;padding:14px} .tile .lbl{position:absolute;left:12px;top:12px;background:rgba(11,26,34,.82);color:#fff;font-size:11px;font-weight:600;letter-spacing:.05em;padding:5px 10px;border-radius:7px} /* SKILLS (home) — brand app icons + decorations */ #skills{position:relative;overflow:hidden} body.home #skills{background:transparent} .deco.dots{background-image:radial-gradient(var(--teal) 2px,transparent 2px);background-size:22px 22px;opacity:.35} .deco.circle{border-radius:50%;background:var(--teal-dd)} @media(max-width:720px){.deco.circle,.deco.ring{display:none}} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;padding-bottom:20px} .card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:18px;overflow:hidden;cursor:pointer;transition:.26s;backdrop-filter:blur(8px)} .card:hover{transform:translateY(-6px);background:rgba(255,255,255,.16)} .card .thumb{aspect-ratio:1;overflow:hidden;background:#0c3a3a;position:relative} .card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .card:hover .thumb img{transform:scale(1.06)} .card .meta{padding:15px 17px 17px} .card .tag{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)} .card .meta b{font-size:16.5px;font-weight:600;display:block;margin:3px 0 2px} .card .meta small{color:#bfe3de;font-size:12.5px} /* ===== CASE-STUDY pages (Tungku style, light) ===== */ .cases{background:#fff;color:var(--ink)} .cases nav .wrap{background:transparent} .alt-cases .pbanner .pb-inner{max-width:1180px} /* Branding · elementos más grandes y proporcionados al ancho */ .alt-cases .pbanner .pb-title h2{font-size:clamp(28px,3.3vw,43px)} .alt-cases .pbanner .pb-desc{font-size:clamp(12px,0.82vw,13.5px);max-width:56ch} .alt-cases .pbanner .pb-meta{font-size:14px} @media(min-width:861px){ .alt-cases .pbanner .pb-grid{grid-template-rows:clamp(130px,11vw,190px) clamp(180px,16vw,264px)} .alt-cases .pbanner .pb-grid.g2{grid-template-rows:clamp(120px,10vw,174px) clamp(190px,17vw,280px)} .alt-cases .pbanner .pb-grid.g3{grid-template-rows:clamp(150px,13vw,218px) 40px clamp(120px,11vw,178px)} .alt-cases .pbanner .pb-grid.g4{grid-template-rows:clamp(150px,13vw,217px) 42px clamp(120px,11vw,177px)} } .bento{display:flex;flex-wrap:wrap;gap:12px} .bento .b{--ar:1.5;flex:var(--ar) 1 calc(var(--ar) * 240px);border-radius:14px;overflow:hidden;position:relative;cursor:pointer;background:var(--surface-2);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .6s ease,box-shadow .3s} .bento .b:hover{transform:translateY(-4px);box-shadow:var(--shadow)} /* ALTERNATING case theme (branding): light-grid / dark-green full-bleed */ body.alt-cases{background:#ffffff} .bento .b img,.bento .b video{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;display:block} .bento .b.vid::after{content:"▶";position:absolute;right:12px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--teal);display:grid;place-items:center;font-size:13px;pointer-events:none;transition:.2s} .bento .b.vid:hover::after{opacity:0} /* inline phone carousel */ .b.phonecar{background:linear-gradient(165deg,#12403a,#081a17);cursor:default;padding:22px 16px} @media(max-width:820px){.bento .b{flex-basis:calc(var(--ar) * 190px)}} @media(max-width:520px){.bento .b{flex-basis:calc(var(--ar) * 150px)}} /* FOOTER */ footer{background:var(--teal-dd);color:#eafaf6;padding:0} footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:15px 24px} footer .copyr{margin:0;color:#7fb8ae;font-size:12.5px} footer .foot-links{display:flex;gap:10px;align-items:center} footer .foot-links a{font-size:13px;font-weight:600;color:#eafaf6;border:1px solid rgba(255,255,255,.28);padding:9px 16px;border-radius:8px;transition:transform .2s,background .2s,border-color .2s} footer .foot-links a.pri{background:var(--coral);border-color:var(--coral);color:#fff} footer .foot-links a:hover{transform:translateY(-2px)} /* LIGHTBOX */ .lb{position:fixed;inset:0;background:rgba(10,36,31,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;z-index:200;padding:3.5vh 3.5vw} .lb.open{display:flex} .lb-card{position:relative;background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.22);border-radius:26px;box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 40px rgba(255,255,255,.05);padding:clamp(28px,3vw,46px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3vw,48px);align-items:center;width:100%;max-width:1520px} .lb-media{display:flex;align-items:center;justify-content:center;min-width:0} .lb-media img,.lb-media video{max-width:100%;max-height:88vh;object-fit:contain;border-radius:18px;box-shadow:0 34px 74px rgba(0,0,0,.55)} .lb-media video{width:100%;background:#000} /* Vídeo ampliado: vídeo grande arriba, texto debajo */ .lb-card.isvideo{grid-template-columns:1fr;gap:22px;max-width:1320px} .lb-card.isvideo .lb-media video{max-height:80vh} .lb-card.isvideo .lb-info{text-align:center} .lb-card.isvideo .lb-info p{max-width:74ch;margin:0 auto} /* imagen sola a pantalla completa (documentación técnica) */ .lb-card.imgonly{grid-template-columns:1fr;gap:0;max-width:96vw;background:transparent;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none} .lb-card.imgonly .lb-info{display:none} .lb-card.imgonly .lb-media img{max-width:96vw;max-height:92vh;border-radius:6px} /* X siempre visible (fijada a la ventana, con círculo) aunque la imagen sea muy ancha */ .lb-card.imgonly .close{position:fixed;top:20px;right:24px;width:46px;height:46px;border-radius:50%; background:rgba(11,26,22,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); display:grid;place-items:center;font-size:22px;line-height:1;z-index:240;opacity:1} .lb-card.imgonly .close:hover{background:var(--teal);transform:scale(1.08)} .lb-info{color:#fff;min-width:0} .lb-info h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(30px,3.4vw,44px);color:#fff;margin-bottom:20px;line-height:1.14} .lb-info p{font-size:clamp(17px,1.35vw,20px);line-height:1.8;color:rgba(255,255,255,.92);max-width:52ch} body.lb-open .pb-img-cta{opacity:0!important} .lb .close{position:absolute;top:14px;right:18px;background:none;border:none;color:#fff;font-size:26px;font-weight:700;cursor:pointer;line-height:1;z-index:210;opacity:.85;transition:opacity .2s,transform .2s} .lb .close:hover{opacity:1;transform:scale(1.14)} @media(max-width:760px){ .lb{padding:18px} .lb-card{grid-template-columns:1fr;gap:22px;max-height:88vh;overflow:auto;align-content:start} .lb-media img{max-height:46vh} } @media(max-width:900px){ .skill-grid,.grid{grid-template-columns:repeat(2,1fr)} .navlinks{display:none;position:absolute;top:66px;right:24px;left:24px;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;gap:9px;box-shadow:var(--shadow)} .navlinks a{transform:none!important;text-align:center} .navlinks.show{display:flex} .navtoggle{display:block} .navcta{display:none} } @media(max-width:560px){ .skill-grid,.catcards,.grid{grid-template-columns:1fr} } /* ===== Project banner (custom case) ===== */ .pbanner{background:#597a72;color:#fff;padding:64px 0} .pb-inner{max-width:1380px;margin:0 auto;padding:0 24px} .pb-head{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;margin-bottom:30px} .pb-title{display:flex;flex-direction:column;gap:16px} .pb-title h2{order:-1} .pb-topline{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .pb-num{display:none} .pb-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15.5px;color:rgba(255,255,255,.65)} .pb-meta i{font-style:normal;color:#fff;font-weight:600} .pb-meta .pb-lbl{font-weight:400;color:inherit} .pb-meta i .fl{font-weight:400;font-style:italic} .pb-title h2{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);color:#fff;margin:0;line-height:1.04} .pb-desc{font-size:16px;line-height:1.6;color:rgba(255,255,255,.82);max-width:52ch;margin:6px 0 0} .pb-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:clamp(150px,17vw,215px) clamp(205px,23vw,300px);gap:14px; grid-template-areas: "flag logo logo logo logo menu menu menu vt vt vt vt" "vv vv vv vv vv door door door box box box box";} .pb-tile{position:relative;border-radius:16px;overflow:hidden;background:#0a2a23;box-shadow:0 12px 30px rgba(0,0,0,.22)} .pb-tile img,.pb-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .pb-tile.logo{grid-area:logo;background:#262626;cursor:pointer} .pb-tile.logo img{object-fit:contain;padding:16px} .pb-tile.menu{grid-area:menu;cursor:pointer} .pb-tile.door{grid-area:door;cursor:pointer} .pb-tile.box{grid-area:box;cursor:pointer} .pb-tile.flag{grid-area:flag;background:linear-gradient(#2e8b57 0 33.33%,#f4f4f2 33.33% 66.66%,#c0392b 66.66% 100%)} .pb-tile.vid{grid-area:vt} .pb-tile.vid.two{grid-area:vv} .pb-cap{display:none} .pb-img-cta{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(11,26,22,.55);color:#fff;display:grid;place-items:center;font-size:15px;opacity:0;transition:.25s} .pb-tile.logo:hover .pb-img-cta,.pb-tile.menu:hover .pb-img-cta,.pb-tile.door:hover .pb-img-cta,.pb-tile.box:hover .pb-img-cta{opacity:1} .pb-tile img{transition:transform .55s cubic-bezier(.2,.8,.2,1)} .pb-tile.logo:hover img,.pb-tile.menu:hover img,.pb-tile.door:hover img,.pb-tile.box:hover img{transform:scale(1.05)} @media(max-width:860px){ .pb-head{grid-template-columns:1fr;gap:16px;align-items:start} .pb-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:170px; grid-template-areas: "logo menu" "door door" "vt vt" "vv vv" "box box" "flag flag";} .pb-tile.door{grid-row:span 2} .pb-tile.flag{min-height:54px} } @media(max-width:520px){ .pb-grid{grid-template-columns:1fr;grid-template-areas:"logo" "menu" "door" "vt" "vv" "box" "flag"} .pb-tile.door{grid-row:auto;min-height:340px} } /* ===== Project banner · LIGHT variant (quadretti) ===== */ .pbanner.light{background:#F6F5F3;color:var(--ink)} .pbanner.light + .pbanner.light{margin-top:16px} body.alt-cases .pbanner.light:last-of-type{margin-bottom:16px} /* tinta piatta a bassa opacità legata al brand + accento (--acc) per linea e puntino */ .pbanner.light.bp1{background:#FBF4E6;--acc:#F2A81E;--bpbg:#FBF4E6} .pbanner.light.bp2{background:#FBEEE6;--acc:#E8621F;--bpbg:#FBEEE6} .pbanner.light.bp3{background:#EDF1F8;--acc:#22439C;--bpbg:#EDF1F8} .pbanner.light.bp4{background:#FBEEE8;--acc:#E0582A;--bpbg:#FBEEE8} .pbanner.light.bp5{background:#E9F2EF;--acc:#12817D;--bpbg:#E9F2EF} .pbanner.light.bp6{background:#FAEDEA;--acc:#C0392B;--bpbg:#FAEDEA} .pbanner.light.bp7{background:#F5F1E9;--acc:#0E6E6E;--bpbg:#F5F1E9} .pbanner.light.bp8{background:#FAECE9;--acc:#D6392E;--bpbg:#FAECE9} /* linea verticale spezzata (linea · punto · linea) all'altezza del titolo */ .alt-cases .pbanner.light .pb-inner{position:relative} .pbanner.light .pb-inner::before{content:"";position:absolute;left:-21px;top:0;bottom:0;width:2px;background:var(--acc,#ccc)} .pbanner.light .pb-head h2{position:relative} .pbanner.light .pb-head h2::before{content:"";position:absolute;left:-44px;top:50%;width:13px;height:13px;border-radius:50%;background:var(--acc,#ccc);transform:translate(-50%,-50%);box-shadow:0 0 0 7px var(--bpbg,#F6F5F3)} .pbanner.light .pb-num{color:var(--teal-dd)} .pbanner.light .pb-title h2{color:var(--teal-dd)} .pbanner.light .pb-meta{color:#5f6f69} .pbanner.light .pb-meta i{color:var(--ink)} .pbanner.light .pb-desc{color:#3b4a45} /* passaggi chiave del progetto: piu' scuri e in grassetto, per una lettura rapida di cosa ho fatto in ogni caso */ .pb-desc b,.pb-desc strong{font-weight:700;color:var(--teal-dd)} .pbanner:not(.light) .pb-desc b,.pbanner:not(.light) .pb-desc strong{color:#fff} /* testo giustificato con ultima riga normale */ .alt-cases .pbanner .pb-desc{text-align:justify;text-align-last:left} body.alt-cases #lb .lb-info p{text-align:justify;text-align-last:left} .pbanner.light .pb-tile{box-shadow:0 14px 30px rgba(20,50,44,.12)} /* Layout 02 grid */ .pb-grid.g2{grid-template-columns:repeat(12,1fr);grid-template-rows:clamp(120px,14vw,185px) clamp(200px,23vw,300px);gap:14px; grid-template-areas: "logo logo logo logo pal mood mood mood mood mood mood mood" "wvid wvid wvid wvid wvid mood mood mood mood mood mood mood";} .pb-tile.mood{grid-area:mood} .pb-tile.wvid{grid-area:wvid} .pb-tile.pal{grid-area:pal} .pbanner.light .pb-tile.pal{background:linear-gradient(#0E2A2F 0 33.34%,#F7F3EC 33.34% 66.67%,#D4B06A 66.67% 100%)} .pb-grid.g2 .pb-tile.logo{background:#001D26} .pb-grid.g2 .pb-tile.logo img{padding:24px} .pb-grid.g2 .pb-tile.wvid{background:#fff} .pb-grid.g2 .pb-tile.mood{background:#0E2A2F} .pb-grid.g2 .pb-tile.mood img{object-fit:contain} @media(max-width:860px){ .pb-grid.g2{grid-template-columns:repeat(5,1fr);grid-template-rows:none;grid-auto-rows:150px; grid-template-areas: "logo logo logo logo pal" "wvid wvid wvid wvid wvid" "mood mood mood mood mood" "mood mood mood mood mood";} } @media(max-width:520px){ .pb-grid.g2{grid-template-columns:repeat(5,1fr);grid-template-areas:"logo logo logo logo pal" "wvid wvid wvid wvid wvid" "mood mood mood mood mood" "mood mood mood mood mood"} } /* ===== Layout 03 grid (dark) ===== */ .pb-grid.g3{grid-template-columns:repeat(12,1fr);grid-template-rows:clamp(185px,21vw,265px) 38px clamp(155px,18vw,215px);gap:14px; grid-template-areas: "logo logo logo vjar vjar vjar vjar vjar vjar cat cat cat" "pal pal pal vjar vjar vjar vjar vjar vjar cat cat cat" "mvid mvid mvid phon phon phon jars jars jars cat cat cat";} .pb-tile.vjar{grid-area:vjar} .pb-tile.cat{grid-area:cat} .pb-tile.mvid{grid-area:mvid} .pb-tile.phon{grid-area:phon} .pb-tile.jars{grid-area:jars} .pb-grid.g3 .pb-tile.logo{background:#fff} .pb-grid.g3 .pb-tile.logo img{object-fit:contain;padding:16px} .pb-grid.g3 .pb-tile.pal{background:linear-gradient(90deg,#3f9b46 0 20%,#8cc63f 20% 40%,#f4c81f 40% 60%,#ef8022 60% 80%,#cf3b2e 80% 100%)} @media(max-width:860px){ .pb-grid.g3{grid-template-columns:repeat(6,1fr);grid-template-rows:none;grid-auto-rows:150px; grid-template-areas: "logo logo logo vjar vjar vjar" "pal pal pal vjar vjar vjar" "mvid mvid mvid cat cat cat" "phon phon phon cat cat cat" "jars jars jars cat cat cat";} .pb-grid.g3 .pb-tile.pal{min-height:34px} } @media(max-width:520px){ .pb-grid.g3{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:150px; grid-template-areas: "logo logo" "pal pal" "vjar vjar" "mvid mvid" "phon jars" "cat cat" "cat cat";} .pb-grid.g3 .pb-tile.pal{min-height:34px} } /* ===== Layout 04 grid · Estalia ===== */ .pb-grid.g4{grid-template-columns:repeat(12,1fr);grid-template-rows:clamp(180px,20vw,248px) 40px clamp(150px,17vw,205px);gap:14px; grid-template-areas: "evi2 evi2 evi2 evi2 logo logo logo logo evid evid evid evid" "evi2 evi2 evi2 evi2 pal pal pal pal evid evid evid evid" "neg neg neg van van van maz maz maz lata lata lata";} .pb-tile.evid{grid-area:evid} .pb-tile.evid2{grid-area:evi2} .pb-tile.neg{grid-area:neg} .pb-tile.van{grid-area:van} .pb-tile.maz{grid-area:maz} .pb-tile.lata{grid-area:lata} .pb-grid.g4 .pb-tile.logo{background:#fff} .pb-grid.g4 .pb-tile.logo img{object-fit:contain;padding:5px} .pb-grid.g4 .pb-tile.pal{background:linear-gradient(90deg,#0f2f2c 0 25%,#12817d 25% 50%,#1fb6b0 50% 75%,#141414 75% 100%)} .pb-tile.neg:hover .pb-img-cta,.pb-tile.van:hover .pb-img-cta,.pb-tile.maz:hover .pb-img-cta,.pb-tile.lata:hover .pb-img-cta{opacity:1} .pb-tile.neg:hover img,.pb-tile.van:hover img,.pb-tile.maz:hover img,.pb-tile.lata:hover img{transform:scale(1.05)} @media(max-width:860px){ .pb-grid.g4{grid-template-columns:repeat(6,1fr);grid-template-rows:none;grid-auto-rows:150px; grid-template-areas: "evi2 evi2 evi2 evid evid evid" "logo logo logo pal pal pal" "neg neg neg van van van" "maz maz maz lata lata lata";} } @media(max-width:520px){ .pb-grid.g4{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:150px; grid-template-areas: "evi2 evid" "logo logo" "pal pal" "neg van" "maz lata";} .pb-grid.g4 .pb-tile.pal{min-height:34px} } /* ===== Layout 05 · Franchi & Kim (flex + aspect-ratio = zero crop) ===== */ .pb-grid.g5{display:flex;gap:16px;align-items:stretch} .g5c{display:flex;flex-direction:column;gap:16px;min-width:0} .g5-left{flex:0 0 43%} .g5-center{flex:0 0 30%} .g5-right{flex:1 1 0;min-width:0} .g5-top{display:flex;gap:16px;flex:1 1 auto;min-height:0} .g5-top .pb-tile.logo{flex:1 1 auto;min-width:0} .g5-top .pb-tile.nlflag{flex:0 0 22%} .pb-grid.g5 .pb-tile.colo{aspect-ratio:1376/768} .pb-grid.g5 .pb-tile.imba{aspect-ratio:1400/933} .pb-grid.g5 .pb-tile.brou{aspect-ratio:1264/848} .pb-grid.g5 .pb-tile.movi{flex:1 1 auto;min-height:0} .pb-grid.g5 .pb-tile.logo{background:#fff} .pb-grid.g5 .pb-tile.logo img{object-fit:contain;padding:14px} .pb-tile.nlflag{background:linear-gradient(#AE1C28 0 33.33%,#fff 33.33% 66.66%,#21468B 66.66% 100%)} .pb-tile.colo:hover .pb-img-cta,.pb-tile.imba:hover .pb-img-cta,.pb-tile.brou:hover .pb-img-cta{opacity:1} .pb-tile.colo:hover img,.pb-tile.imba:hover img,.pb-tile.brou:hover img{transform:scale(1.05)} @media(max-width:860px){ .pb-grid.g5{flex-direction:column} .g5-left,.g5-center,.g5-right{flex:1 1 auto;width:100%} .g5-top{flex:0 0 auto} .g5-top .pb-tile.logo{aspect-ratio:3/1} .pb-grid.g5 .pb-tile.movi{aspect-ratio:4/5} } /* visual derecho: mapa mundi punteado (baja opacidad) + tile */ /* la card queda dentro; solo el mapa sangra hasta el borde derecho de la página */ .dt-head-visual{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:480px} .dt-map{position:absolute;top:-80px;left:-110px;right:min(0px,calc(560px - 50vw));bottom:-70px; background:url("img/dt/worldmap_hero.png") right center/contain no-repeat;opacity:.5;pointer-events:none} .dt-stats{position:relative;z-index:1;width:100%;max-width:520px; background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.7);border-radius:24px;padding:clamp(14px,1.5vw,20px); display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,14px);box-shadow:0 24px 50px rgba(20,50,44,.16)} @media(max-width:960px){.dt-map{right:0}} /* botones de sección (bajo el hero) — una línea, píldoras, verde agua */ .dt-secnav{display:flex;flex-wrap:wrap;gap:2px 0;align-items:center;margin-top:18px;justify-content:flex-start;position:static;padding:0;z-index:auto} .dt-secnav a{background:none;color:var(--ink);font-family:'Poppins',sans-serif;font-size:clamp(12px,1vw,15px);font-weight:500;padding:2px 26px 2px 0;border-radius:0;position:relative;transition:color .2s;white-space:nowrap} .dt-secnav a:not(:last-child)::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--coral)} .dt-secnav a:hover{background:none;color:var(--teal);transform:none} @media(max-width:820px){.dt-secnav{flex-wrap:wrap}} .dt-stat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(15px,1.6vw,20px)} .dt-stat .ic{width:46px;height:46px;border-radius:50%;background:rgba(14,110,110,.10);color:var(--teal);display:grid;place-items:center;flex:none;margin-top:2px} .dt-stat .ic svg{width:24px;height:24px} .dt-stat .ic .gly{font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:var(--teal);letter-spacing:-1px} .dt-stat .tx{min-width:0} .dt-stat b{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(23px,2.4vw,31px);color:var(--teal);line-height:1;display:block} .dt-stat .lbl{font-size:13px;color:var(--ink);font-weight:700;margin-top:4px;display:block;line-height:1.2} @media(max-width:960px){.dt-head-visual{min-height:0}.dt-stats{margin-top:20px}.dt-globe,.dt-arc,.dt-map{display:none}} @media(max-width:480px){.dt-stats{grid-template-columns:1fr}} /* Fondo verde oscuro + banners largos a ancho completo */ .dt-zone{background:transparent;padding:40px 0 52px;margin-top:10px} /* cada sección = caja "liquid glass" redondeada flotando sobre el verde */ .dtsec{background:transparent;padding:0 clamp(16px,3vw,40px);margin-bottom:22px} /* Modelado 3D — layout a fasce piene: testo a sx, pannello media a dx */ body.p3d{background:#ffffff} .p3d .dtsec{padding:0;margin-bottom:8px;max-width:none} .p3d .dtsec:last-child{margin-bottom:0} .p3d .dtbanner{--lx:clamp(24px,4.5vw,80px);max-width:none;margin:0;border:0;border-radius:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;background:#f4f7f6; grid-template-columns:clamp(210px,21vw,300px) 1fr;gap:clamp(24px,3.4vw,52px);align-items:center; padding:clamp(24px,3.2vw,44px) clamp(40px,6vw,104px)} .p3d #sec-producto .dtbanner{background:#f1f6f3;--bandbg:#f1f6f3;--acc:#4e988a} .p3d #sec-ambientes .dtbanner{background:#f1f6f3;--bandbg:#f1f6f3;--acc:#4e988a} .p3d #sec-packaging .dtbanner{background:#f1f6f3;--bandbg:#f1f6f3;--acc:#4e988a} .p3d .dtsec + .dtsec .dtbanner{box-shadow:inset 0 1px 0 rgba(20,50,44,.07)} /* linea verticale + puntino all'altezza del titolo (stile branding) */ .p3d .dtbanner::before{content:"";position:absolute;left:var(--lx);top:clamp(22px,3vw,42px);bottom:clamp(22px,3vw,42px);width:2px;background:var(--acc,var(--teal));opacity:.7;mix-blend-mode:normal;border-radius:0;z-index:1;pointer-events:none} .p3d .dtbanner::after{content:"";position:absolute;left:calc(var(--lx) + 1px);top:38%;width:13px;height:13px;border-radius:50%;background:var(--acc,var(--teal));transform:translate(-50%,-50%);box-shadow:0 0 0 5px var(--bandbg,#f4f7f6);opacity:1;mix-blend-mode:normal;z-index:2;pointer-events:none} .p3d .dtb-txt{padding-left:clamp(14px,1.8vw,30px)} .p3d .dtb-txt h2{color:var(--teal-dd)} .p3d .dtb-txt p{color:#5f6f69;text-align:justify;text-align-last:left} .p3d .dtnum{display:none} .p3d .dtb-rule{background:var(--teal)} .p3d .dtb-rule::after{background:var(--coral)} /* tile bianchi direttamente sul fondo chiaro (niente pannello) */ .p3d .dtb-media{background:transparent;border-radius:0;padding:0;box-shadow:none} .p3d .dtrail.cardrail{background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important} /* carosello: niente frecce grandi, drag-scroll + bordi sfumati + scrollbar sottile */ .p3d .dtnav{display:none!important} .p3d .dttrack{cursor:grab} .p3d .dttrack.cards{padding-left:38px;padding-right:38px;scroll-padding-left:38px;scroll-padding-right:38px} /* ombra ai bordi (dx/sx) per indicare il carosello */ .p3d .dtrail,.pmt .dtrail{position:relative} .p3d .dtrail::before,.pmt .dtrail::before,.p3d .dtrail::after,.pmt .dtrail::after{content:"";position:absolute;top:0;bottom:0;width:32px;z-index:6;pointer-events:none;opacity:0;transition:opacity .28s} .p3d .dtrail::before,.pmt .dtrail::before{left:0;background:linear-gradient(90deg,rgba(16,45,40,.11) 0%,rgba(16,45,40,.03) 55%,rgba(16,45,40,0) 100%)} .p3d .dtrail::after,.pmt .dtrail::after{right:0;background:linear-gradient(270deg,rgba(16,45,40,.11) 0%,rgba(16,45,40,.03) 55%,rgba(16,45,40,0) 100%)} .p3d .dtrail.show-l::before,.pmt .dtrail.show-l::before{opacity:1} .p3d .dtrail.show-r::after,.pmt .dtrail.show-r::after{opacity:1} .p3d .dttrack.dragging{cursor:grabbing;scroll-behavior:auto} .p3d .dttrack::-webkit-scrollbar{height:6px} .p3d .dttrack::-webkit-scrollbar-track{background:transparent} .p3d .dttrack::-webkit-scrollbar-thumb{background:rgba(20,60,52,.18);border-radius:10px} /* tile più piccoli (≈-30%, almeno 4 visibili) e immagini che riempiono senza spazio bianco */ /* altezza uniforme (tutti), larghezza libera in base all'immagine, senza stirare */ .p3d .pcard-grid{height:clamp(244px,23vw,296px);border-radius:16px;box-shadow:0 10px 28px rgba(20,50,44,.10)} .p3d .dttrack.cards .pcard--one{flex:0 0 auto} .p3d .pcard--one .pcard-grid{width:auto;max-width:none;min-width:0} .p3d .pcard--one .gt img,.p3d .pcard--one .gt video{width:auto;height:100%;object-fit:cover;padding:0} /* tile multi-immagine: larghezza fissa (l'altezza resta uniforme) */ .p3d .dttrack.cards .pcard:not(.pcard--one){flex:0 0 clamp(260px,24vw,320px)} .p3d .pcard:not(.pcard--one) .pcard-grid{width:clamp(260px,24vw,320px)} .p3d .pcard:not(.pcard--one) .gt img,.p3d .pcard:not(.pcard--one) .gt video{width:100%;height:100%;object-fit:cover;padding:0} /* hero 3D con la misma estructura y altura que Branding/Maquetación; box de actividades a la derecha */ .p3d .brandhead .dt-head-visual{min-height:calc(2.94 * clamp(43px,6.3vw,94px) + 66px);align-self:stretch} .p3d .brandhead-txt .pf-filters{margin-top:0} .p3d .dt3d-wrap{position:relative;width:100%;max-width:520px;transform:translateX(clamp(36px,6.4vw,128px))} .p3d .dt3d-wrap .dt-stats{position:relative;z-index:1;max-width:none} .p3d .dt3d-bg{position:absolute;inset:0;background:url("img/3d/hero3d.jpg") center center/contain no-repeat;opacity:.45;z-index:0;pointer-events:none;transform:translate(-10%,-9%) scale(1.7);transform-origin:center} .p3d .brandhead>.brandhead-txt{position:relative;z-index:2} .p3d .brandhead>.dt-head-visual{position:relative;z-index:1} .p3d .dt3d-stats .dt-stat{align-items:center;min-height:clamp(76px,7.4vw,90px)} .p3d .dt3d-stats .dt-stat b{font-size:clamp(14px,1.4vw,19px);letter-spacing:0} /* botones de enlace a los banners en verde */ .p3d .pf-chip{background:var(--teal);color:#fff;border-color:var(--teal)} .p3d .pf-chip:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff} .p3d .pf-chip.active{background:var(--teal-dd);border-color:var(--teal-dd);color:#fff} @media(max-width:820px){.p3d .brandhead .dt-head-visual{min-height:0}} /* ===== Maquetación técnica — stile banner bianchi + linea/punto #18373b + carosello drag ===== */ .pmt .dt-zone{background:transparent;padding:24px 0 40px} .pmt .dtsec{padding:0;margin-bottom:8px;max-width:none} .pmt .dtsec:last-child{margin-bottom:0} .pmt .dtbanner{--acc:#18373b;--bandbg:#f2f5f2;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;background:#f2f5f2; grid-template-columns:clamp(240px,23vw,340px) 1fr;gap:clamp(28px,4vw,60px);align-items:center; padding:clamp(16px,2.2vw,30px) clamp(44px,6.5vw,104px)} .pmt .dtbanner::before,.pmt .dtbanner::after{content:none!important} .pmt .dtsec + .dtsec .dtbanner{box-shadow:inset 0 1px 0 rgba(20,50,44,.06)} /* linea + puntino ancorati al testo: il punto è esattamente all'altezza del titolo */ .pmt .dtb-txt{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:8px 0} .pmt .dtb-txt::before{content:"";position:absolute;left:calc(-1 * clamp(22px,2.2vw,40px));top:0;bottom:0;width:2px;background:var(--acc);opacity:.9;pointer-events:none} .pmt .dtb-txt h2{position:relative;color:#18373b} .pmt .dtb-txt h2::before{content:"";position:absolute;left:calc(-1 * clamp(22px,2.2vw,40px));top:50%;width:13px;height:13px;border-radius:50%;background:var(--acc);transform:translate(-50%,-50%);box-shadow:0 0 0 5px var(--bandbg);pointer-events:none} .pmt .dtb-txt p{color:#5f6f69;text-align:justify;text-align-last:left} .pmt .dtb-txt p b{color:#18373b} .pmt .dtb-rule{background:#18373b} .pmt .dtb-rule::after{background:var(--coral)} .pmt .dtnav{display:none!important} .pmt .dttrack{cursor:grab;align-items:center;gap:clamp(20px,2.4vw,34px);padding:38px 38px 14px;scroll-padding-left:38px;scroll-padding-right:38px;scrollbar-width:none} .pmt .dttrack::-webkit-scrollbar{display:none} .pmt .dtlang{top:-22px} .pmt .dttrack.dragging{cursor:grabbing;scroll-behavior:auto} .pmt .dttrack::-webkit-scrollbar{height:6px} .pmt .dttrack::-webkit-scrollbar-track{background:transparent} .pmt .dttrack::-webkit-scrollbar-thumb{background:rgba(20,60,52,.18);border-radius:10px} .pmt .dtimg img,.pmt .dtimg video{height:clamp(240px,25vw,312px)} /* ombra tile leggera come in 3D (niente drop-shadow pesante sotto le card) */ .pmt .dtimg img{filter:drop-shadow(0 10px 22px rgba(20,50,44,.10))} .pmt .dtimg video{box-shadow:0 10px 22px rgba(20,50,44,.10)} .pmt .dtwork:hover .dtimg{transform:translateY(-6px)} .pmt .dtwork:hover .dtimg img{filter:drop-shadow(0 16px 30px rgba(20,50,44,.14))} .pmt .dtwork:hover .dtimg video{box-shadow:0 16px 30px rgba(20,50,44,.14)} .dt-pagenote{max-width:1180px;margin:4px auto 0;padding:0 clamp(24px,5vw,60px) 30px;font-size:11.5px;font-style:italic;color:#93a09a;text-align:center;line-height:1.5} /* hero técnica: misma estructura y MISMA ALTURA que el hero de branding. La columna derecha replica la altura del eco "BRANDING" (3 líneas) para que el centrado vertical y la altura total del hero sean idénticos. */ .pmt .brandhead .dt-head-visual{min-height:calc(2.94 * clamp(43px,6.3vw,94px) + 66px);align-self:stretch} .pmt .brandhead-txt .dt-secnav{margin-top:0} @media(max-width:820px){.pmt .brandhead .dt-head-visual{min-height:0}} /* mapa concéntrico al box (mismo centro) y más grande que el box */ .pmt .brandhead.pmt-hero{position:relative;overflow:visible} .pmt .dt-box-wrap{position:relative;width:100%;max-width:520px;transform:translateX(clamp(12px,3.2vw,64px))} .pmt .dt-box-wrap .dt-stats{position:relative;z-index:1;max-width:none} .pmt .dt-map--box{position:absolute;inset:0;background:url("img/dt/worldmap_hero.png") center center/contain no-repeat;opacity:.3;z-index:0;pointer-events:none;transform:scale(2.35);transform-origin:center} .pmt .brandhead.pmt-hero>.brandhead-txt,.pmt .brandhead.pmt-hero>.dt-head-visual{position:relative;z-index:1} .dtsec:last-child{margin-bottom:0} .dtbanner{max-width:1440px;margin:0 auto;padding:clamp(16px,2vw,26px) clamp(22px,3vw,40px);position:relative;isolation:isolate; background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.28) 100%); -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.06); backdrop-filter:url(#glass-distortion) blur(11px) saturate(190%) brightness(1.06); border:1px solid rgba(255,255,255,.7);border-radius:28px; box-shadow:0 22px 60px rgba(8,40,36,.22),0 6px 16px rgba(8,40,36,.12),inset 0 1.5px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -22px 40px rgba(255,255,255,.4),inset 10px 0 30px rgba(255,255,255,.22)} .dtbanner::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 42%),radial-gradient(140% 100% at 0% 0%,rgba(255,255,255,.45),rgba(255,255,255,0) 55%)} .dtbanner::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(115deg,transparent 0%,transparent 44%,rgba(255,255,255,.5) 50%,transparent 56%,transparent 100%);opacity:.5;mix-blend-mode:overlay} /* Banner editorial: columna de texto (qué hago + idiomas) + carril de imágenes */ .dtbanner{display:grid;grid-template-columns:342px 1fr;gap:clamp(24px,3vw,52px);align-items:stretch} .dtb-txt{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:6px 0} .dtb-rule{display:block;width:56px;height:4px;border-radius:3px;background:var(--teal);margin:14px 0 16px;position:relative;flex:none} .dtb-rule::after{content:"";position:absolute;left:64px;top:0;width:18px;height:4px;border-radius:3px;background:var(--coral)} .dtnum{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,46px);color:#e7e2d6;line-height:.8} .dtb-txt h2{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(24px,2.9vw,34px);color:var(--ink);margin:0} .dtb-txt p{color:var(--muted);font-size:14.5px;line-height:1.62;margin:0} .dtb-txt p b{color:var(--teal);font-weight:700} .dtb-idi{margin-top:22px} .dtb-idi-lbl{display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;color:#fff;background:var(--coral);padding:6px 14px;border-radius:100px;margin-bottom:12px;box-shadow:0 6px 14px rgba(255,107,92,.3)} .dtb-langs{display:flex;flex-wrap:wrap;gap:6px;max-width:320px} .lg{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--teal);padding:4px 10px;border-radius:12px;line-height:1} .lg.more{background:var(--teal-dd)} .dtb-media{min-width:0} .dtrail{position:relative} .dttrack{display:flex;gap:36px;align-items:flex-end;overflow-x:auto;scroll-snap-type:x proximity;padding:32px 4px 10px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--teal) transparent} .dttrack::-webkit-scrollbar{height:9px} .dttrack::-webkit-scrollbar-track{background:#eef1ee;border-radius:10px} .dttrack::-webkit-scrollbar-thumb{background:var(--teal);border-radius:10px} /* Grafiche fluttuanti — solo immagine con ombra + marcatore lingua */ .dtwork{scroll-snap-align:start;flex:0 0 auto;margin:0;cursor:pointer} /* al hover se mueve TODO el conjunto (imagen + linguetta) juntos */ .dtimg{position:relative;display:inline-block;line-height:0;transition:transform .3s cubic-bezier(.2,.8,.2,1)} .dtwork:hover .dtimg{transform:translateY(-8px)} .dtimg video{height:340px;width:auto;max-width:none;display:block;border-radius:5px;position:relative;z-index:1;box-shadow:0 18px 30px rgba(16,45,40,.16)} @media(max-width:640px){.dtimg video{height:250px}} .dtimg img{height:340px;width:auto;max-width:none;display:block;border-radius:5px;position:relative;z-index:1; filter:drop-shadow(0 22px 34px rgba(16,45,40,.24)) drop-shadow(0 4px 10px rgba(16,45,40,.14)); transition:filter .3s} .dtwork:hover .dtimg img{filter:drop-shadow(0 34px 46px rgba(16,45,40,.30)) drop-shadow(0 6px 14px rgba(16,45,40,.16))} /* Linguetta (tab) que asoma DESDE DETRÁS de la imagen */ .dtlang{position:absolute;left:20px;top:-23px;z-index:0;display:inline-flex;align-items:center;gap:7px; background:#fff;color:var(--ink);font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.02em; padding:7px 15px 17px;border-radius:13px 13px 5px 5px; box-shadow:0 -3px 10px rgba(6,30,26,.15);line-height:1} .dtlang .fi{width:18px;height:13px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);background-size:cover} .dtlang-sep{width:1px;height:12px;background:rgba(0,0,0,.14);margin:0 3px} .dtzoom{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(11,26,22,.62);color:#fff;font-size:15px;display:grid;place-items:center;opacity:.92;transform:none;transition:.25s;backdrop-filter:blur(2px);z-index:2} .dtwork:hover .dtzoom{background:var(--teal)} .dtimg::after{content:"Ver proyecto";position:absolute;left:0;right:0;bottom:0;padding:24px 10px 9px;background:linear-gradient(transparent,rgba(6,30,26,.82));color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;border-radius:0 0 5px 5px} .dtwork:hover .dtimg::after{opacity:1} .dtempty{border:1.5px dashed var(--line);border-radius:16px;padding:38px 24px;text-align:center;color:var(--muted);font-size:14px;background:var(--surface-2)} /* Flipbook viewer (sfogliare) */ .dtbook{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center; background:rgba(10,36,31,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:5vh 6vw} .dtbook.open{display:flex} .dtbook-holder{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;perspective:2600px} .fb-book{position:relative;transform-style:preserve-3d;filter:drop-shadow(0 26px 55px rgba(0,0,0,.5))} .fb-page{position:absolute;top:0;overflow:hidden;background:#fff} .fb-page.left{left:0;box-shadow:inset -22px 0 34px -22px rgba(0,0,0,.4)} .fb-page.right{box-shadow:inset 22px 0 34px -22px rgba(0,0,0,.4)} .fb-page img{width:100%;height:100%;display:block;object-fit:cover} .fb-leaf{position:absolute;top:0;transform-style:preserve-3d;z-index:6;will-change:transform;display:none} .fb-face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden} .fb-face img{width:100%;height:100%;display:block;object-fit:cover} .fb-face.back{transform:rotateY(180deg)} .fb-face.front{box-shadow:inset -22px 0 34px -22px rgba(0,0,0,.35)} @media(max-width:640px){.dtbook-holder{perspective:1600px}} .dtbook-close{position:fixed;top:20px;right:24px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer; background:rgba(11,26,22,.62);color:#fff;font-size:22px;display:grid;place-items:center;z-index:240} .dtbook-close:hover{background:var(--teal)} .dtbook-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;display:grid;place-items:center;transition:background .18s;z-index:210} .dtbook-nav:hover{background:var(--teal)} .dtbook-nav.prev{left:2vw}.dtbook-nav.next{right:2vw} .dtbook-nav.off{opacity:0;pointer-events:none} .dtbook-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#eafaf6;font-size:13px; letter-spacing:1px;background:rgba(0,0,0,.4);padding:6px 16px;border-radius:20px} @media(max-width:640px){.dtbook-nav{width:44px;height:44px;font-size:22px}} .dtnav{position:absolute;top:202px;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:var(--teal);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 22px rgba(8,56,58,.32);z-index:4;transition:opacity .2s,background .2s,transform .2s} .dtnav:hover{background:var(--teal-dd);transform:translateY(-50%) scale(1.08)} .dtnav.prev{left:-14px} .dtnav.next{right:-14px} .dtnav.off{opacity:0;pointer-events:none} @media(max-width:900px){ .dtbanner{grid-template-columns:1fr;gap:18px} .dtb-txt{position:static} .dtb-langs{max-width:none} } @media(max-width:640px){ .dtnav{display:none} .dttrack{gap:28px} .dtimg img{height:250px} } /* lightbox zoom (leer etiquetas/fichas en detalle) */ .lb-media{overflow:hidden;border-radius:18px} .lb-media img{cursor:zoom-in;transition:transform .08s ease-out;will-change:transform} /* ===== Layout 06 · Colorificio Damiani (flex + aspect-ratio) ===== */ .pb-grid.g6{display:flex;gap:16px;align-items:stretch} .g6c{display:flex;flex-direction:column;gap:16px;min-width:0} .g6-left{flex:0 0 37%} .g6-center{flex:0 0 32.6%} .g6-right{flex:1 1 0;min-width:0} .pb-grid.g6 .pb-tile.dlogo{aspect-ratio:1400/567;background:#333} .pb-grid.g6 .pb-tile.dpal{flex:0 0 24px;background:linear-gradient(90deg,#e8621f 0 34%,#f4f2ef 34% 67%,#3a3a3a 67% 100%)} .pb-grid.g6 .pb-tile.dprot{aspect-ratio:1400/750} .pb-grid.g6 .pb-tile.dsteel{aspect-ratio:1200/1020} .pb-grid.g6 .pb-tile.dspig{aspect-ratio:1500/1000} .pb-grid.g6 .pb-tile.dcolor{aspect-ratio:1400/788} .pb-grid.g6 .pb-tile.dvideo{aspect-ratio:16/9} .pb-grid.g6 .pb-tile.dvideo img{object-fit:contain;background:transparent} .pb-grid.g6 .pb-tile.dspig video{object-fit:contain;background:transparent} .pb-grid.g6 .pb-tile.dvideo::before, .pb-grid.g6 .pb-tile.dspig::before{content:"";position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;filter:blur(28px) brightness(.55) saturate(1.15);transform:scale(1.2)} .pb-grid.g6 .pb-tile.dvideo::before{background-image:url("img/proj/damiani/dspig.jpg")} .pb-grid.g6 .pb-tile.dspig::before{background-image:url("vid/damiani_comercial.jpg")} .pb-grid.g6 .pb-tile:hover .pb-img-cta{opacity:1} .pb-grid.g6 .pb-tile:hover img{transform:scale(1.05)} @media(max-width:860px){ .pb-grid.g6{flex-direction:column} .g6-left,.g6-center,.g6-right{flex:1 1 auto;width:100%} .pb-grid.g6 .pb-tile.dvideo{aspect-ratio:16/9;flex:none} } /* FIX: el nav de branding (alt-cases) debe ocupar el ancho completo y centrarse igual que en la home. Sin esto, el contenido ancho + overflow-x:clip hacía colapsar la barra sticky al ancho de su contenido. */ body.alt-cases nav{width:100%;left:0;right:0} body.alt-cases nav>.wrap{width:100%;max-width:1440px;margin-left:auto;margin-right:auto} .pf-filters{display:flex;gap:8px;flex-wrap:wrap} .pf-chip{font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:9px 17px;border-radius:100px;cursor:pointer;transition:transform .2s,color .2s,background .2s,border-color .2s;font-family:inherit} .pf-chip:hover{border-color:var(--teal);color:var(--teal)} .pf-chip.active{background:var(--teal-dd);color:#fff;border-color:var(--teal-dd)} /* Lightbox · miniaturas de proceso (making-of) */ .lb-thumbs{display:none;gap:8px;margin-top:18px;flex-wrap:wrap} .lb-thumb{width:70px;height:52px;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);cursor:pointer;padding:0;transition:border-color .2s,transform .2s} .lb-thumb:hover{transform:translateY(-2px)} .lb-thumb img{width:100%;height:100%;object-fit:cover;display:block} .lb-thumb.active{border-color:var(--yellow)} .pcard{background:#fff;border:0.5px solid #e4e8e4;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(20,50,44,.07);cursor:pointer;transition:transform .25s,box-shadow .25s} .pcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(20,50,44,.14)} .pcard-info{padding:13px 16px 16px} .pcard-info h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);margin:0;line-height:1.15} .pcard-info span{display:block;font-size:12px;color:var(--muted);margin-top:4px} /* Schede progetto DENTRO al carrusel + mini-galleria */ .dttrack.cards{align-items:stretch;gap:18px;padding:8px 2px 16px} .dtrail.cardrail .dtnav{top:42%} .dttrack.cards .pcard{flex:0 0 clamp(232px,74vw,280px);scroll-snap-align:start} /* Carrusel di card-progetto; la miniatura di ogni card è una mini-griglia */ .dttrack.cards{align-items:stretch;gap:18px;padding:8px 2px 16px} .dtrail.cardrail .dtnav{top:40%} .dttrack.cards .pcard{flex:0 0 clamp(240px,76vw,300px);scroll-snap-align:start;margin:0} .pcard-grid{display:grid;gap:4px;height:220px;position:relative;background:#e4e8e4} .pcard-grid.n1{grid-template-columns:1fr} .pcard-grid.n2{grid-template-columns:2.2fr 1fr} .pcard-grid.n3{grid-template-columns:2.2fr 1fr;grid-template-rows:1fr 1fr} .pcard-grid.n3 .gt:first-child{grid-row:1 / 3} .pcard-grid.n4{grid-template-columns:2.2fr 1fr;grid-template-rows:1fr 1fr 1fr} .pcard-grid.n4 .gt:first-child{grid-row:1 / 4} .gt{overflow:hidden;background:#eef0ee} .gt img{width:100%;height:100%;object-fit:cover;display:block} .pcard-badge2{position:absolute;right:8px;bottom:8px;background:rgba(11,26,22,.78);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;z-index:2;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} /* Variante orizzontale della mini-griglia: principale sopra, piccole in fila sotto */ .pcard-grid.n2h{grid-template-columns:1fr;grid-template-rows:2.2fr 1fr} .pcard-grid.n3h{grid-template-columns:1fr 1fr;grid-template-rows:2.2fr 1fr} .pcard-grid.n3h .gt:first-child{grid-column:1 / 3} .pcard-grid.n4h{grid-template-columns:1fr 1fr 1fr;grid-template-rows:2.2fr 1fr} .pcard-grid.n4h .gt:first-child{grid-column:1 / 4} /* ===== Lightbox v2: sin textos, miniaturas grandes a la derecha, tamaño controlado ===== */ .lb-card{display:flex!important;grid-template-columns:none!important;gap:18px;align-items:center;justify-content:center;max-width:min(1120px,94vw)!important} .lb-card.isvideo{grid-template-columns:none!important;max-width:min(1120px,94vw)!important} .lb-media{flex:1 1 auto;min-width:0} .lb-media img,.lb-media video{max-width:100%!important;max-height:80vh!important} .lb-card.isvideo .lb-media video{max-height:80vh!important} .lb-info{display:none!important} .lb-thumbs{display:none;flex-direction:column;gap:10px;flex:0 0 108px;max-height:80vh;overflow-y:auto;margin:0} .lb-card.hasthumbs .lb-thumbs{display:flex} .lb-thumb{width:104px;height:78px;border-radius:9px;border:2px solid rgba(255,255,255,.35);overflow:hidden;cursor:pointer;padding:0;background:rgba(255,255,255,.08);flex:0 0 auto;transition:border-color .2s,transform .2s} .lb-thumb:hover{transform:translateY(-2px)} .lb-thumb.active{border-color:var(--yellow)} .lb-thumb img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:640px){.lb-card{flex-direction:column}.lb-thumbs{flex-direction:row;flex:none;max-height:none;width:100%;overflow-x:auto}.lb-thumb{width:74px;height:56px}} /* ===== Branding: mostrar título + descripción del proyecto en el lightbox ===== */ body.alt-cases #lb .lb-card{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:clamp(28px,3vw,56px);max-width:min(1180px,92vw)!important} body.alt-cases #lb .lb-media{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center} body.alt-cases #lb .lb-media img{max-height:80vh;width:auto;max-width:100%} body.alt-cases #lb .lb-media video{max-height:72vh;width:auto;max-width:100%} body.alt-cases #lb .lb-info{display:block!important;flex:0 0 clamp(300px,34%,500px);max-width:500px;min-width:300px;text-align:left} body.alt-cases #lb .lb-info h3{font-size:clamp(18px,1.7vw,24px);line-height:1.25;margin-bottom:14px;white-space:normal} body.alt-cases #lb .lb-info p{font-size:clamp(15px,1.2vw,18px);line-height:1.65} @media(max-width:760px){body.alt-cases #lb .lb-card{flex-direction:column;flex-wrap:wrap!important}body.alt-cases #lb .lb-info{flex:0 1 auto;max-width:100%}body.alt-cases #lb .lb-info h3{white-space:normal}} /* ===== Card más altas (menos recorte) + zona carrusel con sombra interior verde agua ===== */ .pcard-grid{height:280px} .dtrail.cardrail{background:#e6efec;border-radius:18px;box-shadow:inset 0 8px 20px -8px rgba(24,86,76,.30),inset 0 -8px 20px -8px rgba(24,86,76,.24);padding:10px 12px} .dttrack.cards{padding:14px 4px 18px} /* ===== Tarjeta = solo galería (bloque blanco); título fuera, debajo. Imagen más pequeña dentro de la celda ===== */ .pcard{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible} .pcard:hover{transform:translateY(-4px);box-shadow:none} .pcard-grid{border-radius:16px;overflow:hidden;border:0.5px solid #e4e8e4;background:#fff;box-shadow:0 8px 22px rgba(20,50,44,.08);transition:box-shadow .25s} .pcard:hover .pcard-grid{box-shadow:0 18px 40px rgba(20,50,44,.15)} .pcard-info{padding:12px 4px 2px;background:transparent} .pcard-info h3{font-size:16px} .gt{background:#fff} .gt img{object-fit:contain;padding:8px} .dtsec{scroll-margin-top:96px} /* ===== Galería: se ve el fondo entre celdas + secundarias más grandes ===== */ .pcard-grid{background:transparent;gap:9px;border:0;box-shadow:none;border-radius:0} .pcard:hover .pcard-grid{box-shadow:none} .gt{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(20,50,44,.06)} .pcard-grid.n2,.pcard-grid.n3,.pcard-grid.n4{grid-template-columns:1.9fr 1fr} .pcard-grid.n2h,.pcard-grid.n3h,.pcard-grid.n4h{grid-template-rows:1.9fr 1fr} .gt img{padding:6px} /* ===== Quitar títulos de proyecto ===== */ .pcard-info{display:none} /* ===== Escenas rellenan la celda (sin espacio blanco); packaging mantiene producto entero ===== */ .gt img{object-fit:cover;padding:0} #sec-packaging .gt img{object-fit:contain;padding:6px} /* ===== Galería como grupo: solo las 4 esquinas externas redondeadas ===== */ .pcard-grid{border-radius:16px;overflow:hidden;gap:5px;background:transparent} .gt{border-radius:0;box-shadow:none} .gt video{width:100%;height:100%;object-fit:cover;display:block} /* ===== Proyectos de una sola pieza: ancho según el contenido ===== */ .dttrack.cards .pcard--one{flex:0 0 auto} .pcard--one .pcard-grid{width:auto;max-width:460px;min-width:190px} .pcard--one .pcard-grid.n1{grid-template-columns:auto} .pcard--one .gt img,.pcard--one .gt video{width:auto;height:100%} /* ============================================================ HOME v2 — typewriter hero (light) + cards (screenshot style) ============================================================ */ @font-face{font-family:'Type Machine';src:url('fonts/type-machine.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} /* ---- HERO ---- */ .hero-tw2{position:relative;min-height:30vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8vh 24px 1vh;color:var(--ink)} .hero-tw2 .tw2-center{max-width:1000px;width:100%} .hero-tw2 .tw2-type{font-family:'Type Machine','Courier New',monospace;font-weight:400;font-size:clamp(18px,2.5vw,36px);line-height:1.5;letter-spacing:.005em;color:var(--ink);min-height:3em;transform:translateY(.75em);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .hero-tw2 .tw2-type.tw2-up{transform:translateY(0)} .hero-tw2 .tw2-type .tw2-l{display:block;white-space:nowrap} @media(max-width:640px){.hero-tw2 .tw2-type .tw2-l{white-space:normal}} .hero-tw2 .tw2-name{color:var(--teal);font-style:italic} .hero-tw2 .tw2-em{font-weight:400;font-style:normal} .hero-tw2 .tw2-type .tw-hidden{visibility:hidden} .hero-tw2 .cur{display:inline-block;width:.58em;height:1em;background:var(--ink);margin-left:.04em;vertical-align:-.14em;animation:tw2blink 1.05s steps(1) infinite} @keyframes tw2blink{50%{opacity:0}} /* scroll indicator */ .hero-tw2 .tw2-more{margin-top:2vh;display:inline-flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease} .hero-tw2 .tw2-more.reveal{opacity:1;transform:none} .hero-tw2 .tw2-more-txt{font-family:'Type Machine',monospace;font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)} .hero-tw2 .tw2-more-arr{font-size:clamp(26px,2.4vw,36px);line-height:1;color:var(--ink);animation:tw2bob 1.5s ease-in-out infinite} @keyframes tw2bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* ---- CARDS ---- */ .homecards{max-width:1820px;margin:0 auto;padding:clamp(16px,2.4vh,30px) clamp(20px,2.4vw,40px) 8vh;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,52px)} #categorias.homecards{overflow:visible} @media(max-width:900px){.homecards{grid-template-columns:1fr;max-width:680px}} .hcard{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:1.22/1;text-decoration:none;box-shadow:var(--shadow);isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s} .hcard:hover{transform:translateY(-6px);box-shadow:0 34px 66px rgba(12,50,44,.26)} .hcard .hc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0} .hcard .hc-overlay{position:absolute;inset:0;z-index:1;pointer-events:none} .hcard .hc-body{position:absolute;left:0;top:0;bottom:0;width:48%;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2vw,38px)} .hcard .hc-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(24px,1.7vw,34px);line-height:1.06;margin-top:14px} .hcard .hc-rule{width:56px;height:3px;border-radius:3px;margin:17px 0} .hcard .hc-desc{font-size:clamp(12.5px,0.95vw,15px);line-height:1.55;letter-spacing:-.015em;max-width:20ch} .hcard .hc-go{position:absolute;right:clamp(18px,1.5vw,26px);bottom:clamp(18px,1.5vw,26px);z-index:3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff;transition:transform .3s;box-shadow:0 8px 20px rgba(0,0,0,.18)} .hcard:hover .hc-go{transform:translateX(4px)} /* variant · branding (green) */ .hcard--br{background:#06302F} .hcard--br .hc-overlay{background:linear-gradient(90deg,rgba(6,48,47,1) 0%,rgba(6,48,47,1) 45%,rgba(6,48,47,.5) 55%,rgba(6,48,47,0) 65%)}.hcard--br .hc-title{color:#F5EFE2}.hcard--br .hc-rule{background:var(--coral)}.hcard--br .hc-desc{color:rgba(245,239,226,.9)}.hcard--br .hc-go{background:var(--coral)} /* variant · 3d (dark) */ .hcard--3d{background:#0B0F11} .hcard--3d .hc-overlay{background:linear-gradient(90deg,rgba(11,15,17,1) 0%,rgba(11,15,17,1) 45%,rgba(11,15,17,.5) 55%,rgba(11,15,17,0) 65%)}.hcard--3d .hc-title{color:#fff}.hcard--3d .hc-rule{background:var(--teal)}.hcard--3d .hc-desc{color:rgba(255,255,255,.88)}.hcard--3d .hc-go{background:var(--teal)} /* variant · técnica (light) */ .hcard--tec{background:#EBE9E1} .hcard--tec .hc-overlay{background:linear-gradient(90deg,rgba(235,233,225,1) 0%,rgba(235,233,225,1) 45%,rgba(235,233,225,.5) 55%,rgba(235,233,225,0) 65%)}.hcard--tec .hc-title{color:var(--ink)}.hcard--tec .hc-rule{background:var(--coral)}.hcard--tec .hc-desc{color:var(--muted);max-width:23ch}.hcard--tec .hc-go{background:var(--coral)} /* ---- PubliFacile banner grid (layout su misura) ---- */ .pb-grid.gpf{display:grid;grid-template-columns:2fr 1.5fr .9fr 3fr 2.4fr;grid-template-rows:clamp(120px,9vw,150px) repeat(3,clamp(72px,5.6vw,92px))!important;grid-template-areas:"logo logo pal pieg cat" "video video video pieg cat" "video video video icon cat" "video video video icon web";gap:14px} .pb-grid.gpf .pb-tile{cursor:pointer} .pb-grid.gpf .logo{grid-area:logo;background:#fff} .pb-grid.gpf .logo img{object-fit:contain;padding:7px 10px} .pb-grid.gpf .pal{grid-area:pal;cursor:default;background:linear-gradient(#F8B124 0 33.33%,#FFF6DC 33.33% 66.66%,#101425 66.66% 100%)!important} .pb-grid.gpf .pfvideo{grid-area:video} .pb-grid.gpf .pfpieg{grid-area:pieg} .pb-grid.gpf .pfcat{grid-area:cat} .pb-grid.gpf .pfcat img{object-fit:cover;padding:0} .pb-grid.gpf .pficon{grid-area:icon} .pb-grid.gpf .pfweb{grid-area:web;display:flex;align-items:center;justify-content:center;text-align:center;background:#F0B020;color:#101020;font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(13px,1.15vw,16px);text-decoration:none;transition:filter .2s} .pb-grid.gpf .pfweb:hover{filter:brightness(1.06)} .pb-grid.gpf .pb-tile:hover .pb-img-cta{opacity:1} .pb-grid.gpf .pb-tile:hover img{transform:scale(1.05)} @media(max-width:760px){.pb-grid.gpf{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:150px;grid-template-areas:none}.pb-grid.gpf>.pb-tile{grid-area:auto}.pb-grid.gpf .pfvideo,.pb-grid.gpf .pfweb{grid-column:span 2}.pb-grid.gpf .pal{display:none}} /* Lightbox solo-testo (es. tile sito web) + link */ .lb-card.textonly .lb-media{display:none} body.alt-cases #lb .lb-card.textonly .lb-media{display:none!important} body.alt-cases #lb .lb-card.textonly{max-width:min(560px,90vw)!important;justify-content:center} body.alt-cases #lb .lb-card.textonly .lb-info{flex:1 1 auto!important;max-width:100%!important} .lb-link{display:inline-block;margin-top:14px;background:var(--teal);color:#fff;padding:9px 17px;border-radius:100px;font-weight:600;font-size:14px;text-decoration:none;transition:background .2s} .lb-link:hover{background:var(--teal-dd)} /* ---- TintoSmart banner grid ---- */ .pb-grid.gts{display:grid;grid-template-columns:2fr 1.5fr .9fr 3fr 2.4fr;grid-template-rows:clamp(96px,7.4vw,124px) repeat(3,clamp(74px,5.8vw,94px))!important;grid-template-areas:"logo logo pal cart espo" "video video video cart espo" "video video video even espo" "video video video even espo";gap:14px} .pb-grid.gts .pb-tile{cursor:pointer} .pb-grid.gts .logo{grid-area:logo;background:#fff} .pb-grid.gts .logo img{object-fit:contain;padding:7px 12px} .pb-grid.gts .pal{grid-area:pal;cursor:default;background:linear-gradient(#E0582A 0 50%,#1D1D1C 50% 100%)!important} .pb-grid.gts .tsvideo{grid-area:video} .pb-grid.gts .tscart{grid-area:cart} .pb-grid.gts .tseven{grid-area:even} .pb-grid.gts .tsespo{grid-area:espo} .pb-grid.gts .pb-tile:hover .pb-img-cta{opacity:1} .pb-grid.gts .pb-tile:hover img{transform:scale(1.05)} @media(max-width:760px){.pb-grid.gts{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:150px;grid-template-areas:none}.pb-grid.gts>.pb-tile{grid-area:auto}.pb-grid.gts .tsvideo,.pb-grid.gts .tsespo{grid-column:span 2}.pb-grid.gts .pal{display:none}} /* Bottone "Hojear" (flipbook) dentro il box descrizione del lightbox */ .lb-book-btn{display:inline-block;margin-top:14px;background:var(--teal);color:#fff;padding:9px 17px;border-radius:100px;font-weight:600;font-size:14px;border:none;cursor:pointer;font-family:inherit;transition:background .2s} .lb-book-btn:hover{background:var(--teal-dd)} /* Lightbox: barra sfoglia (frecce + contatore) per cataloghi/menu consultabili */ .lb-ctrl{display:none} .lb-card.haspager .lb-ctrl{display:flex;align-items:center;gap:14px;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:214;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 10px;border-radius:100px} .lb-arrow{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s} .lb-arrow:hover{background:rgba(255,255,255,.34)} .lb-pager{color:#fff;font-family:'Type Machine',monospace;font-size:12.5px;letter-spacing:1px;min-width:52px;text-align:center} /* ===== Branding page — nuovo hero ===== */ .brandhead{display:grid;grid-template-columns:1.85fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;max-width:1180px;margin:0 auto 0 clamp(28px,6vw,100px);padding:clamp(30px,4.5vw,60px) clamp(18px,4vw,40px) clamp(20px,3vw,36px);overflow:visible} .brandhead-txt h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,48px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:6px 0 18px;white-space:nowrap} .brandhead-txt p{font-size:clamp(13px,1vw,15px);line-height:1.7;color:var(--muted);max-width:46ch} /* descrizioni hero uniformi (branding / maquetación técnica / 3D) */ .brandhead-txt p,.dt-head-txt p,.dt3d-txt p{font-size:clamp(12.5px,0.9vw,14px);line-height:1.6;color:var(--muted);max-width:58ch;margin:0 0 9px} .brandhead-txt p:last-of-type,.dt-head-txt p:last-of-type,.dt3d-txt p:last-of-type{margin-bottom:0} .brandhead-rule{display:block;width:120px;height:4px;background:var(--coral);border-radius:4px;margin:26px 0} .brandhead-tags{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;font-size:clamp(12px,1vw,15px);color:var(--ink);font-weight:500} .brandhead-tags span{position:relative;padding:2px 26px 2px 0} .brandhead-tags span:not(:last-child)::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--coral)} .brandhead-deco{position:relative;align-self:stretch;min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-left:2px solid rgba(255,107,92,.55);padding-left:clamp(20px,2.4vw,40px);transform:translateX(clamp(10px,5vw,120px))} .brandhead-dots{width:88px;height:46px;background-image:radial-gradient(rgba(255,107,92,.65) 1.5px,transparent 1.7px);background-size:13px 13px;margin-bottom:16px} .brandhead-echo{display:flex;flex-direction:column;gap:2px} .brandhead-echo span{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(43px,6.3vw,94px);line-height:.98;letter-spacing:.01em;color:transparent;-webkit-text-stroke:1.4px rgba(255,107,92,.42);text-stroke:1.4px rgba(255,107,92,.42);white-space:nowrap} @media(max-width:820px){.brandhead{grid-template-columns:1fr;gap:8px}.brandhead-deco{display:none}} /* ===== Flipbook (voltata pagina) dentro del lightbox ===== */ .lb-card .lbbook{display:none} .lb-card.bookmode #lbimg,.lb-card.bookmode #lbvid{display:none!important} .lb-card.bookmode .lbbook{display:flex;align-items:center;justify-content:center;width:100%;height:min(72vh,600px);perspective:2200px} .lb-arrow.off{opacity:.28;pointer-events:none} body.alt-cases #lb .lb-card.bookmode{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:clamp(22px,3vw,44px);max-width:min(1260px,94vw)!important} body.alt-cases #lb .lb-card.bookmode .lb-media{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center} body.alt-cases #lb .lb-card.bookmode .lb-info{flex:0 0 clamp(280px,30%,440px)} @media(max-width:760px){body.alt-cases #lb .lb-card.bookmode{flex-direction:column;flex-wrap:wrap!important}.lb-card.bookmode .lbbook{height:52vh}} /* Pannello descrizione dentro il flipbook (dtbook) */ .dtbook-info{position:absolute;top:22px;left:26px;max-width:min(320px,24vw);color:#F5EFE2;z-index:6;display:none} .dtbook-info.show{display:block} .dtbook-info .dtbook-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(17px,1.5vw,22px);line-height:1.2;margin-bottom:8px} .dtbook-info .dtbook-desc{font-size:clamp(12.5px,1vw,14.5px);line-height:1.6;color:rgba(245,239,226,.82)} @media(max-width:1100px){.dtbook-info{display:none!important}} /* ========================================================================= MÓVIL — ajustes específicos de teléfono (≤640px) Bloque aislado: no afecta a escritorio ni a tablet. ========================================================================= */ /* etiqueta corta de los chips: sólo visible en móvil */ .pf-chip .ch-sm{display:none} @media(max-width:640px){ /* ---- INICIO · titular del hero más grande ---------------------------- */ .hero-tw2{padding:7vh 20px 3vh;min-height:26vh} .hero-tw2 .tw2-type{font-size:clamp(23px,6.6vw,30px);line-height:1.45;min-height:4.4em;transform:translateY(.45em)} .hero-tw2 .tw2-more{margin-top:4px} /* ---- HERO de sección (Branding / 3D / Maquetación) ------------------- Antes el h1 y los tags iban en nowrap: el bloque medía 520px dentro de una pantalla de 390 y el texto se cortaba por la derecha. En móvil se reordena: título → tags → texto → línea → botones. */ .brandhead{margin:0;padding:26px 20px 22px;max-width:100%;gap:12px} .brandhead-txt,.dt-head-visual{min-width:0} .brandhead-txt{display:flex;flex-direction:column} .brandhead-txt h1{order:1;white-space:normal;font-size:clamp(28px,8.4vw,38px);margin:2px 0 0} .brandhead-rule{order:2;margin:14px 0 16px} .brandhead-txt p{order:4;max-width:none;font-size:14px;line-height:1.62; text-align:justify;text-align-last:left} .p3d .brandhead-txt .pf-filters,.pmt .brandhead-txt .dt-secnav{order:7;margin-top:16px} /* Branding: en móvil, sin tags */ .brandhead-tags{display:none} /* ---- BRANDING · los tiles pasan a carrusel horizontal ---------------- Cada card toma las proporciones reales de su contenido (lo calcula app.js): el logo ancho queda bajo y ancho, el menú vertical alto y estrecho. Nada se recorta y nada queda con bandas vacías. */ .pbanner{padding:36px 0} .pbanner .pb-inner{padding:0 20px} /* riga + punto accanto al testo, nel colore del banner (come in 3D y Maquetación). La riga decorativa originale partiva fuori schermo. */ .pbanner.light .pb-inner::before{display:none} .pbanner .pb-head{position:relative;padding-left:18px; border-left:2px solid var(--acc,var(--teal))} .pbanner.light .pb-head h2::before{display:block;left:-18px;top:50%; width:12px;height:12px;box-shadow:0 0 0 5px var(--bpbg,#F6F5F3)} .pbanner .pb-desc,.alt-cases .pbanner .pb-desc{text-align:justify;text-align-last:left} .pb-head{margin-bottom:20px} /* niente ancoraggio automatico dello scorrimento: sposta la striscia quando le immagini in lazy load prendono la loro larghezza */ .pbanner .pb-grid,.dttrack{overflow-anchor:none} .pbanner .pb-grid{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; grid-template-columns:none!important; grid-template-rows:none!important; grid-template-areas:none!important; grid-auto-rows:auto!important; align-items:center; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; /* lo snap si accende solo quando l'utente scorre davvero (app.js aggiunge .car-live): cosi' la striscia non si riaggancia da sola a meta' strada mentre le immagini in lazy load prendono la loro larghezza */ scroll-snap-type:none; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px; padding:4px 20px 10px; } .pbanner .pb-grid::-webkit-scrollbar{display:none} .pbanner .pb-grid.car-live{scroll-snap-type:x proximity} /* lo snap rispetta il margine laterale: la prima card non resta tagliata */ .pbanner .pb-grid{scroll-padding-left:20px} /* stessa regola per i caroselli di Modelado 3D e Maquetacion tecnica */ .dttrack{scroll-snap-type:none} .dttrack.car-live{scroll-snap-type:x proximity} /* Damiani y Franchi&Kim agrupan los tiles en columnas: se disuelven para que las piezas entren directamente en el carrusel */ .pbanner .pb-grid .g5c,.pbanner .pb-grid .g6c, .pbanner .pb-grid .g5-top,.pbanner .pb-grid .g6-top{display:contents} /* !important porque algunas rejillas (g5/g6) dan flex:1 1 auto a sus piezas y las encogían a 0 dentro del carrusel */ .pbanner .pb-grid .pb-tile{ grid-area:auto!important;grid-column:auto!important;grid-row:auto!important; flex:0 0 auto!important;aspect-ratio:auto!important; min-width:0;min-height:0!important;max-width:none!important; scroll-snap-align:start; } /* el carrusel empieza siempre por el logotipo */ .pbanner .pb-grid .pb-tile.logo, .pbanner .pb-grid .pb-tile.dlogo{order:-1} /* Damiani, Franchi & Kim e Las Salsas: il logo non e' un lavoro mio, su mobile esce dal carosello per lasciare spazio ai progetti */ .bp2 .pb-grid .pb-tile.dlogo, .bp3 .pb-grid .pb-tile.logo, .bp8 .pb-grid .pb-tile.logo{display:none!important} /* piezas decorativas sin contenido: fuera del carrusel */ .pbanner .pb-tile.pal,.pbanner .pb-tile.dpal, .pbanner .pb-tile.flag,.pbanner .pb-tile.nlflag{display:none!important} /* la card tiene exactamente la forma de la pieza: la imagen la llena por completo, sin márgenes ni recortes. Sólo las piezas más anchas que 1,88:1 (los logotipos) topan con el ancho de pantalla y se apoyan sobre el fondo de marca del tile. */ .pbanner .pb-tile img,.pbanner .pb-tile video{object-fit:contain;padding:0} .pbanner .pb-tile.logo img,.pbanner .pb-tile.dlogo img{padding:12px} .pbanner .pb-tile.pfweb{display:grid;place-items:center;text-align:center;padding:18px;font-size:15px} /* niente icona "espandi": su mobile toccare è già istintivo e l'icona copriva un angolo del lavoro */ .pb-img-cta,.dtzoom{display:none!important} /* niente ombra sotto le card: i puntini dicono già che si scorre */ .pbanner .pb-tile,.pbanner.light .pb-tile{box-shadow:none} /* titolo e sottotitolo del banner su una riga sola */ .alt-cases .pbanner .pb-title h2,.pb-title h2{font-size:22px;line-height:1.12} /* Descrizione del progetto: misura piu' contenuta, cosi' il sottotitolo (settore e ruolo) resta il primo dato che si legge. */ .alt-cases .pbanner .pb-desc,.pbanner .pb-desc{font-size:11.5px;line-height:1.65} /* Settore e ruolo a misura piena: vanno a capo liberamente (anche su due righe) invece di rimpicciolirsi per stare su una riga sola. */ .alt-cases .pbanner .pb-meta,.pb-meta{ font-size:13.5px;gap:2px 16px;flex-wrap:wrap;white-space:normal; max-width:100%;line-height:1.35} .pb-meta>span{flex:0 1 auto;white-space:normal;min-width:0} .alt-cases .pbanner .pb-meta.pb-meta-wrap,.pb-meta.pb-meta-wrap{ flex-wrap:wrap;white-space:normal;gap:2px 16px} .pb-meta.pb-meta-short .fl{display:none} /* ultimo passo prima di tornare a due righe: si tolgono le etichette "Sector \" e "Role \" e restano i due dati, separati da un punto */ .pb-meta.pb-meta-nolabel .pb-lbl{display:none} .pb-meta.pb-meta-nolabel>span+span::before{ content:"·";margin-right:.85em;font-weight:400;opacity:.55} .pb-topline{gap:0} .pb-cap{display:block;position:absolute;left:10px;bottom:8px;z-index:2;font-size:11px;font-weight:600; color:#fff;background:rgba(11,26,22,.62);padding:3px 9px;border-radius:100px; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} /* Branding: puntini di posizione (li genera app.js) */ .pb-dots{display:flex;justify-content:center;gap:6px;margin:8px 0 0} .pb-dots i{width:6px;height:6px;border-radius:50%;background:rgba(20,50,44,.22);transition:background .25s,transform .25s} .pb-dots i.on{background:var(--acc,var(--teal));transform:scale(1.35)} /* Modelado 3D e Maquetación técnica: barretta di scorrimento. I caroselli hanno molti più pezzi e i puntini diventavano illeggibili. */ .car-bar{position:relative;height:4px;border-radius:4px; background:rgba(20,50,44,.12);margin:12px auto 0;width:min(180px,46%)} .car-bar i{position:absolute;top:0;bottom:0;left:0;border-radius:4px; background:var(--acc,var(--teal));transition:transform .06s linear} /* ---- LIGHTBOX (tile abierto) ---------------------------------------- */ .lb{padding:0} #lb .lb-card, body.alt-cases #lb .lb-card, body.alt-cases #lb .lb-card.bookmode{ flex-direction:column!important;flex-wrap:nowrap!important; width:100%!important;max-width:100%!important; height:100%;max-height:100%; border-radius:0;border:0; padding:54px 16px 16px;gap:10px; align-items:stretch!important;justify-content:flex-start!important; overflow:hidden; } #lb .lb-media{flex:0 1 auto;height:auto;max-height:52vh;display:flex;align-items:center;justify-content:center} #lb .lb-media img, #lb .lb-media video, body.alt-cases #lb .lb-media img, body.alt-cases #lb .lb-media video{max-height:52vh!important;max-width:100%!important;width:auto;height:auto; object-fit:contain;box-shadow:none!important} .lb-card.bookmode .lbbook{height:46vh} /* Flipbook a tutto schermo (Maquetación técnica): frecce sotto al libro invece che ai lati, dove coprivano le pagine */ .dtbook{padding-bottom:88px} .dtbook-nav{position:fixed;top:auto;bottom:20px;transform:none; width:48px;height:48px;font-size:24px} .dtbook-nav.prev{left:calc(50% - 84px);right:auto} .dtbook-nav.next{right:calc(50% - 84px);left:auto} .dtbook-nav.off{opacity:.25;pointer-events:none} .dtbook-count{bottom:34px} .dtbook-close{top:14px;right:14px} /* Maquetación técnica e 3D aprono solo l'immagine, senza testo: in quel caso la si centra verticalmente invece di appoggiarla in alto */ body:not(.alt-cases) #lb .lb-card, #lb .lb-card.imgonly{ justify-content:center!important;align-items:center!important; padding:56px 14px!important} body:not(.alt-cases) #lb .lb-media, #lb .lb-card.imgonly .lb-media{max-height:78vh;flex:0 1 auto} body:not(.alt-cases) #lb .lb-media img, body:not(.alt-cases) #lb .lb-media video, #lb .lb-card.imgonly .lb-media img{max-height:78vh!important} /* paginador en su propia línea, ya no flotando sobre el texto */ .lb-card.haspager .lb-ctrl{position:static;transform:none;justify-content:center; background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin:2px 0 0} .lb-arrow{width:38px;height:38px;background:rgba(255,255,255,.22)} #lb .lb-thumbs{flex-direction:row;flex:0 0 auto;width:100%;max-height:none; overflow-x:auto;overflow-y:hidden;gap:8px;margin:0;padding-bottom:2px;scrollbar-width:none} #lb .lb-thumbs::-webkit-scrollbar{display:none} #lb .lb-thumb{width:62px;height:47px;flex:0 0 auto} body.alt-cases #lb .lb-info{ display:block!important;flex:1 1 auto!important; min-width:0!important;max-width:100%!important; overflow-y:auto;-webkit-overflow-scrolling:touch;text-align:left;padding-bottom:8px} body.alt-cases #lb .lb-info h3{font-size:20px;line-height:1.25;margin-bottom:8px} body.alt-cases #lb .lb-info p{text-align:justify!important;text-align-last:left; font-size:15px;line-height:1.6;max-width:none} .lb .close{top:12px;right:14px;font-size:30px;width:44px;height:44px} /* ---- MODELADO 3D · hero -------------------------------------------- El wireframe pasa a ser una textura de fondo detrás del texto. */ .p3d .dt-head-visual{display:none} .p3d .brandhead{position:relative} .p3d .brandhead::before{content:none} /* su mobile i tre bottoni (Productos / Ambientes / Envases) non servono: le sezioni si incontrano scorrendo */ .p3d .brandhead-txt .pf-filters{display:none!important} /* ---- Banner de proyecto (3D y Maquetación técnica) ------------------ Descripción arriba, carrusel debajo, y la línea + punto acotados a la altura del texto para que no corran por encima del carrusel. */ .dtbanner{grid-template-columns:1fr!important;gap:14px;align-items:start} .dtb-media{width:100%} .dttrack.cards .pcard{flex:0 0 78vw} /* niente ombre né sfumature ai bordi: a dire che si scorre bastano i puntini sotto al carosello */ .p3d .dtrail::before,.p3d .dtrail::after, .pmt .dtrail::before,.pmt .dtrail::after{display:none} .p3d .pcard,.p3d .pcard-grid,.p3d .pcard:hover .pcard-grid{box-shadow:none} .pmt .dtimg img,.pmt .dtwork:hover .dtimg img{filter:none} .pmt .dtimg video,.pmt .dtwork:hover .dtimg video{box-shadow:none} .dttrack{padding-bottom:4px} /* una sola barra sotto al carosello: quella disegnata (.car-bar). La barra di scorrimento nativa si nasconde, come in Maquetación técnica */ .p3d .dttrack,.dttrack{scrollbar-width:none} .p3d .dttrack::-webkit-scrollbar,.dttrack::-webkit-scrollbar{display:none;height:0} .dtnav{display:none} .p3d .dtbanner{padding:24px 20px 18px} .p3d .dtbanner::before,.p3d .dtbanner::after{display:none} .p3d .dtb-txt,.pmt .dtb-txt{position:relative;padding-left:18px; border-left:2px solid var(--acc,var(--teal))} .pmt .dtb-txt::before{display:none} .p3d .dtb-txt h2,.pmt .dtb-txt h2{position:relative} .p3d .dtb-txt h2::before,.pmt .dtb-txt h2::before{content:"";position:absolute; left:-18px;top:50%;width:12px;height:12px;border-radius:50%; background:var(--acc,var(--teal));transform:translate(-50%,-50%); box-shadow:0 0 0 5px var(--bandbg,#f1f6f3)} .p3d .dtb-txt p,.pmt .dtb-txt p{text-align:justify;text-align-last:left} /* ---- MAQUETACIÓN TÉCNICA · hero ------------------------------------- */ .pmt .dt-secnav{display:none} .pmt .brandhead-txt h1{margin-bottom:4px} .pmt .brandhead-rule{margin:22px 0 24px} .pmt .dt-head-visual{margin-top:6px} /* el desktop desplaza el bloque 12px a la derecha: en móvil descuadraba la caja de datos respecto al texto y se salía por la derecha */ .pmt .dt-box-wrap{width:100%;max-width:none;transform:none} .pmt .dt-map--box{display:none} /* banners alineados con el hero (antes 44px contra 20px) y carrusel a sangre, para ganar ancho útil para las anteprime */ .pmt .dtbanner{padding:22px 20px 20px} .pmt .dtb-media{margin:0 -20px;width:calc(100% + 40px)} .pmt .dttrack{padding-left:20px;padding-right:20px} /* ninguna anteprima más ancha que la pantalla: las piezas horizontales (etiquetas y packaging) se ven enteras en vez de cortadas */ .pmt .dtimg img,.pmt .dtimg video{height:186px;width:auto; max-width:calc(100vw - 40px);object-fit:contain} /* un unico riquadro orizzontale con i quattro dati, separati da filetti. La prima riga (icona + numero) ha altezza fissa, così tutte le didascalie partono esattamente alla stessa altezza. */ .pmt .dt-stats{display:grid!important;grid-template-columns:repeat(4,1fr); gap:0;max-width:none;padding:14px 2px; background:var(--surface);border:1px solid var(--line);border-radius:16px; box-shadow:0 6px 18px rgba(20,50,44,.06)} /* colonne di larghezza fissa: così l'icona e il numero cadono nello stesso punto in tutte e quattro le caselle, indipendentemente da quante cifre ha il numero */ .pmt .dt-stat{display:grid;grid-template-columns:24px 42px; grid-template-rows:26px auto;justify-content:center;align-content:start; column-gap:6px;row-gap:5px;min-height:0;padding:0 4px; background:none;border:0;border-radius:0;box-shadow:none} .pmt .dt-stat + .dt-stat{border-left:1px solid var(--line)} .pmt .dt-stat .tx{display:contents} .pmt .dt-stat .ic{grid-area:1/1;width:24px;height:24px;margin:0;align-self:center} .pmt .dt-stat .ic svg{width:14px;height:14px} .pmt .dt-stat .ic .gly{font-size:11px;letter-spacing:-.5px} .pmt .dt-stat b{grid-area:1/2;font-size:19px;line-height:1;align-self:center;justify-self:start} .pmt .dt-stat .lbl{grid-area:2/1/3/3;align-self:start;font-size:10.5px; line-height:1.22;margin:0;text-align:center;font-weight:600} /* ---- FOOTER · botones centrados y copyright debajo ------------------ */ footer .wrap{flex-direction:column-reverse;align-items:center;justify-content:center; gap:14px;text-align:center;padding:20px 20px} footer .foot-links{justify-content:center;flex-wrap:wrap;gap:10px} footer .copyr{width:100%;text-align:center} } /* ===== Menú hamburguesa (aparece por debajo de 820px) ===== Panel más estrecho y en verde agua de marca. */ @media(max-width:820px){ .navlinks{ left:auto;right:20px;width:min(62vw,240px); background:var(--teal); border:1px solid rgba(255,255,255,.18); padding:10px;gap:7px; box-shadow:0 18px 40px rgba(8,56,58,.32); } .navlinks a{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:#fff; box-shadow:none; padding:9px 14px; } .navlinks a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff} .navlinks a.active{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:none} } /* ===== Página en construcción (Perfil) ===== */ .uc{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 230px);padding:8vh 24px 10vh} .uc-inner{max-width:640px;text-align:center} .uc-badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--teal);background:rgba(14,110,110,.09);border:1px solid rgba(14,110,110,.18); padding:6px 14px;border-radius:100px;margin-bottom:26px} .uc-ico{width:84px;height:84px;margin:0 auto 22px;border-radius:24px;display:grid;place-items:center; background:var(--teal-dd);color:#F5EFE2;box-shadow:0 16px 34px rgba(8,56,58,.24)} .uc-ico svg{width:42px;height:42px} .uc h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;color:var(--ink)} .uc-rule{display:block;width:70px;height:5px;border-radius:3px;background:var(--coral);margin:18px auto 22px} .uc p{color:var(--muted);font-size:16px;line-height:1.7;max-width:46ch;margin:0 auto} .uc .uc-alt{margin-top:28px;font-size:14.5px} .uc-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px} .uc-acts a{background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:11px 19px;border-radius:100px; font-size:14px;font-weight:500;box-shadow:0 4px 10px rgba(20,40,35,.07); transition:transform .2s,color .2s,border-color .2s,background .2s} .uc-acts a:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--teal)} .uc-acts a.pri{background:var(--teal-dd);color:#fff;border-color:var(--teal-dd)} .uc-acts a.pri:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff} @media(max-width:640px){ .uc{min-height:calc(100vh - 210px);padding:5vh 20px 8vh} .uc-ico{width:70px;height:70px;border-radius:20px;margin-bottom:18px} .uc-ico svg{width:35px;height:35px} .uc-badge{margin-bottom:20px} .uc p{font-size:15px} .uc-acts{flex-direction:column;align-items:stretch} .uc-acts a{text-align:center} } /* ===== Selettore di lingua a bandierine ===== Nella barra in alto sta attaccato al bottone Contacto e mostra solo le bandiere; dentro il menu del telefono mostra bandiera e nome della lingua. Sono due blocchi separati nell'HTML: ognuno compare solo dove serve. */ .navright{display:flex;align-items:center;gap:12px} .langsw{display:flex;align-items:center} .langsw .flag{display:block;width:22px;height:15px;border-radius:3px; box-shadow:0 0 0 1px rgba(20,40,35,.14) inset} .langsw .lang-txt{font-size:14px;font-weight:500} /* --- barra in alto (schermo grande): solo bandiere --- */ .langsw--bar{gap:6px;background:var(--surface);border:1px solid var(--line); border-radius:100px;padding:5px 7px;box-shadow:0 4px 9px rgba(20,40,35,.06)} .langsw--bar .lang{display:grid;place-items:center;padding:2px;border-radius:4px; line-height:0;transition:transform .2s,opacity .2s} .langsw--bar .lang-txt{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* solo per gli screen reader */ .langsw--bar .lang:not(.lang--on){opacity:.42;filter:saturate(.25)} .langsw--bar .lang:not(.lang--on):hover{opacity:1;filter:none;transform:translateY(-1px)} .langsw--bar .lang--on .flag{box-shadow:0 0 0 1px rgba(20,40,35,.14) inset, 0 0 0 2px var(--teal-dd)} /* --- dentro il menu del telefono: bandiera + nome --- */ .langsw--menu{display:none} @media(max-width:900px){ .langsw--bar{display:none} .langsw--menu{display:flex;flex-direction:column;align-items:stretch;gap:7px; margin-top:9px;padding-top:10px;border-top:1px solid rgba(255,255,255,.22)} /* stessa larghezza delle voci di menu sopra */ .langsw--menu .lang{display:flex;align-items:center;justify-content:center;gap:10px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22); color:#fff;padding:9px 14px;border-radius:100px;transition:background .2s,border-color .2s} .langsw--menu .lang:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)} .langsw--menu .lang--on{background:var(--coral);border-color:var(--coral)} .langsw--menu .flag{width:24px;height:16px;box-shadow:0 0 0 1px rgba(0,0,0,.18) inset} } /* ===== Riga per scaricare il CV (solo home) ===== Titolo e due bottoni su una riga sola, sotto le tre schede. Nessuna bandierina qui: la lingua si sceglie gia' dalla barra in alto. */ .cvline{padding:0 24px 58px;text-align:center} .cvline p{display:inline-flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:9px 12px;margin:0;font-size:15px} .cvline-t{font-family:'Poppins',sans-serif;font-weight:600;color:var(--ink)} .cvbtn{display:inline-flex;align-items:center;justify-content:center; background:var(--surface);border:1px solid var(--line);color:var(--teal-dd); font-size:13.5px;font-weight:600;padding:8px 17px;border-radius:100px; box-shadow:0 3px 8px rgba(20,40,35,.05); transition:transform .2s,border-color .2s,color .2s} .cvbtn:hover{transform:translateY(-1px);border-color:var(--teal);color:var(--teal)} @media(max-width:640px){ .cvline{padding:0 18px 40px} .cvline p{font-size:14px;gap:8px 10px} .cvbtn{font-size:13px;padding:7px 15px} } @media(max-width:360px){ .cvline{padding:0 12px 36px} .cvline p{font-size:13px;gap:7px 8px} .cvbtn{font-size:12.5px;padding:7px 12px} }