/* La pelle nuova — prototipo della home approvato il 9 novembre 2026, estesa a
   Lo studio e poi a tutte le pagine il 10 novembre: base.html mette
   body.pelle-casa ovunque (la home ha anche .pagina-home, Lo studio
   .pagina-studio). Qui le classi .casa-* e .studio-*; sito.css porta la stessa
   palette per le pagine interne; testata e piede stanno in cornice.css.
   Contrasto: l'ocra #A8762A su crema fa 3,5:1 e va solo sui titoli grandi;
   le scritte piccole in ocra usano #7A5318. #C9954A su navy fa 5,8:1. */

body.pelle-casa{
  --c-navy:#0B2540; --c-crema:#F8F1E7; --c-ocra:#A8762A; --c-ocra-navy:#C9954A;
  --c-ocra-scuro:#7A5318; --c-testo:#24364D; --c-tenue:#3D4E63; --c-linea:#D9CDB8;
  --c-sabbia:#EDE3D2; --c-chiaro:#DCE3EA;
  --c-titoli:"League Gothic",Impact,"Arial Narrow",sans-serif;
  --c-serif:"Source Serif 4",Georgia,serif;
  background:var(--c-crema);color:var(--c-navy);font-family:Inter,system-ui,sans-serif;
}
:where(.pelle-casa) :is(h1,h2,h3){font-family:var(--c-titoli);font-weight:400;color:inherit}
.pelle-casa .ocra{color:var(--c-ocra)}
.casa-etichetta,.casa-occhio{font:600 12px/1.4 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--c-tenue)}


/* ---- bottoni ---- */
.casa-btns{display:flex;flex-wrap:wrap;gap:16px}
.casa-btn{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;padding:16px 26px;font:600 14px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.casa-btn--ocra{background:var(--c-ocra-navy);color:var(--c-navy)}
.casa-btn--chiaro{box-shadow:inset 0 0 0 1px var(--c-crema);color:var(--c-crema)}
.casa-btn--bordo{box-shadow:inset 0 0 0 1px var(--c-navy);color:var(--c-navy)}
.casa-btn--navy{padding:20px 34px;background:var(--c-navy);color:var(--c-crema);font-size:15px}
.casa-btn:hover{filter:brightness(1.08)}
.casa-btn--bordo:hover,.casa-btn--chiaro:hover{filter:none;box-shadow:inset 0 0 0 2px currentColor}
.casa-link{display:inline-flex;align-items:center;gap:12px;padding:13px 0;font:600 14px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ocra-scuro)}
.casa-link:hover{color:var(--c-navy)}

/* ---- hero in due blocchi ---- */
.casa-hero{display:flex;flex-wrap:wrap;min-height:620px}
.casa-hero-titolo{flex:1 1 420px;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:64px 48px 72px var(--margine)}
.casa-hero-titolo h1{font-size:clamp(72px,10vw,148px);line-height:.92;text-transform:uppercase;color:var(--c-navy)}
.casa-hero-navy{flex:1.5 1 480px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:36px;padding:88px var(--margine) 88px clamp(32px,5vw,80px);background:var(--c-navy);color:var(--c-crema)}
.casa-hero-navy>*{position:relative}
.casa-foto{position:absolute!important;inset:0;background:center 40%/cover}
/* La foto si legge a destra e sparisce sotto il testo: il navy pieno a
   sinistra tiene il contrasto delle scritte piccole in ocra. */
.casa-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,37,64,.97) 0%,rgba(11,37,64,.93) 55%,rgba(11,37,64,.62) 100%)}
.casa-sotto{max-width:560px;padding-left:24px;border-left:2px solid var(--c-ocra-navy);font:400 clamp(20px,2vw,27px)/1.4 var(--c-serif)}
.casa-ultimo{display:block;max-width:560px;padding-top:20px;border-top:1px solid rgba(248,241,231,.28);font-size:15px;line-height:1.5;color:var(--c-crema)}
.casa-ultimo b{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ocra-navy)}
.casa-ultimo:hover{color:#fff}
.casa-credito{position:absolute!important;right:16px;bottom:12px;font-size:11px;color:rgba(248,241,231,.72)}

/* ---- al lavoro con ---- */
.casa-clienti{border-bottom:1px solid var(--c-linea)}
.casa-clienti .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;padding:26px 0}
.casa-clienti img{height:42px;width:auto;filter:grayscale(1);opacity:.85}
.casa-clienti .nome-testo{font:600 19px var(--c-serif)}

/* ---- le tre colonne ---- */
.casa-tre .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 56px;padding:88px 0}
.casa-tre .n{font:400 44px/1 var(--c-titoli);color:var(--c-ocra)}
.casa-tre h2{margin:12px 0;font:600 15px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.casa-tre p:last-child{font-size:17px;line-height:1.55;color:var(--c-testo)}
.casa-persone{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-top:28px;border-top:1px solid var(--c-linea)}
.casa-tre .casa-persone p{font:400 20px/1.4 var(--c-serif);color:var(--c-navy)}

/* ---- il banco di lavoro ---- */
.casa-lavori .wrap{padding-bottom:88px}
.casa-lavori-testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;padding-top:28px;border-top:2px solid var(--c-navy)}
.casa-lavori-testa h2{margin-top:8px;font-size:clamp(44px,5vw,68px);line-height:1;text-transform:uppercase}
/* Tre per riga: con cinque lavori viene 3 + 2, non quattro e uno da solo. */
.casa-schede{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.casa-scheda{display:flex;flex-direction:column;background:#FFFDF8;box-shadow:inset 0 0 0 1px var(--c-linea)}
.casa-scheda img{width:100%;height:190px;object-fit:cover;object-position:top;border-bottom:1px solid var(--c-linea);filter:grayscale(1);transition:filter .4s}
.casa-scheda:hover img,.casa-scheda:focus-visible img{filter:none}
.casa-scheda-testo{display:flex;flex-direction:column;gap:10px;padding:22px}
.casa-scheda .chi{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ocra-scuro)}
.casa-scheda h3{font:600 25px/1.15 var(--c-serif);text-transform:none}
.casa-scheda p:last-child{font-size:15px;line-height:1.5;color:var(--c-testo)}
.casa-scheda:hover h3{color:var(--c-ocra-scuro)}

/* ---- ConfDesk accanto ad Aziende ---- */
.casa-porte{display:flex;flex-wrap:wrap}
.casa-porta{display:flex;flex-direction:column;gap:22px;padding:80px 64px}
.casa-porta h2{font-size:clamp(48px,5.5vw,76px);line-height:.98;text-transform:uppercase}
.casa-porta>p:not(.casa-etichetta){max-width:560px;font-size:17px;line-height:1.55}
.casa-porta--cd{flex:1.4 1 440px;padding-left:var(--margine);background:var(--c-navy);color:var(--c-crema)}
.casa-porta--cd .logo{height:30px;width:auto;align-self:flex-start}
.casa-porta--cd .casa-etichetta{color:var(--c-ocra-navy)}
.casa-porta--cd>p:not(.casa-etichetta){color:var(--c-chiaro)}
.casa-numeri{list-style:none;display:flex;flex-wrap:wrap;gap:20px 48px;padding:20px 0;border-top:1px solid rgba(248,241,231,.28);border-bottom:1px solid rgba(248,241,231,.28);font-size:14px;line-height:1.4;color:var(--c-chiaro)}
.casa-numeri b{display:block;font:400 56px/1 var(--c-titoli);color:var(--c-ocra-navy)}
.casa-porta--az{flex:1 1 340px;padding-right:var(--margine);background:var(--c-sabbia)}
.casa-porta--az .casa-etichetta{color:var(--c-ocra-scuro)}
.casa-porta--az>p:not(.casa-etichetta){color:var(--c-testo)}
.casa-porta--az .casa-btn{margin-top:auto}
.casa-incarico{max-width:560px;padding-top:18px;border-top:1px solid #C9BBA2;font-size:15px;line-height:1.5;color:var(--c-testo)}
.casa-incarico b{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ocra-scuro)}
.casa-caso{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--c-tenue)}
.casa-caso img{width:120px;height:80px;object-fit:cover;object-position:top;border:1px solid var(--c-linea)}

/* ---- Ludens, una fascia sottile ---- */
.casa-ludens{border-bottom:1px solid var(--c-linea)}
.casa-ludens .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 48px;padding:32px 0}
.casa-ludens-testo{flex:1 1 420px;display:flex;flex-direction:column;gap:6px}
.casa-ludens-testo p:last-child{font-size:16px;line-height:1.5;color:var(--c-testo)}
.casa-ludens-testo strong{font:600 19px var(--c-serif);color:var(--c-navy)}
.casa-ludens-giochi{display:flex;flex-wrap:wrap;gap:0 32px}
.casa-ludens-giochi .casa-link span{font-weight:500;letter-spacing:.08em;text-transform:none;color:var(--c-tenue)}
.casa-link--muto{color:var(--c-tenue)}

/* ---- il contatto finale ---- */
.casa-chiusa .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;padding:96px 0}
.casa-chiusa h2{font-size:clamp(56px,7vw,104px);line-height:.95;text-transform:uppercase;color:var(--c-navy)}

/* ---- Lo studio ---- */
.studio-lead{padding-left:24px;border-left:2px solid var(--c-ocra);font:400 clamp(20px,1.8vw,24px)/1.45 var(--c-serif);color:var(--c-navy)}
.studio-apertura .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 72px;align-items:end;padding:80px 0 88px}
.studio-apertura .casa-occhio{grid-column:1/-1}
.studio-apertura h1{font-size:clamp(64px,8.5vw,128px);line-height:.92;text-transform:uppercase}
.studio-apertura-testo{display:flex;flex-direction:column;gap:20px;font-size:17px;line-height:1.6;color:var(--c-testo)}
.studio-chi{background:var(--c-navy);color:var(--c-crema)}
.studio-chi .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px 72px;padding:88px 0}
.studio-chi .casa-etichetta,.studio-contatti .casa-etichetta{color:var(--c-ocra-navy)}
.studio-chi-testa p:last-child{margin-top:16px;font-size:17px;line-height:1.6;color:var(--c-chiaro)}
.studio-persone{list-style:none;border-bottom:1px solid rgba(248,241,231,.28)}
.studio-persone li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 32px;align-items:baseline;padding:26px 0;border-top:1px solid rgba(248,241,231,.28)}
.studio-persone--foto li{grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);align-items:center}
.studio-persone img{width:96px;height:96px;object-fit:cover;filter:grayscale(1)}
.studio-persone h2{font-size:clamp(36px,3.4vw,50px);line-height:1;text-transform:uppercase;color:var(--c-crema)}
.studio-persone p{font-size:16px;line-height:1.5;color:var(--c-chiaro)}
.studio-sez-testa{padding-top:28px;border-top:2px solid var(--c-navy)}
.studio-sez-testa h2{margin-top:8px;font-size:clamp(44px,5vw,68px);line-height:1;text-transform:uppercase}
.studio-principi .wrap{padding:88px 0}
.studio-tre{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 56px;margin-top:40px}
.studio-tre .n{font:400 44px/1 var(--c-titoli);color:var(--c-ocra)}
.studio-tre h3{margin:12px 0;font:600 15px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.studio-tre p:last-child{font-size:17px;line-height:1.55;color:var(--c-testo)}
.studio-tre a{font-weight:600;color:var(--c-ocra-scuro)}
.studio-tre a:hover{color:var(--c-navy)}
.studio-rete .wrap{padding:0 0 88px}
.studio-intro{max-width:760px;margin-top:20px;font-size:17px;line-height:1.6;color:var(--c-testo)}
.studio-loghi{display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;margin-top:32px}
.studio-loghi img{height:42px;width:auto;filter:grayscale(1);opacity:.85}
.studio-loghi span{font:600 19px var(--c-serif)}
.studio-contatti{background:var(--c-navy);color:var(--c-crema)}
.studio-contatti .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 72px;align-items:end;padding:96px 0}
.studio-contatti h2{margin:10px 0 28px;font-size:clamp(52px,6vw,88px);line-height:.95;text-transform:uppercase}
.studio-contatti .studio-lead{max-width:600px;border-left-color:var(--c-ocra-navy);color:var(--c-crema)}
.studio-recapiti{display:flex;flex-direction:column;gap:32px}
.studio-recapiti dl{display:grid;gap:6px}
.studio-recapiti dt{margin-top:14px;font:600 12px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ocra-navy)}
.studio-recapiti dt:first-child{margin-top:0}
.studio-recapiti dd a{font-size:18px;color:var(--c-crema);overflow-wrap:anywhere;box-shadow:inset 0 -1px 0 rgba(248,241,231,.5)}
.studio-recapiti dd a:hover{color:#fff;box-shadow:inset 0 -1px 0 #fff}

/* ---- tablet ---- */
@media (max-width:1100px){
  .casa-tre .wrap{grid-template-columns:1fr}
  .casa-tre .wrap>div{max-width:640px}
  .casa-tre .wrap>.casa-persone{max-width:none}
  .casa-schede{grid-template-columns:repeat(2,1fr)}
  .studio-tre{grid-template-columns:1fr}
  .studio-tre>div{max-width:640px}
}
/* Quando i blocchi si impilano, tutti prendono il margine della testata. */
@media (max-width:900px){
  .casa-hero-navy,.casa-porta{padding-left:var(--margine);padding-right:var(--margine)}
  .studio-apertura .wrap,.studio-chi .wrap,.studio-contatti .wrap{grid-template-columns:minmax(0,1fr)}
}

/* ---- telefono ---- */
@media (max-width:760px){
  .casa-hero{min-height:0}
  .casa-hero-titolo{flex-basis:100%;padding:36px 16px 44px}
  .casa-hero-titolo h1{font-size:21vw}
  .casa-hero-navy{flex-basis:100%;gap:28px;padding:48px 16px 56px}
  .casa-foto::after{background:linear-gradient(180deg,rgba(11,37,64,.80) 0%,rgba(11,37,64,.94) 45%,rgba(11,37,64,.97) 100%)}
  .casa-sotto{padding-left:16px;font-size:19px}
  .casa-btns{flex-direction:column}
  .casa-btn{align-self:stretch;justify-content:center}
  .casa-credito{right:auto;left:16px;bottom:14px;font-size:10px}
  .casa-clienti .wrap{gap:14px 28px}
  .casa-clienti .casa-etichetta{flex-basis:100%}
  .casa-clienti img{height:32px}
  .casa-tre .wrap{gap:36px;padding:56px 0}
  .casa-lavori .wrap{padding-bottom:56px}
  .casa-schede{grid-template-columns:1fr}
  .casa-porta{flex-basis:100%;padding:48px 16px}
  .casa-numeri{gap:16px 28px}
  .casa-numeri b{font-size:44px}
  .casa-chiusa .wrap{padding:64px 0}
  .casa-chiusa h2{font-size:15vw}
  .casa-chiusa .casa-btn{align-self:stretch}
  .casa-tre .casa-persone p{font-size:18px}
  .studio-apertura .wrap{padding:40px 0 56px}
  .studio-apertura h1{font-size:18vw}
  .studio-lead{padding-left:16px;font-size:19px}
  .studio-chi .wrap,.studio-principi .wrap{padding:56px 0}
  .studio-persone li,.studio-persone--foto li{grid-template-columns:minmax(0,1fr);padding:20px 0}
  .studio-persone img{width:72px;height:72px}
  .studio-rete .wrap{padding-bottom:56px}
  .studio-loghi{gap:14px 28px}
  .studio-loghi img{height:32px}
  .studio-contatti .wrap{padding:64px 0}
  .studio-contatti h2{font-size:13vw}
  .studio-recapiti .casa-btn{align-self:stretch}
}