/* Zikael · Asset del marchio — stile coerente con il brandbook */

@font-face{font-family:"Xenon Nue";font-weight:300;font-style:normal;font-display:swap;src:url("../assets/fonts/XenonNue-Light.woff2") format("woff2")}
@font-face{font-family:"Xenon Nue";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/XenonNue-Regular.woff2") format("woff2")}
@font-face{font-family:"Xenon Nue";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/XenonNue-Bold.woff2") format("woff2")}

:root{
  --custodia:#0D1730;   /* Blu Custodia */
  --prisma:#2728E4;     /* Blu Prisma */
  --zikkaron:#6A1CAF;   /* Viola Zikkaron */
  --corallo:#F39274;    /* Corallo Affetto */
  --luce:#5B6BFF;       /* Blu Luce */
  --viola-luce:#935CEC; /* Viola Luce */
  --grigio:#4B5167;
  --linea:#D5D8E1;
  --fondo:#F2F3F7;
  --f:"Xenon Nue",Arial,Helvetica,sans-serif;
  --side:clamp(15rem,19vw,21rem);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:clamp(14px,calc(.4vw + .55vh + 4px),19px);-webkit-text-size-adjust:100%}
html,body{height:100%;margin:0}
body{font-family:var(--f);font-weight:400;color:var(--custodia);background:#fff;overflow:hidden;line-height:1.35}
img{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--luce);outline-offset:2px}
.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}

/* ───────── Barra laterale ───────── */
.side{background:var(--custodia);color:#fff;border-right:.28rem solid var(--prisma);padding:2.2rem 1.7rem 1.8rem;display:flex;flex-direction:column;min-height:0}
.brand{display:block;text-decoration:none}
.menu{margin-top:clamp(1.6rem,6vh,3.4rem);display:flex;flex-direction:column;gap:.25rem}
.menu a{position:relative;display:flex;align-items:baseline;gap:.9rem;padding:.7rem .9rem .7rem 1rem;border-radius:.7rem;text-decoration:none;font-size:1.12rem;color:rgba(255,255,255,.78);transition:background-color .15s,color .15s}
.menu a .n{font-size:.78rem;font-weight:700;color:var(--corallo);letter-spacing:.04em}
.menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.menu a[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff;font-weight:700}
.menu a[aria-current="page"]::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:.2rem;border-radius:.2rem;background:var(--corallo)}
.side-foot{margin-top:auto}
.side-foot p{margin:.8rem 0 0;font-size:.82rem;font-weight:300;color:rgba(255,255,255,.72)}

/* ───────── Bottoni ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.6rem;padding:0 1.1rem;border:2px solid transparent;border-radius:.7rem;font:700 .92rem/1 var(--f);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.btn-coral{background:var(--corallo);color:var(--custodia)}
.btn-coral:hover{background:#F7A78D}
.btn-ghost{background:#fff;border-color:var(--custodia);color:var(--custodia)}
.btn-ghost:hover{background:var(--custodia);color:#fff}
.btn-block{width:100%}
.btn-lg{height:3.3rem;padding:0 1.6rem;font-size:1.05rem}
.ico{width:1.15rem;height:1.15rem;flex:none}

/* ───────── Contenuto ───────── */
.main{padding:2rem 2.6rem 1.8rem;min-width:0;min-height:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0;display:flex;flex-direction:column;animation:entra .18s ease-out}
@keyframes entra{from{opacity:0}to{opacity:1}}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.1rem}
.head h1{margin:0;font-size:2.1rem;line-height:1.1;font-weight:700}
.rule{display:block;width:3.2rem;height:3px;margin:.65rem 0 .7rem;background:var(--corallo)}
.lead{margin:0;font-size:1.02rem;font-weight:300;color:var(--grigio);max-width:62ch}
.head-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}

/* ───────── Logo ───────── */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.1rem;margin-bottom:1rem}
.seg{display:inline-flex;gap:.15rem;padding:.2rem;background:var(--fondo);border:1.5px solid var(--linea);border-radius:.8rem}
.seg button{height:2.2rem;padding:0 1rem;border:0;border-radius:.6rem;background:transparent;color:var(--custodia);font:400 .92rem/1 var(--f);cursor:pointer;transition:background-color .15s,color .15s}
.seg button:hover{background:#E4E6EE}
.seg button[aria-checked="true"]{background:var(--custodia);color:#fff;font-weight:700}
.note{margin:0 0 0 auto;font-size:.85rem;font-weight:300;color:var(--grigio)}

.tiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:.9rem}
.tile{display:flex;flex-direction:column;min-height:0;min-width:0;border-radius:1.1rem;border:1.5px solid var(--linea);background:#fff;overflow:hidden}
.tile.neg{background:var(--custodia);border-color:var(--custodia)}
.tile-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.7rem .75rem 0 1.1rem}
.tile-label{margin:0;font-size:.9rem;font-weight:700;color:var(--grigio)}
.tile.neg .tile-label{color:rgba(255,255,255,.85)}
.chips{display:flex;gap:.35rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;height:2rem;padding:0 .7rem;border-radius:.55rem;background:var(--corallo);color:var(--custodia);font:700 .8rem/1 var(--f);text-decoration:none;transition:background-color .15s}
.chip:hover{background:#F7A78D}
.chip .ico{width:1rem;height:1rem}
.stage{flex:1;min-height:0;container-type:size;display:grid;place-items:center}
.crop{display:block;position:relative;overflow:hidden;aspect-ratio:var(--cw)/var(--ch);width:min(86cqw,calc(76cqh*var(--cw)/var(--ch)))}
.crop img{position:absolute;max-width:none;height:auto;width:calc(100%*var(--W)/var(--cw));left:calc(-100%*var(--cx)/var(--cw));top:calc(-100%*var(--cy)/var(--ch))}
.brand .crop{width:100%}

/* ───────── Colori ───────── */
.colors{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1rem}
.grp{display:flex;flex-direction:column;min-height:0;min-width:0}
.grp>h2{margin:0 0 .6rem;padding-top:.5rem;border-top:3px solid var(--k);font-size:.95rem;font-weight:700}
.grp-1{grid-column:1/span 3;grid-row:1;--k:var(--prisma)}
.grp-2{grid-column:4/span 2;grid-row:1;--k:var(--zikkaron)}
.grp-3{grid-column:1/span 2;grid-row:2;--k:var(--luce)}
.grp-4{grid-column:3/span 3;grid-row:2;--k:var(--corallo)}
.cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:.7rem}
.sw{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;min-height:0;padding:.85rem;border-radius:1rem;background:var(--c);color:var(--t);overflow:hidden}
.sw.line{border:1.5px solid var(--linea)}
.sw-name{margin:0;font-size:1.12rem;font-weight:700;line-height:1.15}
.sw-vals{display:grid;gap:.35rem}
.val{display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;min-height:2rem;padding:.3rem .55rem;border:0;border-radius:.5rem;background:var(--rb);color:var(--rf);font:400 .8rem/1.1 var(--f);text-align:left;cursor:pointer;transition:filter .15s}
.val:hover{filter:brightness(1.12)}
.sw.light .val:hover,.sw.line .val:hover{filter:brightness(.94)}
.val b{font-weight:700;font-variant-numeric:tabular-nums}
.val .ico{width:.95rem;height:.95rem;opacity:0;transition:opacity .15s}
.val:hover .ico,.val:focus-visible .ico,.val.ok .ico{opacity:1}
@media (hover:none){.val .ico{opacity:.9}}
.val.ok{filter:none}

.extra{flex:1;min-height:0;display:flex;flex-direction:column;gap:.55rem}
.gblock{flex:1;min-height:0;display:flex;flex-direction:column;gap:.3rem}
.gblock.prop{flex:.9}
.glabel{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700}
.glabel .mini{display:inline-flex;align-items:center;gap:.3rem;height:1.7rem;padding:0 .55rem;border:1.5px solid var(--custodia);border-radius:.45rem;background:#fff;color:var(--custodia);font:700 .75rem/1 var(--f);cursor:pointer}
.glabel .mini:hover{background:var(--custodia);color:#fff}
.glabel .mini .ico{width:.9rem;height:.9rem}
.strip{flex:1;min-height:1rem;border-radius:.7rem}
.bar{flex:1;min-height:1.4rem;display:flex;border-radius:.7rem;overflow:hidden;border:1.5px solid var(--linea)}
.bar span{display:grid;place-items:center;font-size:.78rem;font-weight:700;min-width:0}

/* ───────── Tipografia ───────── */
.fonts{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.font{display:flex;flex-direction:column;min-height:0;min-width:0}
.spec{position:relative;flex:1;min-height:0;container-type:size;overflow:hidden;background:var(--bgp);border-radius:1rem 1rem 0 0;border-bottom:.3rem solid var(--corallo)}
.spec .w{position:absolute;left:1.2rem;top:1rem;font-size:1.05rem;color:#CBD0DE}
.spec .a{position:absolute;left:.04em;bottom:-.26em;font-size:132cqh;line-height:1;color:#F2F3F7;user-select:none}
.fmeta{padding:.8rem 0 0}
.fmeta h2{margin:0;font-size:1.2rem;font-weight:700}
.fmeta p{margin:.15rem 0 .65rem;font-size:.92rem;font-weight:300;color:var(--grigio)}
.fmeta .chips{gap:.4rem}
.sysfont{margin-top:1rem;padding:.85rem 1.2rem;background:var(--fondo);border-radius:1rem}
.sys-k{margin:0 0 .3rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--prisma)}
.sys-t{margin:0;font-size:1rem}
.sys-s{margin:.25rem 0 0;font-size:.85rem;font-weight:300;color:var(--grigio)}

/* ───────── Griglia ───────── */
.grids{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:.9rem}
.g-h{grid-column:1;grid-row:1}
.g-r{grid-column:1;grid-row:2}
.g-v{grid-column:2;grid-row:1/span 2}
.gfig{position:relative;margin:0;border:1.5px solid var(--linea);border-radius:1.1rem;background:#fff;min-height:0;overflow:hidden}
.gfig figcaption{position:absolute;left:1.1rem;top:.8rem;z-index:1;font-size:.9rem;font-weight:700;color:var(--grigio)}
.gimg{position:absolute;inset:2.4rem 1rem .9rem}
.gimg img{width:100%;height:100%;object-fit:contain}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:.9rem 0 0;padding:0;list-style:none;font-size:.88rem;font-weight:300;color:var(--grigio)}
.legend li{display:flex;align-items:center}
.legend b{display:inline-grid;place-items:center;min-width:1.9rem;height:1.7rem;padding:0 .35rem;margin-right:.55rem;border-radius:.4rem;background:#D1D2FA;color:var(--prisma);font-weight:700}

/* ───────── Brandbook ───────── */
.bb{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.4rem;align-items:center}
.bb-cover{display:block;width:min(100%,calc((100dvh - 14rem)*16/9));justify-self:start;border-radius:1.1rem;overflow:hidden;border:1.5px solid var(--linea);aspect-ratio:16/9;transition:transform .2s}
.bb-cover:hover{transform:translateY(-2px)}
.bb-cover img{width:100%;height:100%;object-fit:cover}
.bb-info h2{margin:0 0 1rem;font-size:1.7rem;line-height:1.15;font-weight:700}
.bb-info dl{margin:0 0 1.6rem}
.bb-info dl div{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--linea)}
.bb-info dt{font-weight:300;color:var(--grigio)}
.bb-info dd{margin:0;font-weight:700}

/* ───────── Schermi stretti: la barra passa in alto e il contenuto scorre ───────── */
@media (max-width:900px){
  body{overflow:auto}
  .app{display:block;height:auto}
  .side{flex-direction:row;align-items:center;gap:1rem;padding:.8rem 1rem;border-right:0;border-bottom:.28rem solid var(--prisma);position:sticky;top:0;z-index:5}
  .brand{width:7.5rem;flex:none}
  .menu{margin:0;flex-direction:row;overflow-x:auto;gap:.2rem}
  .menu a{padding:.55rem .75rem;font-size:1rem;white-space:nowrap}
  .menu a .n,.menu a[aria-current="page"]::before,.side-foot{display:none}
  .main{padding:1.4rem 1rem 2rem}
  .head{flex-direction:column}
  .head-actions{justify-content:flex-start}
  .note{margin-left:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:13rem}
  .colors{display:flex;flex-direction:column}
  .cards{grid-auto-rows:11rem}
  .fonts{grid-template-columns:1fr}
  .spec{min-height:11rem}
  .grids{display:flex;flex-direction:column}
  .gfig{height:20rem}
  .bb{grid-template-columns:1fr}
}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}