/* ==========================================================================
   Studio Da Silva, versão 3.0
   Folha de estilo única para as quatro páginas. Ordem: tokens, base,
   utilitários, botões, header, hero, blocos compartilhados, seções da home,
   seções das páginas internas, CTA, contatos, rodapé, movimento, responsivo.

   Paleta do cliente (originais/documentos/Paleta_Studio_Da_Silva.md):
   ardósia, petróleo, terracota e off-white. Cada área do site tem uma cor
   própria (--area), que pinta a placa do hero, os números e os fios das
   páginas daquela área. A cor diz em que parte do Studio a pessoa está.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Cor: fundos */
  --fundo:#F7F8F9;          /* fundo geral da página */
  --branco:#fff;            /* superfície de cartão e texto sobre fundo escuro */
  --lavagem:#EDF1F3;        /* faixa fria de respiro entre seções claras */
  --heroFundo:#EBF6FD;      /* terreno do hero em todas as páginas */

  /* Cor: escuros, do mais fundo para o mais claro */
  --texto:#2C353E;          /* texto longo e rodapé */
  --ardosiaEscura:#3E4E5C;  /* fundo das seções escuras */
  --ardosia:#4F6273;        /* títulos e área Sicurezza */
  --textoSuave:#55636F;     /* parágrafo secundário, passa AA em todo fundo claro */

  /* Cor: marca */
  --petroleo:#5A8B92;       /* elemento gráfico sobre fundo claro (3:1) */
  --petroleoEscuro:#47737A; /* faixa de CTA e área Formazione */
  --terracota:#9A4248;      /* ação, link e área Marketing */
  --terracotaEscura:#7E353A;/* hover da ação */
  --terracotaClara:#DB868D; /* terracota legível sobre fundo escuro (4.6:1) */
  --petroleoClaro:#A3CCD1;  /* acento e superfície de hover sobre fundo escuro */
  --azulMarca:#1A648B;      /* azul do letreiro da logo (6.3:1 sobre o fundo) */

  /* Cor de área: todas passam AA com texto branco, exceto a da home, que
     só pinta superfície sem texto em cima. */
  --areaHome:var(--petroleo);
  --areaSicurezza:var(--ardosia);
  --areaFormazione:var(--petroleoEscuro);
  --areaMarketing:var(--terracota);

  /* Tipografia: a serifa do letreiro da logo (Gelasio, a versão web da
     família Georgia) marca o nome e os títulos de abertura; Bricolage
     Grotesque nos demais títulos; Poppins no corpo. */
  --fonteMarca:'Gelasio',Georgia,serif;
  --fonteTitulo:'Bricolage Grotesque',sans-serif;

  --borda:rgba(79,98,115,.16);
  --bordaEscura:rgba(163,204,209,.28);

  /* Espaço: escala de 4px */
  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:88px; --e10:120px;

  /* Raio: nada acima de 20px em bloco grande */
  --raio-sm:12px;
  --raio-md:16px;
  --raio-lg:20px;

  /* Sombra: só hover e foto. Nenhum cartão em repouso. */
  --sombra-foto:0 24px 60px rgba(44,53,62,.14);
  --sombra-hover:0 14px 32px rgba(44,53,62,.10);

  /* Transição */
  --t-rapida:180ms cubic-bezier(.2,.7,.3,1);
  --t-media:240ms cubic-bezier(.2,.7,.3,1);
  --t-lenta:320ms cubic-bezier(.22,.72,.28,1);

  /* Altura do header, usada pelo título que gruda na rolagem */
  --alturaHeader:82px;
}

/* Cor de área por página: a classe fica no <body>. */
.pagina-home{--area:var(--areaHome)}
.pagina-sicurezza{--area:var(--areaSicurezza)}
.pagina-formazione{--area:var(--areaFormazione)}
.pagina-marketing{--area:var(--areaMarketing)}

/* --- Base --------------------------------------------------------------- */

/* Skip link: fora da tela até receber foco pelo teclado. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--texto);color:var(--branco);padding:var(--e3) var(--e5);border-radius:0 0 var(--raio-sm) 0;font-weight:700}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:3px solid var(--petroleoClaro);outline-offset:-6px}
main:focus{outline:none}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--alturaHeader)}
body{font-family:'Poppins',sans-serif;font-size:clamp(16px,.35vw + 15px,17px);background:var(--fundo);color:var(--texto);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
section{padding:var(--e9) 0}
h1,h2,h3{font-family:var(--fonteTitulo);line-height:1.1;color:var(--texto);text-wrap:balance}
h2{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.015em}
h3{font-size:clamp(18px,1.5vw,20px);font-weight:700;line-height:1.25}
p{text-wrap:pretty}
::selection{background:var(--petroleoClaro);color:var(--texto)}
.tabella-corsi td{font-variant-numeric:tabular-nums}

/* Anel de foco: ardósia sobre superfície clara, petróleo claro sobre
   superfície escura. Em ambos os casos passa 3:1 contra o fundo adjacente. */
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--ardosia);outline-offset:3px}
.sezione-scura :focus-visible,
.cta :focus-visible,
footer :focus-visible{outline-color:var(--petroleoClaro)}

/* --- Utilitários -------------------------------------------------------- */
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}

/* --- Botões ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);border-radius:999px;padding:var(--e4) 28px;font-size:15px;font-weight:800;line-height:1.3;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:background-color var(--t-rapida),color var(--t-rapida),transform var(--t-media),box-shadow var(--t-media)}
.btn svg{width:19px;height:19px;flex:0 0 auto;transition:transform var(--t-media)}
.btn-primary{background:var(--terracota);color:var(--branco);box-shadow:0 8px 20px rgba(154,66,72,.20)}
.btn-primary:hover{background:var(--terracotaEscura);transform:translateY(-2px);box-shadow:0 12px 26px rgba(154,66,72,.24)}
.btn-primary:hover svg{transform:translateX(2px)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 10px rgba(154,66,72,.26)}
/* Secundário do hero, sobre o terreno claro. */
.btn-outline-brand{border-color:var(--ardosia);color:var(--ardosia);background:transparent}
.btn-outline-brand:hover{background:var(--ardosia);color:var(--branco);transform:translateY(-2px)}
.btn-outline-brand:active{transform:translateY(0)}
/* Sobre a faixa petróleo de CTA. */
.btn-on-accent{background:var(--branco);color:var(--petroleoEscuro);box-shadow:0 8px 20px rgba(44,53,62,.16)}
.btn-on-accent:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(44,53,62,.20)}
.btn-on-accent:active{transform:translateY(0)}

/* Link de texto com seta, dentro de blocos de conteúdo. */
.link-seta{display:inline-flex;white-space:nowrap;align-items:center;gap:var(--e2);font-weight:700;color:var(--terracota);border-bottom:1px solid currentColor;padding-bottom:2px;transition:color var(--t-rapida),gap var(--t-media)}
.link-seta svg{width:16px;height:16px;flex:0 0 auto}
.link-seta:hover{color:var(--terracotaEscura);gap:var(--e3)}
.link-seta:active{color:var(--terracota)}

/* --- Header ------------------------------------------------------------- */
header{position:sticky;top:0;z-index:60;background:var(--fundo);border-bottom:1px solid var(--borda)}
.header-inner{height:var(--alturaHeader);display:flex;align-items:center;justify-content:space-between;gap:var(--e5);position:relative}
.logo{display:flex;align-items:center;gap:var(--e3);font-family:var(--fonteTitulo);flex:0 0 auto}
.logo-badge{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto}
.logo-badge img{width:46px;height:46px;object-fit:contain;transition:transform var(--t-lenta)}
.logo:hover .logo-badge img{transform:translateY(-2px) rotate(-3deg)}
/* O nome sai na serifa e no azul do letreiro da logo. */
.logo-text strong{display:block;font-family:var(--fonteMarca);font-size:20px;font-weight:600;color:var(--azulMarca);line-height:1.1;letter-spacing:.005em}
.logo-text span{display:block;font-size:11px;color:var(--terracota);font-weight:600;letter-spacing:.03em}
.main-nav{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--texto)}
.main-nav a{position:relative;font-weight:500;padding-block:var(--e1)}
.main-nav a:after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:var(--terracota);transform:scaleX(0);transform-origin:left;transition:transform var(--t-lenta)}
.main-nav a:hover:after,.main-nav a:focus-visible:after,.main-nav a[aria-current="page"]:after{transform:scaleX(1)}
.main-nav a[aria-current="page"]{font-weight:700}
.mobile-nav-cta{display:none}
.header-actions{display:flex;align-items:center;gap:var(--e3);flex:0 0 auto}
.mobile-menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--borda);border-radius:var(--raio-sm);background:rgba(255,255,255,.6);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;transition:background-color var(--t-rapida)}
.mobile-menu-toggle:hover{background:var(--branco)}
.mobile-menu-toggle span{display:block;width:21px;height:2px;border-radius:99px;background:var(--texto);transition:transform var(--t-media),opacity var(--t-rapida)}
.mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.is-open span:nth-child(2){opacity:0}
.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Seletor de idioma -------------------------------------------------- */
.lang-switch{display:flex;align-items:center;gap:9px}
.lang-btn{width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:none;display:block;line-height:0;opacity:.62;transition:opacity var(--t-rapida),transform var(--t-media),border-color var(--t-media);flex:0 0 auto}
.lang-btn svg{width:100%;height:100%;display:block}
.lang-btn:hover{opacity:1;transform:translateY(-2px)}
.lang-btn:active{transform:translateY(0)}
.lang-btn.is-active{opacity:1;border-color:var(--terracota)}

/* --- Hero (todas as páginas) -------------------------------------------- */
/* A assinatura do site: a pessoa sai de uma placa na cor da área. A placa e
   a foto apoiam na borda de baixo da seção, por isso o hero não tem
   padding inferior; quem dá respiro ao texto é a própria coluna. */
.hero{background:var(--heroFundo);padding:0;overflow:hidden}
/* O hero ocupa a primeira dobra (até 900px de altura): a imagem apoia no
   fim da tela, não no meio dela. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--e7);min-height:clamp(620px,calc(100svh - var(--alturaHeader)),900px)}
.hero-texto{align-self:center;padding:var(--e9) 0}
.hero h1{font-family:var(--fonteMarca);font-size:clamp(34px,4.4vw,58px);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin-bottom:var(--e5)}
/* H1 em linhas fixas: a quebra vem do texto (
 no HTML e no dicionário). */
.hero h1.titolo-righe{white-space:pre-line;text-wrap:wrap;font-size:clamp(34px,4.7vw,68px);line-height:1.04}
.hero-texto > p{font-size:clamp(18px,1.6vw,22px);line-height:1.6;color:var(--textoSuave);max-width:46ch;margin-bottom:var(--e6)}
.hero-actions{display:flex;gap:var(--e4);flex-wrap:wrap;margin-bottom:28px}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);font-size:13px;color:var(--textoSuave);font-weight:600}
.hero-trust div{display:flex;align-items:center;gap:var(--e2)}
.hero-trust svg{width:18px;height:18px;color:var(--petroleoEscuro);flex:0 0 auto}

.hero-figura{position:relative;align-self:end;height:clamp(540px,calc(100svh - var(--alturaHeader) - var(--e6)),820px);display:flex;align-items:flex-end;justify-content:center}
.hero-placa{position:absolute;left:4%;right:0;bottom:0;height:68%;background:var(--area);border-radius:var(--raio-lg) var(--raio-lg) 0 0;transform-origin:bottom}
.hero-figura img{position:relative;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom}
/* Recorte do notebook: a máquina foi cortada na borda direita da foto, então
   a imagem encosta na borda direita da placa para o corte parecer intencional. */
.hero-figura--direita{justify-content:flex-end}
/* Busto (home): recorte do joelho para cima, maior, à esquerda do centro
   da placa, com sombra que assenta a figura no fundo. */
.hero-figura--busto{justify-content:flex-start}
.hero-figura--busto .hero-placa{left:16%;right:0;height:74%}
.hero-figura--busto img{margin-left:2%;filter:drop-shadow(-22px 16px 28px rgba(44,53,62,.30))}
/* Foto com fundo (Sicurezza, Marketing): moldura arredondada só em cima, apoiada
   na borda da seção, com a placa deslocada por trás. */
.hero-figura--foto{justify-content:flex-start}
.hero-figura--foto .hero-placa{left:18%;height:78%}
.hero-figura--foto img{width:min(80%,440px);height:auto;max-height:94%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:var(--raio-lg) var(--raio-lg) 0 0}

/* --- Blocos compartilhados ---------------------------------------------- */

/* Cabeça de seção assimétrica: título à esquerda, apoio à direita. */
.sezione-testa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--e5) var(--e8);align-items:end;margin-bottom:var(--e7)}
.sezione-testa h2{max-width:20ch}
.sezione-testa > p{color:var(--textoSuave);max-width:46ch}

/* Split: título que gruda à esquerda enquanto o conteúdo rola à direita. */
.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--e8);align-items:start}
.split-titolo{position:sticky;top:calc(var(--alturaHeader) + var(--e6))}
.split-titolo > p{color:var(--textoSuave);max-width:44ch;margin-top:var(--e4)}
.split-corpo > p{color:var(--textoSuave);max-width:62ch;margin-bottom:var(--e5)}
.split-corpo h3{margin:var(--e6) 0 var(--e4)}

/* Lista com marcador quadrado na cor da área. */
.lista-punti{list-style:none;display:grid;gap:var(--e3)}
.lista-punti li{display:grid;grid-template-columns:18px 1fr;gap:var(--e3);color:var(--textoSuave)}
.lista-punti li:before{content:'';width:8px;height:8px;margin-top:.62em;border-radius:2px;background:var(--area)}
.lista-punti--grande{font-size:clamp(17px,1.4vw,19px);gap:var(--e4)}

/* Seção clara alternada, para separar duas seções brancas seguidas. */
.fundo-lavagem{background:var(--lavagem)}

/* Nota de rodapé de bloco: informação legal que complementa a lista. */
.nota{margin-top:var(--e6);padding:var(--e4) var(--e5);background:var(--lavagem);border-radius:var(--raio-sm);font-size:15px;color:var(--textoSuave);max-width:62ch}

/* Vozes: blocos de texto separados por fio na cor da área, sem cartão. */
.voci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e7) var(--e6)}
.voce{border-top:2px solid var(--area);padding-top:var(--e5)}
.voce h3{margin-bottom:var(--e3)}
.voce p{color:var(--textoSuave);font-size:15px}
.voce .lista-punti{margin-top:var(--e4);font-size:15px}
.voce .link-seta{margin-top:var(--e4);font-size:15px}
.voce-ideale{margin-top:var(--e4);font-size:14px;color:var(--textoSuave)}
.voci--tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.voci--uma{grid-template-columns:1fr;gap:var(--e6)}

/* Passos: sequência real (método, reserva). O número existe porque a
   ordem importa. Sobre fundo escuro. */
.sezione-scura{background:var(--ardosiaEscura);color:var(--branco)}
.sezione-scura h2{color:var(--branco)}
.sezione-scura .sezione-testa > p{color:rgba(255,255,255,.80)}
.sezione-scura .lista-punti li{color:rgba(255,255,255,.86)}
.sezione-scura .lista-punti li:before{background:var(--petroleoClaro)}
.passi{list-style:none;counter-reset:passo;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--e6) var(--e6)}
.passi li{counter-increment:passo;border-top:1px solid var(--bordaEscura);padding-top:var(--e5)}
.passi li:before{content:counter(passo,decimal-leading-zero);display:block;font-family:var(--fonteTitulo);font-size:clamp(40px,4vw,56px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--petroleoClaro);margin-bottom:var(--e4)}
.passi h3{color:var(--branco);margin-bottom:var(--e2)}
.passi p{color:rgba(255,255,255,.80);font-size:15px}

/* Foto vertical dentro de uma seção. */
.foto-sezione{border-radius:var(--raio-lg);overflow:hidden;box-shadow:var(--sombra-foto)}
.foto-sezione img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.split-titolo .foto-sezione{margin-top:var(--e6);max-width:360px}

/* --- Home: Aree (#servizi) ---------------------------------------------- */
/* Lista editorial em vez de grade de cartões: o nome da área em tipo grande
   é o elemento gráfico. No hover, a linha se pinta da cor da área. */
.aree-lista{list-style:none;border-top:1px solid var(--borda)}
.area-link{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 52px;gap:var(--e6);align-items:center;padding:var(--e6) var(--e5);border-bottom:1px solid var(--borda);transition:color var(--t-lenta)}
.area-link:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--cor);transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-lenta)}
.area-link--sicurezza{--cor:var(--areaSicurezza)}
.area-link--formazione{--cor:var(--areaFormazione)}
.area-link--marketing{--cor:var(--areaMarketing)}
.area-nome{display:flex;align-items:center;gap:var(--e4);font-family:var(--fonteMarca);font-size:clamp(28px,3.6vw,48px);font-weight:500;letter-spacing:-.015em;line-height:1.05}
.area-nome:before{content:'';flex:0 0 auto;width:14px;height:14px;border-radius:4px;background:var(--cor);transition:background-color var(--t-lenta)}
.area-desc{display:block;color:var(--textoSuave);font-size:15px;transition:color var(--t-lenta)}
/* O que cada área faz, em duas colunas curtas abaixo da descrição. */
.area-punti{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2) var(--e5);margin-top:var(--e4);font-size:14px;font-weight:500;color:var(--texto);transition:color var(--t-lenta)}
.area-punti li{display:grid;grid-template-columns:14px 1fr;gap:var(--e2)}
.area-punti li:before{content:'';width:6px;height:6px;margin-top:.6em;border-radius:2px;background:var(--cor);transition:background-color var(--t-lenta)}
.area-seta{width:52px;height:52px;border-radius:50%;border:1px solid var(--borda);display:grid;place-items:center;transition:border-color var(--t-lenta),transform var(--t-lenta)}
.area-seta svg{width:20px;height:20px}
.area-link:hover,.area-link:focus-visible{color:var(--branco)}
.area-link:hover:before,.area-link:focus-visible:before{transform:scaleY(1)}
.area-link:hover .area-desc,.area-link:focus-visible .area-desc,.area-link:hover .area-punti,.area-link:focus-visible .area-punti{color:rgba(255,255,255,.92)}
.area-link:hover .area-punti li:before,.area-link:focus-visible .area-punti li:before{background:var(--branco)}
.area-link:hover .area-nome:before,.area-link:focus-visible .area-nome:before{background:var(--branco)}
.area-link:hover .area-seta,.area-link:focus-visible .area-seta{border-color:rgba(255,255,255,.6);transform:translateX(6px)}
.area-link:active .area-seta{transform:translateX(2px)}
.area-link:focus-visible{outline-offset:-3px;outline-color:var(--branco)}

/* --- Home: Chi siamo (#chi-sono) -------------------------------------- */
.about-grid{display:grid;grid-template-columns:.8fr 1fr;gap:var(--e8);align-items:center}
.about-text h2{margin-bottom:var(--e5)}
.about-text p{margin:0 0 var(--e5);color:var(--textoSuave);max-width:58ch}
.about-text .lista-punti{margin:var(--e6) 0 var(--e6);font-size:15px}

/* --- Home: verifiche (#formazione) -------------------------------------- */
/* Duas listas sempre visíveis, sobre a seção escura. */
.verifiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e6);margin-bottom:var(--e7)}
.verifica{border-top:1px solid var(--bordaEscura);padding-top:var(--e5)}
.verifica h3{color:var(--branco);margin-bottom:var(--e4)}

/* --- Sicurezza: figure previste ----------------------------------------- */
/* A sigla em tipo grande identifica o papel como ele aparece nos documentos
   (DL, RSPP, RLS...). */
.ruoli{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e7) var(--e6)}
.ruolo-sigla{display:block;font-family:var(--fonteTitulo);font-size:clamp(34px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--area);margin-bottom:var(--e3)}
.ruolo h3{margin-bottom:var(--e2)}
.ruolo p{color:var(--textoSuave);font-size:15px}

/* --- Sicurezza: sanzioni ----------------------------------------------- */
.voci--avviso .voce{border-top-color:var(--terracota)}
.voci--avviso h3{color:var(--terracota)}
.voci--avviso p{font-size:16px}

/* --- Formazione: catalogo corsi ----------------------------------------- */
/* Lista por curso sobre a marcação de tabela: o nome à esquerda é o único
   texto que quebra linha; à direita, destinatários, referência, duração e
   modalidade, cada um numa linha com rótulo. O cabeçalho da tabela sai da
   tela mas continua para leitor de tela; o rótulo visível é aria-hidden. */
.tabella-wrap{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio-md);overflow:hidden}
.tabella-corsi{display:block;width:100%;font-size:15px}
.tabella-corsi thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Três colunas no tbody (nome, rótulo, valor) e cada linha herda por
   subgrid: rótulos e valores começam no mesmo x em todos os cursos, os
   valores terminam na borda direita e o rótulo fica a 32px do valor. */
.tabella-corsi tbody{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:var(--e6)}
.tabella-corsi tr{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:var(--e2) var(--e6);padding:var(--e5) var(--e6);border-bottom:1px solid var(--borda);transition:background-color var(--t-rapida)}
.tabella-corsi tbody tr:last-child{border-bottom:0}
.tabella-corsi tbody tr:hover{background:var(--lavagem)}
.tabella-corsi th{grid-row:1 / span 4;font-family:var(--fonteTitulo);font-size:clamp(17px,1.5vw,19px);font-weight:700;line-height:1.3;text-align:left;color:var(--texto)}
.tabella-corsi td{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;column-gap:var(--e6);align-items:baseline;white-space:nowrap}
.cella-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--textoSuave)}
.tabella-corsi .rif .cella-valor{font-size:14px;color:var(--textoSuave)}
.tabella-corsi .durata .cella-valor{font-weight:700;color:var(--area)}
/* Cada norma é um bloco inteiro: se não couber, a referência passa para a
   linha de baixo só no ponto e vírgula, nunca no meio de uma norma. */
.norma{white-space:nowrap}
.tabella-nota{margin-top:var(--e5);font-size:14px;color:var(--textoSuave);max-width:70ch}

/* --- Faixa de CTA ------------------------------------------------------- */
/* Petróleo escuro com texto branco: 5.1:1. */
.cta{padding:var(--e8) 0;background:var(--petroleoEscuro);color:var(--branco)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--e6);flex-wrap:wrap}
.cta h2{color:var(--branco);font-size:clamp(26px,3vw,36px);max-width:24ch}
.cta p{max-width:56ch;color:rgba(255,255,255,.94);margin-top:var(--e3)}

/* --- Contatti (#contatti) ----------------------------------------------- */
.contact-new{background:var(--fundo);padding:var(--e9) 0}
.contact-card-wrap{background:var(--branco);border-radius:var(--raio-lg);padding:var(--e7)}
.contact-flex{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--e7);align-items:center}
.contact-left p{color:var(--textoSuave);margin:var(--e4) 0 28px;max-width:52ch}
.contact-left .btn svg:last-child{width:16px;height:16px}
.contact-info-list{display:grid;gap:var(--e4)}
.info-box{display:block;background:var(--lavagem);border-radius:var(--raio-md);padding:var(--e4) var(--e5)}
.info-box .label{display:block;font-size:12px;color:var(--textoSuave);margin-bottom:var(--e1);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
/* O e-mail é uma palavra só e mais larga que o cartão em telas de 320px:
   sem isso ele empurra a página inteira e cria rolagem lateral. */
.info-box .value{display:block;font-size:16px;font-weight:700;color:var(--texto);overflow-wrap:anywhere}
.info-box-link{transition:transform var(--t-media),box-shadow var(--t-media),background-color var(--t-media);cursor:pointer}
.info-box-link:hover{transform:translateX(4px);box-shadow:var(--sombra-hover)}
.info-box-link:active{transform:translateX(0)}
.info-box-link .value{color:var(--terracota)}

/* --- Footer ------------------------------------------------------------- */
footer{background:var(--texto);color:var(--branco);padding:var(--e7) 0 30px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--e5);flex-wrap:wrap}
.footer-logo{display:flex;align-items:center;gap:var(--e3)}
.footer-logo .logo-text strong{color:var(--branco)}
.footer-logo .logo-text span{color:var(--terracotaClara)}
.footer-links{display:flex;gap:var(--e5);font-size:14px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{opacity:.85;padding-block:var(--e1);transition:opacity var(--t-rapida),color var(--t-rapida)}
.footer-links a:hover{opacity:1;color:var(--petroleoClaro)}
.footer-divider{border:none;border-top:1px solid rgba(255,255,255,.15);margin:28px 0 0}
.footer-bottom-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5);font-size:12px;color:rgba(255,255,255,.70)}
.footer-zamp{text-align:right}
.footer-zamp a{color:var(--branco);text-decoration:none;transition:color var(--t-rapida)}
.footer-zamp a:hover,.footer-zamp a:active,.footer-zamp a:focus-visible{color:var(--terracotaClara);text-decoration:none}

/* --- Movimento: entrada do hero ----------------------------------------- */
/* Só com JS ativo (.js-anim no <html>), para que sem JS nada fique escondido.
   Coreografia: a placa sobe do chão, a pessoa entra logo depois, e o texto
   chega em defasagem com distância e duração próprias por filho. */
@keyframes entraSuave{from{opacity:0;transform:translateY(var(--sobe,14px))}to{opacity:1;transform:none}}
@keyframes placaSobe{from{transform:scaleY(.6)}to{transform:none}}

.js-anim .hero-texto > *{opacity:0;animation:entraSuave var(--dur,560ms) var(--curva,cubic-bezier(.22,.72,.28,1)) var(--atraso,0ms) both}
.js-anim .hero-texto > *:nth-child(1){--sobe:10px;--dur:480ms;--atraso:80ms}
.js-anim .hero-texto > *:nth-child(2){--sobe:20px;--dur:720ms;--atraso:150ms;--curva:cubic-bezier(.18,.68,.32,1)}
.js-anim .hero-texto > *:nth-child(3){--sobe:16px;--dur:620ms;--atraso:280ms}
.js-anim .hero-texto > *:nth-child(4){--sobe:12px;--dur:540ms;--atraso:400ms;--curva:cubic-bezier(.25,.8,.3,1)}
.js-anim .hero-texto > *:nth-child(5){--sobe:8px;--dur:600ms;--atraso:520ms}
.js-anim .hero-placa{animation:placaSobe 640ms cubic-bezier(.2,.75,.25,1) 60ms both}
.js-anim .hero-figura img{opacity:0;animation:entraSuave 820ms cubic-bezier(.16,.7,.3,1) 220ms both;--sobe:36px}

/* --- Movimento: revelação no scroll ------------------------------------- */
/* As variáveis --sobe, --dur, --curva e --atraso são escritas por
   assets/js/reveal.js, elemento a elemento. */
.js-anim .reveal{opacity:0;transform:translateY(var(--sobe,16px));transition:opacity var(--dur,560ms) var(--curva,cubic-bezier(.22,.72,.28,1)) var(--atraso,0ms),transform var(--dur,560ms) var(--curva,cubic-bezier(.22,.72,.28,1)) var(--atraso,0ms)}
.js-anim .reveal.is-in{opacity:1;transform:none}

/* --- Responsivo --------------------------------------------------------- */

/* Seis links mais logotipo e bandeiras não cabem abaixo de 1140px: o menu
   vira hambúrguer aqui, antes do resto do layout mudar. */
@media(max-width:1140px){
  .main-nav{position:absolute;top:calc(100% + var(--e2));left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:var(--e3);border:1px solid var(--borda);border-radius:var(--raio-lg);background:rgba(247,248,249,.99);box-shadow:0 20px 50px rgba(44,53,62,.14);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity var(--t-media),transform var(--t-media),visibility var(--t-media)}
  .main-nav.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
  .main-nav a{padding:var(--e4) var(--e3);border-radius:var(--raio-sm);transition:background-color var(--t-rapida)}
  .main-nav a:hover{background:var(--branco)}
  .main-nav a:after{display:none}
  .main-nav a[aria-current="page"]{color:var(--terracota)}
  .mobile-menu-toggle{display:inline-flex}
  .mobile-nav-cta{display:flex;justify-content:center;margin-top:var(--e2);background:var(--terracota);color:var(--branco);font-weight:800;border-radius:999px;padding:var(--e4)}
  .mobile-nav-cta:hover{background:var(--terracotaEscura)}
}

@media(max-width:980px){
  .about-grid,.contact-flex,.split{grid-template-columns:1fr;gap:var(--e6)}
  #chi-sono .foto-sezione{order:1;max-width:520px}
  .split-titolo{position:static}
  .sezione-testa{grid-template-columns:1fr;align-items:start}
  .voci--tre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ruoli{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area-link{grid-template-columns:minmax(0,1fr) 52px;gap:var(--e3) var(--e5)}
  .area-info{grid-column:1;grid-row:2}
  .area-seta{grid-column:2;grid-row:1 / span 2}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
  .hero-texto{padding:var(--e8) 0 var(--e6)}
  .hero-figura{height:clamp(420px,70vw,560px);max-width:560px;width:100%;margin-inline:auto}
  .cta-inner{display:block;text-align:center}
  .cta h2,.cta p{margin-inline:auto}
  .cta .btn{margin-top:var(--e5)}
  .contact-card-wrap{padding:var(--e6) var(--e5)}
  .info-box{padding:var(--e4)}
}

@media(max-width:640px){
  :root{--alturaHeader:70px}
  section{padding:var(--e8) 0}
  .voci,.voci--tre,.ruoli,.verifiche{grid-template-columns:1fr}
  .voci{gap:var(--e6)}
  /* O cabeçalho não comporta a assinatura ao lado do nome nesta largura: a
     assinatura sai e o nome ocupa a linha. Ela continua visível no rodapé. */
  .header-inner{gap:var(--e4)}
  .logo-text span{display:none}
  .logo-text strong{font-size:15px;line-height:1.2}
  .logo-badge,.logo-badge img{width:40px;height:40px}
  .header-actions{gap:var(--e2)}
  .hero-texto{padding:var(--e7) 0 var(--e5)}
  .hero-actions{flex-direction:column;align-items:stretch;gap:var(--e3)}
  .hero-actions .btn{width:100%}
  .hero-trust{gap:var(--e3)}
  .hero-trust div{width:100%}
  .hero-figura{height:clamp(360px,108vw,460px)}
  /* H1 da home maior: as quatro linhas fixas ocupam a largura do container
     (100vw - 40px). A medida segue a linha mais longa de cada idioma: "em um
     só estúdio." (8em) em IT e PT, "and communication" (8,9em) em EN. */
  .hero h1.titolo-righe{font-size:clamp(34px,calc(12.3vw - 4.9px),48px);line-height:1.02}
  html:lang(en) .hero h1.titolo-righe{font-size:clamp(34px,calc(11.1vw - 4.5px),48px)}
  /* Busto maior e centrado, com a placa simétrica atrás. A imagem é a mesma
     do desktop; o recorte é feito pelo aspect-ratio com object-fit. */
  .hero-figura--busto{height:clamp(400px,120vw,500px);justify-content:center}
  .hero-figura--busto .hero-placa{left:6%;right:6%}
  .hero-figura--busto img{margin-left:0;object-fit:cover;object-position:top}
  /* Home: corte logo abaixo da mão com os óculos (y 1480 de 1739). */
  .pagina-home .hero-figura--busto img{aspect-ratio:1000/1480}
  /* Formazione: corte um pouco abaixo da cintura (y 1200 de 1518) e 150px
     da esquerda vazia fora, para a pessoa cair no centro da caixa. */
  .pagina-formazione .hero-figura--busto img{aspect-ratio:850/1200;object-position:right top}
  .hero-figura--foto img{width:82%}
  .area-link{padding:var(--e5) var(--e2)}
  .area-seta{width:44px;height:44px}
  .area-punti{grid-template-columns:1fr}
  /* Uma coluna: o nome em cima e os dados embaixo, rótulo sobre o valor.
     Nesta largura a referência e os destinatários podem descer de linha. */
  .tabella-corsi tbody{display:block}
  .tabella-corsi tr{grid-template-columns:minmax(0,1fr);gap:var(--e3);padding:var(--e5) var(--e4)}
  .tabella-corsi th{grid-row:auto}
  .tabella-corsi td{grid-column:auto;grid-template-columns:minmax(0,1fr);gap:0;white-space:normal}
  .footer-inner{flex-direction:column;text-align:center}
  /* Sete links em grade de três colunas, na ordem do HTML. */
  .footer-links{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;justify-items:center;gap:var(--e3) var(--e5)}
  .footer-bottom-row{flex-direction:column;text-align:center;gap:var(--e2)}
  .footer-zamp{text-align:center}
  /* Aviso de direitos em duas linhas: a razão social em uma, a ressalva na
     outra. São duas chaves de tradução, e cada uma vira bloco aqui. */
  .footer-legal span{display:block}
  .lang-btn{width:28px;height:28px}
  .lang-switch{gap:6px}
}

/* Abaixo de 360px o cabeçalho não cabe com as medidas da faixa mobile: o
   bloco de ações empurrava o logotipo para fora do container. */
@media(max-width:360px){
  .header-inner{gap:var(--e3)}
  .logo{gap:var(--e2)}
  .logo-badge,.logo-badge img{width:34px;height:34px}
  .logo-text strong{font-size:14px}
  .lang-btn{width:26px;height:26px}
  .lang-switch{gap:var(--e1)}
}

/* --- Movimento reduzido ------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Nada entra: o conteúdo já nasce no lugar. */
  .js-anim .hero-texto > *,.js-anim .hero-figura img{opacity:1;animation:none}
  .js-anim .hero-placa{animation:none}
  .js-anim .reveal{opacity:1;transform:none}
}