/* Modello di pagina «azienda» (Chi siamo): templates/contenuti/modelli/azienda.html.twig.
   Usa le variabili di app.css; la «i» di Oesis (asta e punto rosso) torna come motivo in ogni sezione. */

/* ---------- Eroe ---------- */
.az-eroe { position: relative; overflow: hidden; isolation: isolate; padding: clamp(2.2rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  background: radial-gradient(46rem 30rem at 85% 10%, rgba(227, 6, 19, .09), transparent 70%), radial-gradient(30rem 20rem at 0% 100%, rgba(38, 99, 173, .06), transparent 70%), linear-gradient(180deg, #fff, var(--carta));
  border-bottom: 1px solid var(--linea); }
.az-eroe::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(20, 22, 26, .07) 1px, transparent 1px); background-size: 24px 24px;
  mask-image: radial-gradient(60rem 30rem at 75% 40%, #000, transparent 75%); }
.az-eroe__griglia { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.az-eroe__testo > * { animation: entra 1s var(--morbido) both; }
.az-eroe__testo > :nth-child(2) { animation-delay: .08s; }
.az-eroe__testo > :nth-child(3) { animation-delay: .16s; }
.az-eroe__testo > :nth-child(4) { animation-delay: .26s; }
.az-eroe__testo > :nth-child(5) { animation-delay: .36s; }
.az-eroe__titolo { margin-bottom: 1.3rem; font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 800; letter-spacing: -.048em; line-height: 1.02; text-wrap: balance; }
.az-eroe__titolo strong, .az-frase strong { position: relative; font-weight: inherit; color: var(--rosso); white-space: nowrap; }
.az-eroe__titolo strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .12em; border-radius: 1em; background: currentColor; opacity: .2; transform-origin: left; animation: sottolinea 1s .9s var(--morbido) both; }
.az-eroe__lead { max-width: 34em; margin-bottom: 2rem; font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--inchiostro-2); text-wrap: pretty; }
.az-eroe .eroe__azioni { margin-bottom: 0; }

/* I volti: cartoline sovrapposte che galleggiano, con una cifra e il punto della «i» */
.az-eroe__volti { position: relative; height: clamp(380px, 40vw, 520px); }
.az-eroe__alone { position: absolute; inset: 8% 4% 4% 10%; border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%; background: linear-gradient(135deg, rgba(227, 6, 19, .14), rgba(227, 6, 19, .02)); animation: respira 9s ease-in-out infinite; }
.az-volto { --giro: -5deg; position: absolute; width: 54%; margin: 0; padding: .6rem .6rem .9rem; border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-l);
  transform: rotate(var(--giro)); animation: az-arriva 1.1s var(--molla) backwards, az-galleggia 8s 1.2s ease-in-out infinite; transition: transform .5s var(--molla), box-shadow .5s; }
.az-volto:hover { --giro: 0deg; z-index: 5; box-shadow: 0 40px 80px -24px rgba(20, 22, 26, .35); }
/* La prima persona del Desk sta davanti, più grande e col nome intero; le altre dietro, più piccole */
.az-volto--1 { left: 0; top: 10%; width: 60%; z-index: 4; }
.az-volto--2 { --giro: 5deg; right: 0; top: 0; width: 44%; z-index: 2; animation-delay: .15s, 2.2s; }
.az-volto--3 { --giro: -2deg; right: 2%; bottom: 0; width: 40%; z-index: 3; animation-delay: .3s, 3.2s; }
.az-eroe__volti--1 .az-volto--1 { left: 16%; top: 6%; width: 64%; }
.az-volto__foto, .az-volto__sigla { display: block; width: 100%; height: auto; aspect-ratio: 1 / .92; border-radius: calc(var(--r-l) - .5rem); object-fit: cover; object-position: 50% 30%; background: var(--nebbia); }
.az-volto__sigla, .az-persona__sigla { display: grid; place-items: center; font-family: var(--f-titoli); font-weight: 800; letter-spacing: -.05em; color: #fff;
  background: radial-gradient(14rem 12rem at 80% 0%, rgba(227, 6, 19, .55), transparent 70%), radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 18px 18px, var(--inchiostro); }
.az-volto__sigla { font-size: clamp(3rem, 6vw, 4.6rem); }
.az-volto figcaption { display: grid; gap: .1rem; padding: .7rem .5rem 0; font-size: .82rem; line-height: 1.3; color: var(--grigio); }
.az-volto figcaption b { font-family: var(--f-titoli); font-size: .98rem; color: var(--inchiostro); }
.az-eroe__volti:not(.az-eroe__volti--1) .az-volto figcaption span { display: none; } /* le cartoline si coprono: solo il nome */
.az-eroe__cifra { position: absolute; z-index: 6; right: 0; bottom: 6%; display: grid; gap: .1rem; max-width: 230px; margin: 0; padding: .9rem 1.2rem; border-radius: var(--r-m);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: var(--ombra-m); font-size: .84rem; line-height: 1.3; color: var(--grigio); animation: az-arriva 1s .6s var(--molla) backwards; }
.az-eroe__cifra b { font-family: var(--f-titoli); font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--rosso); font-variant-numeric: tabular-nums; }
.az-eroe__punto { position: absolute; z-index: 6; left: 4%; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--rosso); box-shadow: 0 12px 30px -6px rgba(227, 6, 19, .6); animation: az-salta 5s 1.4s var(--morbido) infinite; }
@keyframes az-arriva { from { opacity: 0; transform: translateY(40px) rotate(0deg) scale(.94); } }
@keyframes az-galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes az-salta { 0%, 76%, 100% { transform: none; } 80% { transform: translateY(10%) scale(1.15, .85); } 88% { transform: translateY(-160%); } 95% { transform: translateY(8%) scale(1.12, .88); } }

/* ---------- Valori ---------- */
.az-valori__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.az-valore { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .5rem; padding: 2rem 1.8rem 1.9rem; border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--bianco);
  transition: transform .4s var(--molla), box-shadow .4s, border-color .3s; }
.az-valore::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rosso); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--morbido); }
.az-valore:hover { transform: translateY(-6px); box-shadow: var(--ombra-l); border-color: transparent; }
.az-valore:hover::before { transform: none; }
.az-valore__numero { position: absolute; right: 1.4rem; top: 1rem; font-family: var(--f-titoli); font-size: 3.2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--linea-forte); }
.az-valore__icona { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .9rem; border-radius: 18px; background: var(--rosso-tenue); color: var(--rosso); transition: transform .5s var(--molla), background .3s, color .3s; }
.az-valore:hover .az-valore__icona { transform: rotate(-8deg) scale(1.06); background: var(--rosso); color: #fff; }
.az-valore h3 { margin: 0; font-size: 1.25rem; }
.az-valore p { margin: 0; font-size: .99rem; line-height: 1.6; color: var(--grigio); }

/* ---------- Racconto ---------- */
.az-racconto { padding-top: 0; }
.az-racconto__griglia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.az-racconto__testa { position: sticky; top: calc(var(--testata-h) + 2rem); }
.az-racconto__corpo { padding-top: .4rem; }
.az-racconto__corpo > p:first-child { font-size: 1.28rem; color: var(--inchiostro); }
.az-frase { position: relative; max-width: 22em; margin: clamp(3.5rem, 8vw, 6rem) auto 0; padding-top: 4.4rem; text-align: center; font-family: var(--f-titoli); font-size: clamp(1.8rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.az-frase__i { position: absolute; left: 50%; top: 0; width: 22px; height: 52px; margin-left: -11px; }
.az-frase__i::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 30px; border-radius: 4px; background: var(--inchiostro); }
.az-frase__i span { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--rosso); animation: az-salta 4.5s var(--morbido) infinite; }

/* ---------- Team ---------- */
.az-team__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; align-items: stretch; }
.az-team__griglia--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.az-persona { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-s); transition: transform .45s var(--molla), box-shadow .45s; }
.az-persona:hover { transform: translateY(-8px); box-shadow: var(--ombra-l); }
.az-persona__ritratto { position: relative; overflow: hidden; aspect-ratio: 5 / 4; }
.az-persona__foto, .az-persona__sigla { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .8s var(--morbido); }
.az-persona:hover .az-persona__foto, .az-persona:hover .az-persona__sigla { transform: scale(1.05); }
.az-persona__sigla { display: grid; font-size: clamp(4rem, 8vw, 6rem); }
.az-persona__ritratto::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(20, 22, 26, .18)); pointer-events: none; }
.az-persona__punto { position: absolute; z-index: 1; right: 1.4rem; bottom: -13px; width: 26px; height: 26px; border: 4px solid var(--bianco); border-radius: 50%; background: var(--rosso); box-sizing: content-box; }
.az-persona:hover .az-persona__punto { animation: az-salta 1.2s var(--morbido); }
.az-persona__testo { position: relative; display: flex; flex-direction: column; flex: 1; padding: 1.7rem 1.8rem 1.8rem; }
.az-persona__ruolo { margin: 0 0 .35rem; font-family: var(--f-titoli); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rosso); }
.az-persona h3 { margin: 0 0 .7rem; font-size: 1.45rem; letter-spacing: -.025em; }
.az-persona__testo > p:not(.az-persona__ruolo) { margin: 0 0 1.2rem; font-size: .99rem; line-height: 1.65; color: var(--inchiostro-2); }
.az-persona__competenze, .az-gruppo__etichette { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: 0; list-style: none; }
.az-persona__competenze li { padding: .3rem .75rem; border-radius: 999px; background: var(--nebbia); font-size: .8rem; font-weight: 600; color: var(--inchiostro-2); }
.az-persona__social { position: absolute; right: 1.4rem; top: 1.5rem; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nebbia); color: var(--inchiostro); transition: background .2s, color .2s; }
.az-persona__social:hover { background: #0a66c2; color: #fff; }

.az-gruppo { --tono: var(--rosso); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .6rem; padding: clamp(2rem, 3vw, 2.6rem); border-radius: var(--r-l); background: var(--inchiostro); color: #fff; }
.az-gruppo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(26rem 18rem at 100% 0%, rgba(227, 6, 19, .45), transparent 65%), radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px; }
.az-gruppo > * { position: relative; z-index: 2; }
.az-gruppo h3 { margin: auto 0 .2rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.03em; color: #fff; }
.az-gruppo p { margin: 0 0 1.2rem; color: rgba(255, 255, 255, .72); line-height: 1.6; }
.az-gruppo__etichette { margin: 0; }
.az-gruppo__etichette li { padding: .35rem .85rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .84rem; font-weight: 600; }
.az-gruppo__i { position: absolute; z-index: 1; right: 2rem; top: 1.8rem; width: 36px; height: 120px; border-radius: 8px; background: rgba(255, 255, 255, .08); transform: rotate(10deg); }
.az-gruppo__i span { position: absolute; left: 50%; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--rosso); box-shadow: 0 0 30px rgba(227, 6, 19, .8); transform: translateX(-50%); animation: i-salto-lento 6s var(--morbido) infinite; }

/* ---------- Certificazioni ---------- */
.az-certificazioni__sigilli { grid-template-columns: repeat(2, 1fr); }
.az-certificazioni .sigillo { padding: 1.1rem 1.2rem; transition: transform .35s var(--molla), box-shadow .35s; }
.az-certificazioni .sigillo:hover { transform: translateY(-3px); box-shadow: var(--ombra-m); }
.az-certificazioni .sigillo span { font-size: .88rem; color: var(--grigio); line-height: 1.35; }

/* ---------- Schermi stretti ---------- */
@media (max-width: 980px) {
  .az-eroe__griglia, .az-racconto__griglia { grid-template-columns: minmax(0, 1fr); }
  .az-eroe__volti { height: clamp(340px, 70vw, 480px); max-width: 560px; width: 100%; justify-self: center; }
  .az-racconto__testa { position: static; }
}
@media (max-width: 620px) {
  .az-eroe__volti { height: 104vw; }
  .az-volto { width: 52%; }
  .az-volto--1 { width: 66%; }
  .az-eroe__cifra { bottom: 2%; max-width: 190px; padding: .7rem .9rem; }
  .az-eroe__cifra b { font-size: 1.35rem; }
  .az-certificazioni__sigilli { grid-template-columns: minmax(0, 1fr); }
  .az-persona__testo { padding: 1.4rem 1.3rem 1.5rem; }
}