/* =========================================================
   Responsabilitat · versió 3 (mateixa estructura, gràfics refinats)
   ========================================================= */

/* ---------- Valors ---------- */
.values3{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.values3 li{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.values3 li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--leaf),var(--sun));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.values3 li:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(23,63,43,.35);border-color:rgba(76,175,60,.35)}
.values3 li:hover::before{transform:scaleX(1)}
.v3-ico{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(150deg,#f3f9f0 0%,#e1f0da 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 -10px 18px -12px rgba(29,90,55,.25),0 6px 14px -8px rgba(29,90,55,.35)}
.v3-ico svg{width:42px;height:42px;fill:none;stroke:var(--forest);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.v3-ico .t-leaf{fill:#bfe2b1;stroke:none}
.v3-ico .t-sun{fill:#ffe27a;stroke:none}
.v3-ico .hl{stroke:#fff;stroke-width:2.2}
.v3-ico .thick{stroke-width:5}
.v3-lbl{font:500 .98rem/1.3 var(--f-display);color:var(--forest);letter-spacing:.005em}

/* ---------- Segells ISO tipus medalla ---------- */
.seals3{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 22px}
.seal3{margin:0;width:118px;filter:drop-shadow(0 8px 12px rgba(20,36,27,.16));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.seal3:hover{transform:translateY(-4px) rotate(-2deg)}
.seal3 svg{width:100%;height:auto;display:block}
.seal3 .s-iso{font:600 11px var(--f-display);letter-spacing:3.5px}
.seal3 .s-num{font:600 21px var(--f-display);fill:var(--forest);letter-spacing:-.3px}
.seal3 .s-lbl{font:600 6.2px var(--f-body);fill:#6a776f;letter-spacing:1.1px}

/* ---------- ODS ---------- */
.ods3{filter:drop-shadow(0 8px 14px rgba(20,36,27,.14))}
.ods3 .o-t{font:600 15px var(--f-display);fill:var(--forest);letter-spacing:1px}
.ods3 .o-s{font:500 9px var(--f-body);fill:#6a776f;letter-spacing:2px}

/* ---------- Compromís: icones en rajola ---------- */
.resp-v3 .commit h3 svg{width:36px;height:36px;padding:7px;border-radius:11px;background:linear-gradient(150deg,#f3f9f0,#e1f0da);box-shadow:inset 0 0 0 1px #fff}

/* ---------- Etiqueta energètica ---------- */
.resp-v3 .building{background:linear-gradient(160deg,#1d5a37 0%,#143826 100%)}
.resp-v3 .building-title{margin-bottom:18px}
.eu-label{background:#fff;border-radius:14px;padding:14px 14px 12px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.eu-head{font:600 .62rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#00a651;margin-bottom:8px}
.eu-foot{color:#ed1c24;margin:8px 0 0}
.eu-rows{display:grid;gap:4px}
.eu-row{position:relative;height:22px}
.eu-row b{display:flex;align-items:center;height:100%;width:var(--w);padding-left:9px;background:var(--c);color:var(--t,#fff);font:700 .85rem/1 var(--f-display);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
.eu-row:not(.is-on) b{opacity:.9}
.eu-mark{position:absolute;right:0;top:50%;transform:translateY(-50%);height:28px;min-width:42px;padding:0 10px 0 16px;display:flex;align-items:center;justify-content:center;background:#14241b;color:#fff;font:700 1rem/1 var(--f-display);font-style:normal;clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%);animation:euPulse 2.4s ease-in-out infinite}
@keyframes euPulse{50%{transform:translateY(-50%) translateX(-4px)}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){.values3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){
  .values3{grid-template-columns:repeat(2,1fr);gap:10px}
  .values3 li{padding:22px 10px 18px}
  .v3-ico{width:64px;height:64px;border-radius:18px}.v3-ico svg{width:36px;height:36px}
  .seals3{gap:8px}.seal3{width:88px}
}