/*
Theme Name: SF Feudo
Author: Sandro Feudo
Description: Tema personale di sandrofeudo.com: blog, progetti SF e astronomia. Toni caldi, arancione.
Version: 4.82
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: sf-feudo
*/
:root { --bg: #f8f1e6; --pan: #ffffff; --pan2: #f1e6d5; --riga: #1d140d24; --ar: #ff7a1a; --ar2: #e0600a; --ar-scuro: #c2520a; --crema: #f6eee2; --ink: #1d140d; --ink2: #3b2d20; --muto: #6b5a48; --scuro: #1d140d;
  --eti: #b84c08; --linea: #1d140d1c; --velo: #1d140d0d; --ombra: #1d140d26; --testa: #f8f1e6e8; --sabbia: #efe2cd;
  --petrolio: #46b9ab; --sole: #ffc247; --tit: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; }
/* zone che restano scure: il cielo, i riquadri interattivi, il piede */
.cielo, .cielo-oggi, .piede, .calcolo, .partecipa, .luce, .vet, .copertina span { --bg: #0f0b09; --pan: #1a1411; --pan2: #241b16; --riga: #3a2c22; --ar2: #ffa24d; --ink: #f7efe4; --ink2: var(--ink2); --muto: #b3a391; --linea: var(--linea); --velo: var(--velo); --ombra: #000a; color: var(--ink); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--tit); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ar); outline-offset: 3px; border-radius: 4px; }
.w { max-width: 1160px; margin: 0 auto; padding-inline: 20px; } .w.stretto { max-width: 780px; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 84px); } h2 { font-size: clamp(28px, 4.2vw, 48px); } h3 { font-size: 22px; margin: 22px 0 6px; }
h1 em, h2 em { font-style: normal; background: linear-gradient(100deg, var(--ar), var(--ar2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eti { font: 600 12px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ar); margin: 0 0 14px; }
.sotto, .intro { color: var(--muto); max-width: 60ch; } .intro { font-size: clamp(18px, 2.2vw, 22px); color: var(--ink2); } .sotto { margin: 10px 0 28px; }
.centro { text-align: center; margin-top: 30px; }
.progresso { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--ar), var(--ar2)); z-index: 60; }

.testa { position: sticky; top: 0; z-index: 50; background: var(--testa); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--linea); }
.testa .w { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.marchio { display: flex; align-items: baseline; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.sf { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.06em; color: var(--ar); background: linear-gradient(100deg, var(--ar), var(--ar2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
nav { display: flex; gap: 2px; align-items: center; } nav a { text-decoration: none; padding: 8px 13px; border-radius: 20px; font-size: 14px; color: var(--muto); transition: color .2s, background .2s; }
nav a:hover, nav a[aria-current] { color: var(--ink); background: var(--linea); } nav a.negozio { color: #1d0f04; background: var(--ar); font-weight: 600; margin-left: 6px; }
.panino { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 12px 10px; } .panino i { display: block; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: transform .25s, opacity .25s; }
@media (max-width: 860px) { .panino { display: block; } nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg); padding: 12px 20px 20px; border-bottom: 1px solid var(--riga); display: none; }
  nav.aperto { display: flex; } nav a { font-size: 18px; padding: 12px 8px; } .panino.aperto i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .panino.aperto i:nth-child(2) { opacity: 0; } .panino.aperto i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } }

.bott { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: 0; background: var(--ar); color: #1d0f04; margin: 10px 8px 0 0; transition: transform .18s, box-shadow .18s, background .18s; }
.bott:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #ff7a1a55; } .bott i { font-style: normal; transition: transform .2s; } .bott:hover i { transform: translateX(4px); }
.bott.due { background: var(--velo); color: var(--ink); box-shadow: inset 0 0 0 1px var(--linea); } .bott.due:hover { background: var(--linea); box-shadow: inset 0 0 0 1px var(--ar); }
.bott.pieno { width: 100%; justify-content: center; margin: 10px 0 0; }
.chiara .bott.due { background: #1d140d0d; color: var(--scuro); box-shadow: inset 0 0 0 1px #1d140d40; }

.eroe { position: relative; overflow: hidden; padding: 72px 0 60px; } .eroe .w { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .eroe .w { grid-template-columns: 1.15fr .85fr; } }
.alone { position: absolute; width: 720px; height: 720px; right: -200px; top: -260px; border-radius: 50%; background: radial-gradient(circle, #ff7a1a40, transparent 62%); filter: blur(10px); animation: respiro 9s ease-in-out infinite; }
@keyframes respiro { 50% { transform: scale(1.12) translate(-30px, 20px); } }
.numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 34px; max-width: 520px; } @media (min-width: 560px) { .numeri { grid-template-columns: repeat(4, 1fr); } }
.numeri b { display: block; font-size: 34px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .numeri span { font-size: 13px; color: var(--muto); }
.copertina { position: relative; display: block; border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 30px 80px var(--ombra), 0 0 0 1px var(--linea); transition: transform .25s ease-out; transform-style: preserve-3d; }
.copertina img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .copertina span { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; background: linear-gradient(transparent, #0f0b09f0); }
.copertina small { display: block; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ar2); margin-bottom: 6px; } .copertina b { font-size: 20px; line-height: 1.2; display: block; }
.nastro { overflow: hidden; white-space: nowrap; padding: 13px 0; border-block: 1px solid var(--linea); font: 600 13px var(--mono); letter-spacing: .16em; color: var(--muto); }
.nastro div { display: inline-block; animation: corre 50s linear infinite; } .nastro span { margin: 0 20px; } .nastro i { font-style: normal; color: var(--ar); font-size: 9px; vertical-align: middle; }
.nastro:hover div { animation-play-state: paused; } @keyframes corre { to { transform: translateX(-33.333%); } }

.sez { padding: 76px 0; } .capo { padding: 64px 0 28px; }
.chiara { background: var(--crema); color: var(--scuro); } .chiara .sotto, .chiara .intro { color: #6b5a48; } .chiara .eti { color: var(--ar-scuro); }
.strade { display: grid; gap: 16px; } @media (min-width: 760px) { .strade { grid-template-columns: repeat(3, 1fr); } }
.strada { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 20px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); text-decoration: none; overflow: hidden; transition: transform .22s, box-shadow .22s; }
.strada::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), #ff7a1a2e, transparent 60%); opacity: 0; transition: opacity .3s; } .strada:hover::before { opacity: 1; }
a.strada:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--ar), 0 18px 40px var(--ombra); }
.strada > * { position: relative; } .strada i { font: 600 13px var(--mono); font-style: normal; color: var(--ar); } .strada b { font-size: 26px; letter-spacing: -.02em; } .strada span { color: var(--muto); font-size: 15px; } .strada em { font-style: normal; font-size: 14px; color: var(--ar2); margin-top: 8px; }

.griglia { display: grid; gap: 20px; } @media (min-width: 700px) { .griglia { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .griglia:not(.due-col) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .art.grande { grid-column: 1 / -1; grid-template-columns: 1.25fr 1fr; } .art.grande .foto { aspect-ratio: auto; min-height: 320px; } .art.grande b { font-size: clamp(24px, 3vw, 34px); } }
.art { display: grid; grid-template-rows: auto 1fr; background: var(--pan); border-radius: 20px; overflow: hidden; text-decoration: none; box-shadow: inset 0 0 0 1px var(--velo); transition: transform .25s, box-shadow .25s; }
.art:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px #ff7a1a99, 0 22px 50px var(--ombra); }
.foto { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--pan2); } .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .art:hover .foto img, .tappa:hover .foto img { transform: scale(1.06); }
.corpo { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; } .corpo b { font-size: 19px; line-height: 1.25; letter-spacing: -.015em; }
.riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; } .meta { font-size: 12.5px; color: var(--muto); }
.estr { font-size: 14.5px; color: var(--muto); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.leggi { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--ar2); } .leggi i { font-style: normal; display: inline-block; transition: transform .2s; } .art:hover .leggi i { transform: translateX(5px); }
.tag { font: 700 10.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #1d0f04; }
.t-riflessioni { background: var(--sole); } .t-esplorazione { background: var(--petrolio); } .t-progetti { background: var(--ar); }

.vetrina { display: grid; gap: 20px; } @media (min-width: 860px) { .vetrina { grid-template-columns: 1.35fr 1fr; } }
.vet { position: relative; display: block; border-radius: 24px; overflow: hidden; text-decoration: none; min-height: 380px; color: #fff; transition: transform .25s, box-shadow .25s; background: var(--scuro); }
.vet:hover { transform: translateY(-5px); box-shadow: 0 26px 60px #0006; } .vet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } .vet:hover img { transform: scale(1.05); }
.vet > span { position: absolute; inset: auto 0 0 0; padding: 90px 26px 26px; background: linear-gradient(transparent, #0f0b09ee); display: flex; flex-direction: column; gap: 4px; }
.vet small { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ar2); } .vet b { font-size: 40px; letter-spacing: -.03em; line-height: 1; } .vet em { font-size: 18px; color: var(--ink2); } .vet p { margin: 6px 0 0; font-size: 15px; color: var(--ink2); } .vet u { text-decoration: none; font-weight: 600; color: var(--ar2); margin-top: 10px; }
.vet.scuro { background: radial-gradient(circle at 80% 10%, #ff7a1a66, transparent 55%), linear-gradient(160deg, #2a1a10, #120c09); } .vet.scuro > span { position: relative; height: 100%; justify-content: flex-end; background: none; min-height: 380px; }
.trio { display: grid; gap: 14px; margin-top: 20px; } @media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio a { display: block; padding: 18px 20px; border-radius: 16px; background: #1d140d0d; box-shadow: inset 0 0 0 1px #1d140d24; text-decoration: none; transition: background .2s, transform .2s; } .trio a:hover { background: #ff7a1a26; transform: translateY(-3px); }
.trio small { display: block; font: 12px var(--mono); color: #7a6652; margin-bottom: 4px; } .trio b { font-size: 17px; line-height: 1.25; }

.cielo { position: relative; overflow: hidden; background: radial-gradient(ellipse at 75% 10%, #4a2a1a, #1a1020 55%, #0a0710); } .stelle { position: absolute; inset: 0; width: 100%; height: 100%; } .cielo .w { position: relative; } .cielo .sotto { color: #dccfe0; }
.cielo.alto { padding: 96px 0 84px; } .luna-box { text-align: center; } .luna-box svg { width: min(260px, 70%); filter: drop-shadow(0 0 40px #ffe7b055); } .luna-box p { font: 14px var(--mono); color: #e9dcc6; }
.chi-breve { text-align: center; } .chi-breve .intro { margin-inline: auto; }

/* pagina con tendine laterali */
.conlato { display: grid; gap: 28px; padding-bottom: 80px; align-items: start; } @media (min-width: 960px) { .conlato { grid-template-columns: 290px 1fr; } .conlato.rovescio { grid-template-columns: 1fr 300px; } .lato { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; } .apri-lato { display: none; } }
.apri-lato { background: var(--pan); border: 0; box-shadow: inset 0 0 0 1px var(--linea); border-radius: 14px; padding: 13px 16px; text-align: left; font-weight: 600; }
@media (max-width: 959px) { .lato { display: none; } .lato.aperto { display: block; } .conlato.rovescio .lato { display: block; order: -1; } }
.tendina { background: var(--pan); border-radius: 16px; margin-bottom: 10px; box-shadow: inset 0 0 0 1px var(--velo); overflow: hidden; }
.tendina summary { list-style: none; cursor: pointer; padding: 14px 16px; font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ar2); display: flex; justify-content: space-between; align-items: center; }
.tendina summary::-webkit-details-marker { display: none; } .tendina summary::after { content: "+"; font-size: 18px; color: var(--muto); transition: transform .25s; } .tendina[open] summary::after { transform: rotate(45deg); }
.tendina > div { padding: 0 10px 12px; animation: scende .28s ease-out; } @keyframes scende { from { opacity: 0; transform: translateY(-8px); } }
.voce { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; text-align: left; padding: 9px 8px; border-radius: 10px; font-size: 15px; text-decoration: none; transition: background .15s; }
.voce:hover { background: var(--velo); } .voce.on { background: #ff7a1a2b; box-shadow: inset 0 0 0 1px var(--ar); } .voce em { margin-left: auto; font: 12px var(--mono); font-style: normal; color: var(--muto); }
.pall { width: 10px; height: 10px; border-radius: 50%; } .pillole { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; } .voce.pill { width: auto; padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font-size: 13.5px; } .voce.pill em { margin-left: 4px; }
.cerca { position: relative; margin-bottom: 10px; } .cerca input { width: 100%; background: var(--pan); border: 0; box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink); font: inherit; font-size: 16px; padding: 14px 44px 14px 16px; border-radius: 14px; } .cerca input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ar); }
.cerca kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 12px var(--mono); color: var(--muto); border: 1px solid var(--riga); border-radius: 6px; padding: 2px 7px; }
.conteggio { font: 13px var(--mono); color: var(--muto); margin: 4px 0 16px; } .vuoto { padding: 40px; text-align: center; color: var(--muto); background: var(--pan); border-radius: 20px; }
.art.nascosto { display: none; }

/* articolo */
.art-capo { padding-bottom: 0; } .art-capo h1 { font-size: clamp(32px, 5vw, 58px); margin: 14px 0 16px; } .indietro { display: inline-block; text-decoration: none; color: var(--muto); font-size: 14px; margin-bottom: 22px; } .indietro:hover { color: var(--ar2); }
.copert { width: 100%; max-height: 560px; object-fit: cover; border-radius: 24px; margin: 34px 0 44px; box-shadow: 0 30px 80px var(--ombra); cursor: zoom-in; }
.prosa { font-family: Charter, "Iowan Old Style", Georgia, serif; font-size: 19.5px; line-height: 1.75; color: var(--ink2); min-width: 0; }
.prosa > p:first-of-type::first-letter { float: left; font: 700 4.1em/0.82 var(--tit); padding: 6px 10px 0 0; color: var(--ar); }
.prosa h2, .prosa h3, .prosa h4 { font-family: var(--tit); margin: 1.9em 0 .5em; } .prosa h2 { font-size: 30px; } .prosa h3 { font-size: 24px; } .prosa h2::before, .prosa h3::before { content: ""; display: block; width: 44px; height: 3px; background: var(--ar); border-radius: 2px; margin-bottom: 14px; }
.prosa a { color: var(--ar2); text-underline-offset: 3px; } .prosa img { border-radius: 16px; height: auto; margin: 10px auto; cursor: zoom-in; } .prosa figure { margin: 30px 0; } .prosa figcaption { font: 13px var(--tit); color: var(--muto); text-align: center; margin-top: 8px; }
.prosa blockquote { margin: 28px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--ar); font-style: italic; color: var(--ink); font-size: 1.1em; } .prosa li { margin: 6px 0; } .prosa li::marker { color: var(--ar); }
.prosa table { width: 100%; border-collapse: collapse; font: 15px var(--tit); display: block; overflow-x: auto; } .prosa td, .prosa th { border-bottom: 1px solid var(--riga); padding: 9px 10px; text-align: left; }
.prosa pre, .prosa code { font-family: var(--mono); font-size: .85em; background: var(--pan); border-radius: 8px; padding: 2px 6px; } .prosa pre { padding: 14px; overflow-x: auto; }
.indice { display: flex; flex-direction: column; } .indice a { text-decoration: none; font-size: 14px; color: var(--muto); padding: 7px 10px; border-left: 2px solid var(--riga); line-height: 1.35; transition: color .2s, border-color .2s; } .indice a.liv3 { padding-left: 22px; font-size: 13px; }
.indice a:hover { color: var(--ink); } .indice a.qui { color: var(--ar2); border-color: var(--ar); font-weight: 600; }
.scheda-dati { margin: 0; padding: 0 6px; } .scheda-dati div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--riga); font-size: 14px; } .scheda-dati dt { color: var(--muto); } .scheda-dati dd { margin: 0; font-weight: 600; }
.mini-art { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; text-decoration: none; padding: 7px 6px; border-radius: 10px; font-size: 13.5px; line-height: 1.3; } .mini-art:hover { background: var(--velo); } .mini-art img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.vicini { display: grid; gap: 14px; margin-top: 60px; font-family: var(--tit); } @media (min-width: 640px) { .vicini { grid-template-columns: 1fr 1fr; } }
.vicini a { display: block; padding: 18px; border-radius: 16px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--velo); text-decoration: none; color: var(--ink); transition: box-shadow .2s, transform .2s; } .vicini a:hover { box-shadow: inset 0 0 0 1px var(--ar); transform: translateY(-3px); } .vicini .dx { text-align: right; }
.vicini small { display: block; font: 12px var(--mono); color: var(--ar2); margin-bottom: 6px; } .vicini b { font-size: 16px; line-height: 1.3; }

/* progetti, prodotto */
.linea { position: relative; display: grid; gap: 26px; padding-left: 26px; border-left: 2px solid var(--riga); margin-top: 10px; }
.tappa { position: relative; display: grid; gap: 8px 22px; text-decoration: none; padding: 18px; border-radius: 20px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--velo); transition: transform .2s, box-shadow .2s; } @media (min-width: 720px) { .tappa { grid-template-columns: 240px 1fr; } .tappa .foto { grid-row: 1 / 4; } }
.tappa::before { content: ""; position: absolute; left: -35px; top: 28px; width: 16px; height: 16px; border-radius: 50%; background: var(--ar); box-shadow: 0 0 0 5px var(--bg), 0 0 14px #ff7a1a88; }
.tappa:hover { transform: translateX(6px); box-shadow: inset 0 0 0 1px var(--ar); } .tappa time { font: 12px var(--mono); color: var(--ar2); } .tappa b { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; } .tappa > span:last-child { color: var(--muto); font-size: 15px; } .tappa .foto { border-radius: 12px; }
.duecol { display: grid; gap: 44px; } @media (min-width: 860px) { .duecol { grid-template-columns: 1fr 1fr; } } .duecol p { color: var(--ink2); }
.carat { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .carat div { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 1px 0 #1d140d14, 0 10px 30px #1d140d12; transition: transform .2s; } .carat div:hover { transform: translateY(-4px) rotate(-.6deg); }
.carat i { display: block; font: 600 13px var(--mono); font-style: normal; color: var(--ar-scuro); margin-bottom: 26px; } .carat b { font-size: 19px; line-height: 1.25; }
.scatti { columns: 2 220px; column-gap: 14px; } @media (min-width: 900px) { .scatti { columns: 3; } } .scatto { display: block; width: 100%; padding: 0; border: 0; background: none; margin-bottom: 14px; border-radius: 16px; overflow: hidden; break-inside: avoid; cursor: zoom-in; } .scatto img { width: 100%; transition: transform .5s; } .scatto:hover img { transform: scale(1.04); }
.spec { margin: 0; } .spec div { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--riga); } .spec dt { color: var(--muto); } .spec dd { margin: 0; font-weight: 600; font-size: 19px; }
.moneta { width: min(300px, 70%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 210deg, #ffb066, #ff7a1a, #b3470a, #ffb066); box-shadow: 0 30px 80px #ff7a1a44, inset 0 0 0 10px var(--linea); animation: gira 14s linear infinite; }
.moneta span { font-size: 92px; font-weight: 800; color: #1d0f04; animation: gira 14s linear infinite reverse; } @keyframes gira { to { transform: rotate(360deg); } }
.tre-link { display: flex; flex-wrap: wrap; } .citazione { font-family: Charter, Georgia, serif; font-size: clamp(22px, 3vw, 32px); line-height: 1.45; text-align: center; margin: 0; } .citazione::before { content: "“"; display: block; font-size: 80px; line-height: .6; color: var(--ar); }
.ritratto { width: min(320px, 80%); aspect-ratio: 4/5; margin: 0 auto; border-radius: 26px; display: grid; place-items: center; background: linear-gradient(160deg, var(--ar), #7a2f05); color: #1d0f04; font: 600 14px var(--mono); box-shadow: 0 30px 80px var(--ombra); }
.passioni { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .pass { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 10px 30px #1d140d12; transition: transform .2s; } .pass:hover { transform: translateY(-5px); }
.pass i { font-style: normal; font-size: 30px; color: var(--ar-scuro); } .pass b { display: block; font-size: 20px; margin: 10px 0 4px; } .pass span { font-size: 15px; color: #6b5a48; }
.nota { display: inline-block; font: 13px var(--mono); background: #ffc24726; border: 1px dashed var(--sole); color: var(--sole); padding: 9px 12px; border-radius: 10px; margin-top: 18px; } .chiara .nota { color: #7a4a00; background: #ffc24755; border-color: #b77a00; }
.barre { display: grid; gap: 8px; } .barra-tema { display: grid; grid-template-columns: 180px 1fr 30px; gap: 12px; align-items: center; text-decoration: none; padding: 10px 12px; border-radius: 12px; } .barra-tema:hover { background: var(--pan); }
.barra-tema i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--ar), var(--ar2)); width: 0; transition: width 1.1s cubic-bezier(.2, .7, .2, 1); } .barra-tema.vista i { width: var(--l); } .barra-tema em { font: 13px var(--mono); font-style: normal; color: var(--muto); text-align: right; }
@media (max-width: 560px) { .barra-tema { grid-template-columns: 120px 1fr 26px; font-size: 14px; } }

.piede { border-top: 1px solid var(--linea); padding: 50px 0 26px; color: var(--muto); font-size: 14.5px; } .piede .w { display: grid; gap: 30px; } @media (min-width: 760px) { .piede .w:first-child { grid-template-columns: 1.6fr 1fr 1fr; } }
.piede b { display: block; color: var(--ink); font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; } .piede a { display: block; text-decoration: none; padding: 4px 0; } .piede a:hover { color: var(--ar2); } .piede .marchio { color: var(--ink); display: flex; }
.fine { display: flex !important; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--velo); } .su { background: none; border: 0; color: var(--muto); } .su:hover { color: var(--ar2); }
.luce { position: fixed; inset: 0; z-index: 80; background: #0a0705f2; display: grid; place-items: center; padding: 20px; cursor: zoom-out; animation: appare .2s; } .luce[hidden] { display: none; } .luce img { max-width: 100%; max-height: 90vh; border-radius: 12px; }
.luce button { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--linea); font-size: 26px; line-height: 1; } @keyframes appare { from { opacity: 0; } }
.mostra { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); } .mostra.vista { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .mostra { opacity: 1; transform: none; } .barra-tema i { width: var(--l); } html { scroll-behavior: auto; } }

/* --- aggiunte per WordPress --- */
body.admin-bar .testa { top: 32px; } @media (max-width: 782px) { body.admin-bar .testa { top: 46px; } }
.foglio { background: var(--crema); color: var(--scuro); border-radius: 24px; padding: clamp(20px, 4vw, 44px); margin-bottom: 80px; }
.foglio a { color: var(--ar-scuro); } .foglio h1, .foglio h2, .foglio h3 { color: var(--scuro); }
.foglio input, .foglio select, .foglio textarea { font: inherit; }
.pagina-wp { font-size: 18px; line-height: 1.7; color: var(--ink2); } .pagina-wp > * { max-width: 100%; }
.pagina-wp h1, .pagina-wp h2, .pagina-wp h3, .pagina-wp h4 { margin: 1.6em 0 .5em; } .pagina-wp h2 { font-size: clamp(26px, 3.4vw, 38px); }
.pagina-wp h2::before { content: ""; display: block; width: 44px; height: 3px; background: var(--ar); border-radius: 2px; margin-bottom: 14px; }
.pagina-wp img { border-radius: 16px; height: auto; } .pagina-wp li::marker { color: var(--ar); } .pagina-wp a { color: var(--ar2); }
.pagina-wp .wp-block-gallery img, .pagina-wp .wp-block-image img { cursor: zoom-in; }
.wp-block-button__link, .wp-element-button, .pagina-wp .button, .foglio .button, .foglio button[type=submit] { display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: 0;
  background: var(--ar) !important; color: #1d0f04 !important; transition: transform .18s, box-shadow .18s; cursor: pointer; }
.wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #ff7a1a55; }
.pagina-wp .wp-block-woocommerce-single-product, .pagina-wp .woocommerce, .pagina-wp .wc-block-components-product-price { color: inherit; }
.pagina-wp .wp-block-woocommerce-single-product { background: var(--crema); color: var(--scuro); border-radius: 24px; padding: clamp(18px, 3vw, 34px); margin-top: 40px; }
.pagina-wp .wp-block-woocommerce-single-product a { color: var(--ar-scuro); } .pagina-wp .wp-block-woocommerce-single-product h1, .pagina-wp .wp-block-woocommerce-single-product h2::before { display: none; }
.commenti { font-family: var(--tit); margin-top: 60px; } .commenti .foglio { margin-bottom: 0; } .commenti ol { list-style: none; padding: 0; } .commenti textarea, .commenti input[type=text], .commenti input[type=email], .commenti input[type=url] { width: 100%; padding: 10px; border: 1px solid #1d140d40; border-radius: 10px; background: #fff; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.alignwide { max-width: 100%; } .aligncenter { margin-inline: auto; text-align: center; }

/* ultimo articolo in apertura */
.ultimo-eti { display: flex; align-items: center; gap: 10px; font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ar2); margin: 0 0 12px; }
.ultimo-eti span { width: 9px; height: 9px; border-radius: 50%; background: var(--ar); box-shadow: 0 0 0 0 #ff7a1a88; animation: battito 2s infinite; }
@keyframes battito { 70% { box-shadow: 0 0 0 10px #ff7a1a00; } 100% { box-shadow: 0 0 0 0 #ff7a1a00; } }
.ultimo-scheda { display: block; background: var(--pan); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 30px 80px var(--ombra), inset 0 0 0 1px #ffffff1a; transition: transform .25s ease-out, box-shadow .25s; }
.ultimo-scheda:hover { box-shadow: 0 30px 80px var(--ombra), inset 0 0 0 1px var(--ar); }
.ultimo-scheda .foto { aspect-ratio: 16/9; } .ultimo-scheda:hover .foto img { transform: scale(1.05); }
.ultimo-scheda .corpo { padding: 20px 22px 22px; gap: 10px; } .ultimo-scheda b { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -.02em; }
.ultimo-scheda .bott { align-self: flex-start; margin: 6px 0 0; }

/* --- revisione 1.1: testi e pagine più ordinati --- */
.prosa p, .pagina-wp p { margin: 0 0 1.15em; } .prosa > p:first-of-type { font-size: 1.12em; color: var(--ink); }
.prosa h4, .pagina-wp h4 { font-family: var(--tit); font-size: 19px; margin: 1.6em 0 .4em; color: var(--ar2); }
.prosa hr, .pagina-wp hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--riga), transparent); margin: 44px 0; }
.prosa strong { color: var(--ink); } .prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa span[style], .pagina-wp span[style] { color: inherit !important; font-family: inherit !important; font-size: inherit !important; }
.prosa .wp-block-gallery, .pagina-wp .wp-block-gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 30px 0; }
.prosa .wp-block-gallery figure, .pagina-wp .wp-block-gallery figure { margin: 0 !important; width: auto !important; } .prosa .wp-block-gallery img, .pagina-wp .wp-block-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin: 0; transition: transform .4s; }
.pagina-wp .wp-block-gallery figure { overflow: hidden; border-radius: 16px; } .pagina-wp .wp-block-gallery figure:hover img { transform: scale(1.05); }
.pagina-wp .wp-block-image { margin: 28px 0; } .pagina-wp .wp-block-image img { max-height: 620px; width: auto; max-width: 100%; margin-inline: auto; }
.wp-block-media-text { display: grid; gap: 28px; align-items: center; margin: 30px 0; } @media (min-width: 720px) { .wp-block-media-text { grid-template-columns: minmax(0, 300px) 1fr; } }
.wp-block-media-text__media { margin: 0; } .wp-block-media-text__media img { border-radius: 20px; width: 100%; max-height: 460px; object-fit: cover; } .wp-block-media-text__content p { font-size: 1.1em; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.pagina-wp ul { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .pagina-wp ul li { background: var(--pan); border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--velo); }
.pagina-wp ul li::before { content: "▸ "; color: var(--ar); }
.pagina-wp .wp-block-woocommerce-single-product ul { display: block; } .pagina-wp .wp-block-woocommerce-single-product ul li { background: none; box-shadow: none; padding: 0; } .pagina-wp .wp-block-woocommerce-single-product ul li::before { content: none; }
.conlato.rovescio .lato .tendina:not(:first-child) { } @media (max-width: 959px) { .conlato.rovescio .lato { order: 0; } .conlato.rovescio .lato .tendina:nth-child(n+2), .conlato.rovescio #copia { display: none; } .conlato.rovescio .lato .tendina:first-child:not(:has(.indice)) { display: none; } }

/* --- 1.2: pagina del telescopio --- */
.schema { margin: 0; } .schema svg { width: 100%; background: #0d0912cc; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--linea); } .schema figcaption { font-size: 13.5px; color: #d9cfe6; margin-top: 10px; }
.raggi { animation: scorre-luce 1.4s linear infinite; } @keyframes scorre-luce { to { stroke-dashoffset: -26; } }
.cielo .indietro { color: #d9cfe6; }
.setup { min-width: 0; font-size: 18px; color: var(--ink2); } .setup > h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 64px 0 18px; } .setup > h2:first-child { margin-top: 0; }
.setup > h2::before { content: ""; display: block; width: 44px; height: 3px; background: var(--ar); border-radius: 2px; margin-bottom: 14px; }
.pezzo { background: var(--pan); border-radius: 22px; padding: clamp(18px, 3vw, 28px); margin: 18px 0; box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow .25s; } .pezzo:hover { box-shadow: inset 0 0 0 1px #ff7a1a88; }
.pezzo-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pezzo-n { font: 600 13px var(--mono); color: var(--ar); } .prezzo { margin-left: auto; font: 700 15px var(--mono); color: #1d0f04; background: var(--ar2); padding: 5px 12px; border-radius: 999px; }
.pezzo h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 12px 0 8px; } .pezzo p { margin: 0 0 12px; }
.pro-contro { display: grid; gap: 12px; margin: 14px 0; } @media (min-width: 700px) { .pro-contro { grid-template-columns: 1fr 1fr; } }
.pro, .contro { border-radius: 16px; padding: 16px 18px; font-size: 16px; } .pro { background: #46b9ab1a; box-shadow: inset 0 0 0 1px #46b9ab66; } .contro { background: #ff5b451a; box-shadow: inset 0 0 0 1px #ff5b4566; }
.pro > b, .contro > b { display: block; font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; } .pro > b { color: #7fe0d3; } .contro > b { color: #ff9a8a; }
.pro ul, .contro ul { margin: 0; padding-left: 1.1em; } .pro li, .contro li { margin: 6px 0; } .pro li::marker { color: #7fe0d3; } .contro li::marker { color: #ff9a8a; } .pro p, .contro p { margin: 0; }
.consiglio { background: #ffc2471a; border-left: 3px solid var(--sole); border-radius: 0 14px 14px 0; padding: 14px 16px; font-size: 16px; } .consiglio b { color: var(--sole); }
.elenco { padding-left: 1.1em; } .elenco li { margin: 8px 0; } .elenco li::marker { color: var(--ar); }
.bott.amazon { margin-top: 6px; font-size: 14px; padding: 10px 18px; }
.due-pezzi { display: grid; gap: 0 18px; } @media (min-width: 760px) { .due-pezzi { grid-template-columns: 1fr 1fr; } }
.calcolo { background: linear-gradient(150deg, #2a1a10, #17100c); border-radius: 24px; padding: clamp(20px, 3vw, 32px); margin: 30px 0; box-shadow: inset 0 0 0 1px #ff7a1a55; } .calcolo h3 { margin: 0 0 8px; font-size: 28px; }
.filtri { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; } .filtri button { background: var(--velo); border: 0; box-shadow: inset 0 0 0 1px var(--linea); border-radius: 999px; padding: 10px 16px; font-size: 15px; min-height: 42px; } .filtri button.on { background: var(--ar); color: #1d0f04; font-weight: 700; box-shadow: none; }
.interr { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; } .interr input, .conto input { width: 20px; height: 20px; accent-color: var(--ar); }
.esito { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 10px; } .esito div { background: #0f0b09; border-radius: 16px; padding: 16px; } .esito b { display: block; font-size: clamp(34px, 6vw, 54px); letter-spacing: -.03em; line-height: 1; color: var(--ar2); font-variant-numeric: tabular-nums; } .esito span { font-size: 13px; color: var(--muto); }
.calcolo-nota { font-size: 15.5px; margin: 0; min-height: 3em; }
.app { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .app div { background: var(--pan); border-radius: 18px; padding: 18px; box-shadow: inset 0 0 0 1px var(--linea); } .app b { display: block; font-size: 21px; margin: 12px 0 6px; } .app p { font-size: 15px; color: var(--muto); margin: 0; }
.conto { background: var(--crema); color: var(--scuro); border-radius: 22px; padding: 10px 22px 0; margin: 18px 0; overflow: hidden; }
.conto label { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px dashed #1d140d33; cursor: pointer; font-size: 16.5px; } .conto em { font: 600 15px var(--mono); font-style: normal; } .conto label:has(input:not(:checked)) span, .conto label:has(input:not(:checked)) em { opacity: .4; text-decoration: line-through; }
.totale { display: flex; justify-content: space-between; align-items: baseline; margin: 0 -22px; padding: 18px 22px; background: var(--ar); color: #1d0f04; font-weight: 700; } .totale b { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.consigli { list-style: none; padding: 0; counter-reset: c; display: grid; gap: 12px; } .consigli li { counter-increment: c; display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; background: var(--pan); border-radius: 18px; padding: 18px; box-shadow: inset 0 0 0 1px var(--linea); }
.consigli li::before { content: counter(c); grid-row: 1 / 3; font-size: 44px; font-weight: 800; line-height: 1; color: var(--ar); letter-spacing: -.04em; } .consigli b { font-size: 19px; line-height: 1.25; } .consigli span { font-size: 16px; color: var(--muto); }
.piccolo { font-size: 13.5px; color: var(--muto); }
.indice a { text-align: left; }

/* --- 1.3: astronomia modificabile da WordPress --- */
.t-astronomia { background: #b9a2ff; }
.eroe.basso { padding: 64px 0 44px; } .eroe.basso h1 { font-size: clamp(38px, 6vw, 72px); }
.attacco { font-size: clamp(19px, 2.2vw, 23px); color: var(--ink); }
.setup .schema { max-width: 520px; margin: 26px 0; }
.setup h2.wp-block-heading { font-size: clamp(26px, 3.4vw, 38px); margin: 64px 0 18px; } .setup h2.wp-block-heading::before { content: ""; display: block; width: 44px; height: 3px; background: var(--ar); border-radius: 2px; margin-bottom: 14px; }
.wp-block-group.pezzo { margin: 18px 0; } .pezzo > *:last-child { margin-bottom: 0; }
.pezzo-riga { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ar); display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 !important; }
.pezzo-riga strong { font: 700 15px var(--mono); letter-spacing: 0; color: #1d0f04; background: var(--ar2); padding: 5px 12px; border-radius: 999px; }
.wp-block-columns.pro-contro { gap: 12px; } .wp-block-column.pro > p:first-child strong, .wp-block-column.contro > p:first-child strong { font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.wp-block-column.pro > p:first-child strong { color: #7fe0d3; } .wp-block-column.contro > p:first-child strong { color: #ff9a8a; } .wp-block-column.pro > p:first-child, .wp-block-column.contro > p:first-child { margin-bottom: 8px; }
.consiglio strong:first-child { color: var(--sole); }
.setup ul.wp-block-list { padding-left: 1.1em; } .setup ul.wp-block-list li { margin: 8px 0; } .setup ul.wp-block-list li::marker { color: var(--ar); }
.wp-block-button.amazon .wp-block-button__link { background: var(--velo) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--linea); font-size: 14px; padding: 10px 18px; } .wp-block-button.amazon .wp-block-button__link::after { content: " ↗"; margin-left: 6px; }
ol.consigli li { display: block; padding-left: 78px; position: relative; font-size: 16px; color: var(--muto); } ol.consigli li::before { position: absolute; left: 18px; top: 16px; } ol.consigli li strong { display: block; font-size: 19px; color: var(--ink); line-height: 1.25; margin-bottom: 4px; }
.galleria-cielo .wp-block-gallery { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .galleria-cielo figcaption { position: static !important; background: none !important; color: var(--muto) !important; font-size: 13px !important; text-align: left !important; padding: 8px 2px 0 !important; }
.galleria-cielo .wp-block-gallery figure { overflow: visible; } .galleria-cielo .wp-block-gallery img { border-radius: 16px; }
@media (max-width: 959px) { .conlato.rovescio .lato { order: -1; } }

/* --- 1.4: carrello in testata, negozio leggibile --- */
.testa .w { justify-content: flex-start; } .testa nav { margin-left: auto; }
.carrello { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); text-decoration: none; order: 3; transition: background .2s, color .2s; } .carrello:hover { background: var(--linea); color: var(--ar2); }
.carrello-n { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--ar); color: #1d0f04; font: 700 11px/19px var(--mono); text-align: center; } .carrello-n.vuoto { display: none; }
@media (max-width: 860px) { .carrello { margin-left: auto; order: 0; } .testa nav { margin-left: 0; } }
/* nel foglio chiaro tutto il testo è scuro, anche quello che i plugin scrivono pensando a un fondo scuro */
.foglio, .foglio p, .foglio span, .foglio label, .foglio li, .foglio td, .foglio th, .foglio div, .foglio strong, .foglio small, .foglio h4, .foglio h5, .foglio legend, .foglio dt, .foglio dd { color: var(--scuro); }
.foglio .wp-block-button__link, .foglio .wp-element-button, .foglio .button, .foglio button[type=submit], .foglio .wc-block-components-button, .foglio .wc-block-components-button span, .foglio .wc-block-components-button div { color: #1d0f04 !important; }
.foglio .wc-block-components-button:not(.is-link) { background: var(--ar) !important; border-radius: 999px; font-weight: 600; }
.foglio a { color: var(--ar-scuro); } .foglio a span { color: inherit; }
.foglio input:not([type=checkbox]):not([type=radio]), .foglio select, .foglio textarea { color: var(--scuro) !important; background-color: #fff !important; }
/* messaggi "paga a rate" (Klarna e simili): se il testo è in un riquadro che non posso colorare, gli do un fondo scuro così resta leggibile */
/* il messaggio sulle rate (Klarna) è scritto in scuro dal fornitore dei pagamenti: gli do un fondo chiaro, così si legge */
.foglio [id*="payment-method-message"], .foglio [class*="payment-method-messag"], .foglio [class*="bnpl"] { background: #fff; box-shadow: inset 0 0 0 1px var(--linea); border-radius: 14px; padding: 12px 16px; margin: 6px 0; }


/* --- 1.5: il cielo di oggi --- */
.cielo-oggi { background: linear-gradient(#0a0710, #17111c); }
.luna-griglia { display: grid; gap: 28px; align-items: start; } @media (min-width: 900px) { .luna-griglia { grid-template-columns: minmax(0, 420px) 1fr; } }
.luna-scheda { background: var(--velo); border-radius: 24px; padding: 24px; box-shadow: inset 0 0 0 1px var(--linea); text-align: center; }
#luna-vera { width: min(300px, 80%); height: auto; aspect-ratio: 1; filter: drop-shadow(0 0 34px #fff3d033); }
.luna-testo { margin: 0 0 14px; } .luna-testo b { display: block; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; } .luna-testo span { color: var(--ar2); font: 600 15px var(--mono); }
.luna-scheda .scheda-dati { text-align: left; } .luna-scheda .scheda-dati dd { text-align: right; }
.pianeti { display: grid; gap: 10px; }
.pianeta { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; background: var(--pan); border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--linea); }
.pianeta b { font-size: 19px; display: block; line-height: 1.2; } .pianeta em { display: block; font: 600 12.5px var(--mono); font-style: normal; color: var(--ar2); margin: 2px 0; } .pianeta span { font-size: 14px; color: var(--muto); }
.pianeta.spento { opacity: .55; } .pianeta.spento .disco { filter: grayscale(.8); }
.disco { display: block; width: 44px; height: 44px; border-radius: 50%; position: relative; box-shadow: inset -7px -5px 12px var(--ombra); justify-self: center; }
.p-Mercurio { background: radial-gradient(circle at 35% 30%, #cfc6ba, #7d756c); width: 26px; height: 26px; } .p-Venere { background: radial-gradient(circle at 35% 30%, #fff3cf, #d9b56a); width: 38px; height: 38px; }
.p-Marte { background: radial-gradient(circle at 35% 30%, #ff9a6a, #a8411f); width: 32px; height: 32px; } .p-Giove { background: repeating-linear-gradient(8deg, #e6c9a0 0 6px, #b98a5e 6px 10px, #f0dcc0 10px 15px, #a8744a 15px 18px); }
.p-Saturno { background: linear-gradient(#ead9a8, #c9ab6e); width: 34px; height: 34px; } .p-Saturno::after { content: ""; position: absolute; left: -11px; right: -11px; top: 12px; height: 10px; border: 3px solid #d9c38a; border-radius: 50%; transform: rotate(-16deg); box-shadow: 0 0 0 1px #7a6a40; }
.p-Urano { background: radial-gradient(circle at 35% 30%, #d3f6f6, #6fbfc4); width: 30px; height: 30px; } .p-Nettuno { background: radial-gradient(circle at 35% 30%, #a9c4ff, #3b5fcf); width: 30px; height: 30px; }
.eventi { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.evento { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; background: var(--pan); border-radius: 16px; padding: 12px 16px; box-shadow: inset 0 0 0 1px var(--linea); border-left: 4px solid var(--muto); }
.evento time { text-align: center; font: 600 12px var(--mono); text-transform: uppercase; color: var(--muto); } .evento time b { display: block; font: 800 28px/1 var(--tit); color: var(--ink); letter-spacing: -.03em; }
.evento div b { display: block; font-size: 18px; line-height: 1.25; } .evento div span { font-size: 14px; color: var(--muto); } .evento em { font: 12px var(--mono); font-style: normal; color: var(--ar2); white-space: nowrap; }
.e-pianeta { border-left-color: var(--ar); } .e-incontro { border-left-color: var(--sole); } .e-meteore { border-left-color: var(--petrolio); } .e-luna { border-left-color: #b9a2ff; }
@media (max-width: 560px) { .evento { grid-template-columns: 52px 1fr; } .evento em { grid-column: 2; } }

/* --- 1.6: pubblico --- */
.partecipa { font-family: var(--tit); margin-top: 60px; padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: linear-gradient(150deg, #2a1a10, #17100c); box-shadow: inset 0 0 0 1px #ff7a1a55; }
.partecipa h3 { font-size: 28px; margin: 0 0 6px; } .partecipa p { font-size: 16.5px; margin: 0 0 6px; color: var(--ink2); } .partecipa .eti { color: var(--ar); }
.condividi { display: flex; flex-wrap: wrap; gap: 8px; } .condividi .voce.pill { background: var(--velo); color: var(--ink); font-family: var(--tit); cursor: pointer; } .condividi .voce.pill:hover { box-shadow: inset 0 0 0 1px var(--ar); color: var(--ar2); }
.iscriviti { font-family: var(--tit); display: grid; gap: 18px 30px; align-items: center; margin-top: 30px; padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--crema); color: var(--scuro); } @media (min-width: 760px) { .iscriviti { grid-template-columns: 1fr 1fr; } }
.iscriviti h3 { font-size: 26px; margin: 0 0 6px; color: var(--scuro); } .iscriviti p { margin: 0; font-size: 16px; color: #5c4b3a; } .iscriviti .eti { color: var(--ar-scuro); }
.iscriviti-modulo, .iscriviti-modulo * { color: var(--scuro); } .iscriviti-modulo form { margin: 0 !important; padding: 0 !important; background: none !important; }
.iscriviti-modulo input[type=email], .iscriviti-modulo input[type=text] { width: 100% !important; padding: 13px 16px !important; border: 1px solid #1d140d40 !important; border-radius: 999px !important; background: #fff !important; font: inherit; }
.iscriviti-modulo input[type=submit], .iscriviti-modulo button { width: auto !important; background: var(--ar) !important; color: #1d0f04 !important; border: 0 !important; border-radius: 999px !important; padding: 13px 24px !important; font: 600 15px var(--tit) !important; cursor: pointer; margin-top: 8px; }
.comunita { display: grid; gap: 16px; } @media (min-width: 820px) { .comunita { grid-template-columns: repeat(3, 1fr); } }
.com-scheda { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px #1d140d12; } .com-scheda i { font: 600 13px var(--mono); font-style: normal; color: var(--ar-scuro); } .com-scheda b { font-size: 24px; letter-spacing: -.02em; } .com-scheda > span { color: #5c4b3a; font-size: 15.5px; }
.com-scheda .bott { align-self: flex-start; margin-top: auto; } .com-lista { list-style: none; padding: 0; margin: 6px 0; font-size: 14.5px; } .com-lista li { padding: 7px 0; border-top: 1px dashed #1d140d2e; } .com-lista a { color: var(--scuro); text-decoration: none; } .com-lista a:hover { color: var(--ar-scuro); }
/* forum bbPress sul foglio chiaro */
.forum #bbpress-forums { font-size: 15px; } .forum #bbpress-forums a { color: var(--ar-scuro); } .forum #bbpress-forums ul.bbp-forums, .forum #bbpress-forums ul.bbp-topics, .forum #bbpress-forums ul.bbp-replies { border-radius: 14px; overflow: hidden; border-color: #1d140d26; }
.forum #bbpress-forums li.bbp-header, .forum #bbpress-forums li.bbp-footer { background: var(--scuro); color: var(--crema); } .forum #bbpress-forums li.bbp-header *, .forum #bbpress-forums li.bbp-footer * { color: var(--crema); }
.forum #bbpress-forums .bbp-forum-title, .forum #bbpress-forums .bbp-topic-permalink { font-size: 18px; font-weight: 700; }
.forum #bbp_search { padding: 10px 14px; border: 1px solid #1d140d40; border-radius: 999px; min-width: 220px; } .forum fieldset.bbp-form { border-radius: 14px; border-color: #1d140d26; padding: 16px; }
.forum input[type=text], .forum input[type=password], .forum textarea, .forum select { border: 1px solid #1d140d40; border-radius: 10px; padding: 9px 12px; max-width: 100%; }
.piede .fine a { display: inline; }
.prosa a.bott, .setup a.bott { color: #1d0f04; text-decoration: none; } .prosa a.bott.due, .setup a.bott.due { color: var(--ink); } .prosa .voce.pill { text-decoration: none; }

/* --- 2.0: tema chiaro e caldo --- */
body { background-color: var(--bg); background-image: radial-gradient(#1d140d12 1.2px, transparent 1.2px); background-size: 24px 24px; }
.piede { background-color: #0f0b09; margin-top: 60px; border-top: 0; } .piede .marchio { color: var(--ink); }
.chiara { background: var(--sabbia); } .foglio { background: #fff; box-shadow: 0 20px 60px var(--ombra); }
.alone { background: radial-gradient(circle, #ff7a1a55, transparent 62%); }
.eroe:not(.cielo) h1, .capo h1, .sez h2 { color: var(--ink); }
.art, .tendina, .strada, .tappa, .pezzo, .app div, .consigli li, .pianeta, .evento, .ultimo-scheda, .vicini a, .apri-lato, .cerca input { box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; }
.art:hover { box-shadow: inset 0 0 0 1px var(--ar), 0 22px 50px var(--ombra); }
.bott.due { background: #fff; box-shadow: inset 0 0 0 1px #1d140d33; } .bott.due:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ar); }
.cielo .bott.due, .partecipa .bott.due, .piede .bott.due { background: var(--velo); box-shadow: inset 0 0 0 1px var(--linea); }
nav a:hover, nav a[aria-current] { background: #1d140d12; } nav a.negozio { color: #1d0f04; }
.nastro { background: #fff; border-color: var(--linea); }
.copertina span, .copertina b { color: #f7efe4; } .copertina small { color: #ffa24d; }
.vet { color: #fff; } .vet small, .vet u { color: #ffa24d; } .vet em { color: #f0e2d0; } .vet p { color: #d6c7b4; }
.cielo .sotto, .cielo .intro, .cielo .indietro { color: #dccfe0; } .cielo .eti { color: #ffa24d; }
.luna-box p, .luna-testo b { color: var(--ink); }
.pro { background: #46b9ab1f; } .contro { background: #ff5b4517; } .pro > b, .wp-block-column.pro > p:first-child strong { color: #1f7a6e; } .contro > b, .wp-block-column.contro > p:first-child strong { color: #b03a2a; } .pro li::marker { color: #1f7a6e; } .contro li::marker { color: #b03a2a; }
.consiglio { background: #ffc24733; } .consiglio b, .consiglio strong:first-child { color: #9a5b00; }
.nota { color: #7a4a00; background: #ffc24755; border-color: #b77a00; }
.pezzo-riga strong, .prezzo { background: var(--ar); }
.calcolo .filtri button { background: var(--velo); box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink); } .calcolo .filtri button.on { background: var(--ar); color: #1d0f04; box-shadow: none; }
.filtri button { background: #fff; box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink); }
.wp-block-button.amazon .wp-block-button__link { background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px #1d140d33; }
.partecipa p { color: var(--ink2); } .condividi .voce.pill { background: var(--velo); }
.luna-scheda { background: var(--velo); }
.indice a { border-left-color: var(--linea); } .scheda-dati div { border-bottom-color: var(--linea); }
.mini-art:hover, .voce:hover, .barra-tema:hover { background: #1d140d0d; }
.pagina-wp { color: var(--ink2); } .pagina-wp ul li { background: #fff; }
.iscriviti { background: #fff; box-shadow: 0 10px 40px var(--ombra); }
.testa { border-bottom-color: var(--linea); } .panino i { background: var(--ink); } .carrello { color: var(--ink); } .carrello:hover { background: #1d140d12; }
.progresso { box-shadow: 0 0 10px #ff7a1a88; }
.tag { color: #1d0f04; } .conteggio, .meta { color: var(--muto); }
.luce button { color: #fff; }
.forum-guida { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 14px; }
.forum-guida > div { background: #fff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; }
.forum-guida i { font: 800 30px/1 var(--tit); font-style: normal; color: var(--ar); } .forum-guida b { font-size: 19px; } .forum-guida span { font-size: 14.5px; color: var(--muto); }
.forum-azioni { display: flex; flex-wrap: wrap; gap: 6px; } .forum-azioni .bott { margin: 6px 0 0; padding: 9px 16px; font-size: 14px; } .forum-ok { color: #1f7a6e !important; font-weight: 600; }
.forum-regole { font-size: 15px; color: var(--muto); margin: 0 0 22px; }
.forum #bbpress-forums .bbp-topic-form, .forum #bbpress-forums .bbp-reply-form { margin-top: 26px; } .forum #bbpress-forums fieldset.bbp-form legend { font: 700 20px var(--tit); padding: 0 8px; }
.forum #bbpress-forums div.bbp-template-notice, .forum #bbpress-forums div.indicator-hint { border-radius: 12px; background: #ffc24733; border-color: #b77a00; }
.forum #bbpress-forums .bbp-submit-wrapper button, .forum #bbpress-forums #bbp_search_submit { background: var(--ar); color: #1d0f04; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 600; cursor: pointer; }

/* --- pagina SFuture --- */
.token { display: grid; gap: 18px; align-items: start; } @media (min-width: 900px) { .token { grid-template-columns: 1.2fr 1fr; } }
.token-dati { margin: 0; background: #fff; border-radius: 22px; padding: 8px 22px; box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.token-dati div { padding: 14px 0; border-bottom: 1px dashed var(--linea); } .token-dati .largo { grid-column: 1 / -1; border-bottom: 0; } .token-dati dt { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muto); margin-bottom: 4px; } .token-dati dd { margin: 0; font-weight: 600; font-size: 17px; }
.token-dati code { display: block; font: 14px var(--mono); background: var(--pan2); padding: 10px 12px; border-radius: 10px; overflow-wrap: anywhere; margin-bottom: 8px; font-weight: 400; }
.token-dati .voce.pill { display: inline-flex; cursor: pointer; background: #fff; }
.vivo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #1f9d6b; margin-right: 8px; box-shadow: 0 0 0 0 #1f9d6b88; animation: battito-verde 2s infinite; } @keyframes battito-verde { 70% { box-shadow: 0 0 0 9px #1f9d6b00; } 100% { box-shadow: 0 0 0 0 #1f9d6b00; } }
.token-link { display: grid; gap: 10px; } .token-link a { position: relative; display: block; text-decoration: none; background: #fff; border-radius: 18px; padding: 16px 48px 16px 18px; box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; transition: transform .2s, box-shadow .2s; }
.token-link a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--ar), 0 14px 30px var(--ombra); } .token-link b { display: block; font-size: 18px; } .token-link span { font-size: 14px; color: var(--muto); } .token-link i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 20px; color: var(--ar); }
.chiara .pro, .chiara .contro { background: #fff; } .pro > b, .contro > b { font-size: 13px; }
.rischi { margin-top: 22px; border-radius: 18px; padding: 18px 20px; background: #ff5b4514; box-shadow: inset 0 0 0 1px #b03a2a66; } .rischi b { color: #b03a2a; font-size: 18px; } .rischi p { margin: 6px 0 0; font-size: 16px; color: var(--ink2); }
.moneta { animation-duration: 22s; }

/* testi arancioni piccoli: più scuri sul chiaro, così si leggono */
.eti, .strada i, .strada em, .pezzo-n, .pezzo-riga, .leggi, .ultimo-eti, .tendina summary, .tappa time, .vicini small, .evento em, .pianeta em, .forum-guida i, .token-link i, .carat i, .com-scheda i, .indice a.qui, .luna-testo span, .trio small { color: var(--eti); }
.cielo .eti { color: #ffa24d; } .chiara .eti { color: var(--eti); }
.schema figcaption { color: var(--muto); } .cielo .schema figcaption { color: #d9cfe6; }
.indietro { color: var(--muto); } .prosa a { color: var(--eti); } .pagina-wp a { color: var(--eti); }
.voce.on { background: #ff7a1a22; } .numeri span { color: var(--muto); }
.tappa.solo { display: block; } .tappa.solo time { display: block; margin-bottom: 4px; } .tappa.solo b { display: block; margin-bottom: 4px; }
.com-scheda i { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
/* copertine: tutte in 16:9, intere, nello stesso formato ovunque */
.foto, .art.grande .foto, .ultimo-scheda .foto, .tappa .foto { aspect-ratio: 16 / 9; min-height: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .art.grande { align-items: center; } .art.grande .foto { aspect-ratio: 16 / 9; min-height: 0; } }
.copert { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
.copertina img { aspect-ratio: 16 / 9; }
.mini-art img { width: 80px; height: 45px; }

/* --- 2.1: fine articolo --- */
.partecipa { font-family: var(--tit); margin-top: 64px; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--linea), 0 20px 60px #1d140d14; --bg: #f8f1e6; --pan: #fff; --pan2: #f1e6d5; --ar2: #e0600a; --ombra: #1d140d26; --ink: #1d140d; --ink2: #3b2d20; --muto: #6b5a48; --linea: #1d140d1c; --velo: #1d140d0d; --eti: #b84c08; }
.partecipa h3 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 4px; color: var(--ink); } .partecipa-testa p:last-child { margin: 0; color: var(--muto); font-size: 16px; }
.reazioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 26px; } @media (max-width: 560px) { .reazioni { grid-template-columns: repeat(2, 1fr); } }
.reazione { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; border: 0; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--linea); cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; }
.reazione:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--ar); } .reazione .emoji { font-size: 34px; line-height: 1.2; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); } .reazione:hover .emoji { transform: scale(1.18) rotate(-6deg); }
.reazione .nome { font-size: 13px; color: var(--muto); } .reazione b { font: 700 18px var(--mono); color: var(--ink); }
.reazione[aria-pressed="true"] { background: #ff7a1a1f; box-shadow: inset 0 0 0 2px var(--ar); } .reazione[aria-pressed="true"] b { color: var(--eti); }
.reazione.scoppio .emoji { animation: scoppio .6s; } @keyframes scoppio { 30% { transform: scale(1.6) rotate(10deg); } 60% { transform: scale(.9); } }
.partecipa-griglia { display: grid; gap: 22px; } @media (min-width: 760px) { .partecipa-griglia { grid-template-columns: 1.5fr 1fr; } }
.partecipa .eti { margin-bottom: 10px; } .partecipa-azioni { display: flex; flex-direction: column; align-items: flex-start; } .partecipa-azioni .bott { margin: 0 0 10px; }
.condividi { display: flex; flex-wrap: wrap; gap: 8px; }
.rete { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink) !important; text-decoration: none !important; font: 600 14px var(--tit); cursor: pointer; transition: transform .15s, box-shadow .2s; }
.rete:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px currentColor, 0 8px 18px #1d140d14; }
.rete span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 800 13px var(--tit); background: #6b5a48; }
.r-whatsapp span { background: #25d366; } .r-telegram span { background: #229ed9; } .r-x span { background: #111; } .r-facebook span { background: #1877f2; } .r-linkedin span { background: #0a66c2; } .r-threads span { background: #000; } .r-bluesky span { background: #1185fe; } .r-reddit span { background: #ff4500; } .r-pinterest span { background: #e60023; } .r-email span { background: #b84c08; } .r-copia span, .r-sistema span { background: var(--ar); color: #1d0f04; }
.leggi-anche { margin-top: 56px; font-family: var(--tit); } .griglia.tre { grid-template-columns: 1fr; } @media (min-width: 700px) { .griglia.tre { grid-template-columns: repeat(3, 1fr); } } .leggi-anche .art .estr { display: none; }
.commenti .foglio { box-shadow: inset 0 0 0 1px var(--linea), 0 20px 60px #1d140d14; } .commenti h3, .commenti #reply-title, .commenti .wpd-thread-head { font-family: var(--tit); }
#wpdcom { font-family: var(--tit) !important; max-width: 100% !important; } #wpdcom .wpd-thread-head { border-bottom-color: var(--ar) !important; }

/* --- 2.2: barra azioni, condividi frase, contatori --- */
.barra-azioni { position: fixed; z-index: 40; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translate(-50%, 160%); display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: #1d140df0; backdrop-filter: blur(10px); box-shadow: 0 14px 40px #1d140d55; transition: transform .35s cubic-bezier(.2, .8, .2, 1); font-family: var(--tit); }
.barra-azioni.vista { transform: translate(-50%, 0); }
.barra-azioni > * { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 15px; border: 0; border-radius: 999px; background: none; color: #f7efe4 !important; text-decoration: none !important; font-size: 14.5px; cursor: pointer; transition: background .2s; } .barra-azioni > *:hover { background: #ffffff18; }
.barra-azioni b { font-weight: 600; font-variant-numeric: tabular-nums; } .ba-icona { font-size: 18px; line-height: 1; }
.ba-cuore .ba-icona { color: #ffb4a8; } .ba-cuore[aria-pressed="true"] .ba-icona { color: #ff4d5e; } .ba-cuore[aria-pressed="true"] { background: #ff4d5e22; }
.ba-cuore.batte .ba-icona { animation: batti .55s cubic-bezier(.3, 1.6, .5, 1); } @keyframes batti { 35% { transform: scale(1.7); } 70% { transform: scale(.9); } }
.scintilla { position: absolute; left: 24px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #ff7a1a; pointer-events: none; animation: scintilla .7s ease-out forwards; } .scintilla:nth-child(odd) { background: #ff4d5e; }
@keyframes scintilla { from { transform: rotate(var(--a)) translateX(0); } to { transform: rotate(var(--a)) translateX(34px) scale(.2); opacity: 0; } }
@media (max-width: 480px) { .barra-azioni > * { padding: 9px 11px; } .ba-condividi b, .ba-forum b { display: none; } }
.foglio-condividi { position: fixed; inset: 0; z-index: 70; background: #1d140d66; display: grid; place-items: end center; padding: 16px; animation: appare .2s; } .foglio-condividi[hidden] { display: none; }
.foglio-condividi > div { width: min(560px, 100%); background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 30px 80px #1d140d55; animation: sale-su .3s cubic-bezier(.2, .8, .2, 1); --bg: #f8f1e6; --ink: #1d140d; --linea: #1d140d1c; } @keyframes sale-su { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 700px) { .foglio-condividi { place-items: center; } } .chiudi-foglio { margin-top: 14px; border: 0; background: none; color: var(--muto); font: 600 14px var(--tit); cursor: pointer; }
.frase-condividi { position: absolute; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; background: #1d140d; box-shadow: 0 10px 30px #1d140d55; font: 600 13px var(--tit); } .frase-condividi[hidden] { display: none; }
.frase-condividi span { color: #ffa24d; padding: 0 6px; } .frase-condividi a, .frase-condividi button { color: #f7efe4 !important; text-decoration: none !important; padding: 6px 10px; border-radius: 9px; border: 0; background: none; cursor: pointer; font: inherit; } .frase-condividi a:hover, .frase-condividi button:hover { background: #ffffff1c; }
.piede-scheda { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; } .piede-scheda .leggi { margin: 0; padding: 0; } .contatori { display: flex; gap: 10px; font-size: 13px; color: var(--muto); } .contatori span { white-space: nowrap; }
.forum-nota { display: block; margin: 0 0 16px; }

/* --- 2.3: commenti compatti --- */
details.commenti { margin-top: 40px; font-family: var(--tit); border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea), 0 10px 30px #1d140d10; overflow: hidden; }
details.commenti > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-size: 17px; } details.commenti > summary::-webkit-details-marker { display: none; }
details.commenti > summary b { font-weight: 700; } details.commenti > summary em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--eti); } details.commenti > summary em::after { content: " ▾"; } details.commenti[open] > summary em::after { content: " ▴"; }
details.commenti > summary:hover { background: #ff7a1a0d; }
details.commenti .foglio { margin: 0; border-radius: 0; box-shadow: none; padding: 4px 20px 20px; border-top: 1px solid var(--linea); font-size: 15px; }
details.commenti #wpdcom { margin: 0 !important; padding: 0 !important; } details.commenti #wpdcom .wpd-form-head, details.commenti #wpdcom .wpd-thread-head { margin: 10px 0 !important; padding: 0 0 8px !important; font-size: 14px !important; }
details.commenti #wpdcom .wpd-avatar img, details.commenti #wpdcom .avatar { width: 36px !important; height: 36px !important; } details.commenti #wpdcom .wpd-comm .wpd-comment-wrap { padding: 8px 0 !important; }
details.commenti #wpdcom textarea, details.commenti #wpdcom .ql-editor, details.commenti #wpdcom .ql-container { min-height: 70px !important; max-height: 180px; font-size: 15px !important; }
details.commenti #wpdcom .wpd-form-row, details.commenti #wpdcom .wpd-field-group { margin-bottom: 8px !important; } details.commenti #wpdcom input[type=text], details.commenti #wpdcom input[type=email], details.commenti #wpdcom input[type=url] { padding: 8px 10px !important; font-size: 14px !important; height: auto !important; }
details.commenti #wpdcom .wpd-social-login, details.commenti #wpdcom .wpd-auth { font-size: 13px !important; }
details.commenti #respond textarea { min-height: 90px; } details.commenti #reply-title { font-size: 18px; margin: 12px 0 8px; } details.commenti .comment-form p { margin: 0 0 10px; }

/* --- 2.4: area personale, omino, pubblicazioni compatte --- */
.omino { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); text-decoration: none; order: 3; transition: background .2s, color .2s; } .omino:hover { background: #1d140d12; color: var(--eti); }
.omino.dentro { width: 36px; height: 36px; margin: 4px; background: var(--ar); color: #1d0f04; font: 800 16px var(--tit); }
@media (max-width: 860px) { .omino { margin-left: auto; order: 0; } .omino + .carrello { margin-left: 0; } }
.pubblicazioni { display: grid; gap: 8px; }
.pubb { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.pubb:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1.5px var(--ar); } .pubb img { width: 96px; height: 54px; object-fit: cover; border-radius: 10px; }
.pubb small { display: block; font: 12px var(--mono); color: var(--muto); } .pubb b { font-size: 16.500px; line-height: 1.25; } .pubb i { font-style: normal; color: var(--eti); }
@media (max-width: 520px) { .pubb { grid-template-columns: 72px 1fr; } .pubb img { width: 72px; height: 41px; } .pubb i { display: none; } }
.vantaggi { display: flex; flex-wrap: wrap; gap: 8px; } .vantaggi span { background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14.500px; box-shadow: inset 0 0 0 1px var(--linea); }
.accesso { max-width: 900px; } .accesso h2 { font-size: 24px; margin: 0 0 12px; } .accesso .u-columns { display: grid; gap: 30px; } @media (min-width: 760px) { .accesso .u-columns { grid-template-columns: 1fr 1fr; } } .accesso .u-column1, .accesso .u-column2 { float: none !important; width: auto !important; }
.accesso form { border: 0 !important; padding: 0 !important; margin: 0 !important; } .accesso label { display: block; font-size: 14px; margin-bottom: 4px; } .accesso input[type=text], .accesso input[type=email], .accesso input[type=password] { width: 100%; padding: 12px 14px; border: 1px solid #1d140d40; border-radius: 12px; font: inherit; }
.accesso .woocommerce-form-row, .accesso p.form-row { margin: 0 0 12px; } .accesso .woocommerce-privacy-policy-text { font-size: 13px; color: var(--muto); }
.area { padding-bottom: 80px; } .area-griglia { display: grid; gap: 18px; } @media (min-width: 860px) { .area-griglia { grid-template-columns: 1fr 1fr; } }
.area-scheda { background: #fff; border-radius: 22px; padding: 22px; box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; } .muto-testo { color: var(--muto); font-size: 15.500px; margin: 0 0 12px; }
.area-modulo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; } .area-modulo input, .area-modulo textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 13px; border: 1px solid #1d140d40; border-radius: 12px; font: inherit; font-weight: 400; background: var(--bg); }
.area-modulo .bott { margin: 0; cursor: pointer; } .area-azioni { display: flex; flex-wrap: wrap; gap: 8px; } .area-azioni .bott { margin: 0; } .area-esito { display: block; margin: 0 0 18px; }
.pubb:not(:has(img)) { grid-template-columns: 1fr auto; padding-left: 16px; }
.omino.dentro { margin: 4px 4px 4px 4px; } @media (max-width: 860px) { .testa .omino, .testa .omino.dentro { margin-left: auto; } .testa .omino + .carrello { margin-left: 0; } }
/* telefono: prima il testo, poi indice, dati e temi (in fondo, chiusi) */
@media (max-width: 959px) { .conlato.rovescio .lato { order: 2 !important; display: block; margin-top: 30px; } .conlato.rovescio .lato .tendina, .conlato.rovescio .lato .tendina:first-child:not(:has(.indice)), .conlato.rovescio .lato .tendina:nth-child(n+2) { display: block !important; } .conlato.rovescio #copia { display: none; } }
@media (max-width: 959px) { .conlato.rovescio .lato { order: -1 !important; margin-top: 0; } .tendina-unica { margin-bottom: 0; } .tendina-unica > div { padding: 0 10px 10px; } .tendina-unica .tendina { box-shadow: none; background: none; margin: 0; border-top: 1px solid var(--linea); border-radius: 0; } .tendina-unica .tendina summary { padding: 12px 6px; pointer-events: none; } .tendina-unica .tendina summary::after { content: none; } .tendina-unica .tendina > div { padding: 0 0 10px; animation: none; } }

/* --- 2.5: home su telefono, come un feed --- */
.storie { display: none; }
@media (max-width: 760px) {
  .storie { display: flex; gap: 14px; overflow-x: auto; padding: 14px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; border-bottom: 1px solid var(--linea); } .storie::-webkit-scrollbar { display: none; }
  .storia { flex: 0 0 auto; width: 70px; text-align: center; text-decoration: none; color: var(--ink); scroll-snap-align: start; }
  .bolla { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 5px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #ff7a1a, #ffc247, #ff4d5e, #ff7a1a); }
  .bolla img, .bolla i { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; } .bolla i { display: grid; place-items: center; background: #1d140d; color: #ff7a1a; font: 800 20px var(--tit); font-style: normal; }
  .storia b { display: block; font-size: 11.500px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eroe:not(.prodotto) { padding: 22px 0 8px; } .eroe:not(.prodotto) .w { gap: 18px; } .eroe:not(.prodotto) h1 { font-size: 30px; } .eroe:not(.prodotto) .eti { margin-bottom: 8px; font-size: 10.500px; }
  .eroe:not(.prodotto) .intro { font-size: 15.500px; margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .eroe:not(.prodotto) .numeri, .eroe:not(.prodotto) .bott { display: none; } .eroe:not(.prodotto) .ultimo-scheda .bott { display: inline-flex; }
  .nastro { display: none; }
  body.home .sez { padding: 34px 0; } body.home .strade { display: none; } body.home .sez:has(> .w > .strade) { display: none; }
  body.home .griglia { gap: 22px; } body.home .art, body.home .ultimo-scheda { border-radius: 18px; } body.home .art .corpo { padding: 12px 14px 16px; gap: 7px; }
  body.home .art .estr { -webkit-line-clamp: 2; } body.home .art b { font-size: 18px; }
  body.home .piede-scheda { order: -1; padding: 0; } body.home .piede-scheda .leggi { display: none; } body.home .contatori { font-size: 15px; gap: 14px; color: var(--ink); } body.home .contatori:empty::before { content: "♡"; font-size: 18px; color: var(--muto); }
  body.home .art .riga { order: -2; }
}

/* --- 2.5.1: azioni rapide al posto dei cerchi --- */
.azioni-rapide { display: none; }
@media (max-width: 760px) {
  .azioni-rapide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 6px; }
  .azioni-rapide a { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); text-decoration: none; color: var(--ink); min-height: 56px; }
  .azioni-rapide a:active { background: #ff7a1a1a; box-shadow: inset 0 0 0 1.5px var(--ar); } .azioni-rapide svg { flex: 0 0 auto; color: var(--ar); }
  .azioni-rapide span { font-size: 12.500px; line-height: 1.25; color: var(--muto); } .azioni-rapide b { display: block; font-size: 15.500px; color: var(--ink); }
}

/* 2.6.1 — menu dell'account: area personale, cambia account, esci */
.conto { position: relative; order: 3; } .conto > summary { list-style: none; cursor: pointer; } .conto > summary::-webkit-details-marker { display: none; }
.conto-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; padding: 8px; background: #fffaf3; color: #2a1c12; border: 1px solid #1d140d1f; border-radius: 16px; box-shadow: 0 18px 40px #1d140d2e; }
.conto-menu p { margin: 0 0 6px; padding: 8px 12px 10px; border-bottom: 1px solid #1d140d14; font-size: 14px; line-height: 1.35; } .conto-menu p span { display: block; color: #8a7867; font-size: 12px; overflow-wrap: anywhere; }
.conto-menu a { display: block; padding: 11px 12px; border-radius: 10px; color: #2a1c12; text-decoration: none; font-size: 15px; } .conto-menu a:hover { background: #ff7a1a1c; } .conto-menu a.esci { color: #c0391f; }
.conto-riga { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; } .conto-riga strong { margin-right: 6px; overflow-wrap: anywhere; }
@media (max-width: 860px) { .testa .conto { margin-left: auto; order: 0; } .testa .conto .omino.dentro { margin: 4px; } .testa .conto + .carrello { margin-left: 0; } }
/* */.testa details.conto { overflow: visible; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; width: auto; }
.testa details.conto > summary.omino { padding: 0; letter-spacing: 0; text-transform: none; }
@media (max-width: 860px) { .testa details.conto { margin-left: auto; order: 0; } .testa details.conto + .carrello { margin-left: 0; } }
.conto-menu { max-width: calc(100vw - 24px); }

/* 2.7 — profilo: nickname e foto */
.omino.dentro.con-foto { padding: 0; overflow: hidden; background: none; } .omino.dentro.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.profilo-modulo { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); } .profilo-foto { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.profilo-tondo { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--ar); color: #1d0f04; font: 800 34px var(--tit); } .profilo-tondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.area-modulo .profilo-scegli { display: inline-block; margin: 0 0 6px; cursor: pointer; font-weight: 600; } .area-modulo .profilo-scegli input { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; margin: 0; } .profilo-scegli:focus-within { outline: 2px solid var(--ar); outline-offset: 2px; }
.area-modulo .profilo-togli { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 4px 0; } .area-modulo .profilo-togli input { display: inline; width: auto; margin: 0; padding: 0; }
.profilo-modulo small { display: block; color: var(--muto); font-size: 13px; font-weight: 400; margin-top: 4px; }

/* 2.8 — Osservatorio: bollettino di stasera, cosa guardare, mappa del cielo, dirette, notizie */
.oss { --pan: #1c1626; --ink: #f7efe4; --muto: #b9adc4; --linea: #ffffff1f; --velo: #ffffff0d; --eti: #ffa24d; --ar2: #ffa24d; background: #0d0a14; color: var(--ink); }
.oss h2, .oss h3 { color: var(--ink); } .oss .sotto { color: var(--muto); } .oss .eti { color: #ffa24d; } .oss .piccolo { color: var(--muto); } .oss a { color: #ffb873; }
.oss-menu { position: sticky; top: var(--oss-su, 64px); z-index: 30; background: #0d0a14f2; backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff1a; }
.oss-menu .w { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; } .oss-menu .w::-webkit-scrollbar { display: none; }
.oss-menu a { flex: none; padding: 9px 14px; border-radius: 999px; color: #e9dfee; text-decoration: none; font: 600 13.5px var(--tit); background: #ffffff0f; } .oss-menu a:hover, .oss-menu a:focus-visible { background: #ff7a1a; color: #1d0f04; }
.oss-capo { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; } .oss-capo h2 { margin: 0; }
.oss-luogo { display: grid; gap: 5px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muto); }
.oss-luogo select { font: 600 15px var(--tit); letter-spacing: 0; text-transform: none; color: var(--ink); background: #241b30; border: 1px solid #ffffff33; border-radius: 12px; padding: 11px 14px; min-height: 44px; max-width: 100%; }
.oss-frase { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.4; max-width: 46em; margin: 0 0 18px; color: var(--ink); }
.oss-evento { border-radius: 18px; padding: 14px 18px; margin: 0 0 18px; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff1f; } .oss-evento small { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muto); } .oss-evento p { margin: 4px 0 0; font-size: 16px; }
.oss-evento.oggi { background: linear-gradient(120deg, #ff7a1a, #ffb04d); color: #1d0f04; box-shadow: none; } .oss-evento.oggi small { color: #4a2405; } .oss-evento.oggi b { font-size: 19px; }
.oss-tessere { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; } @media (min-width: 900px) { .oss-tessere { grid-template-columns: repeat(4, 1fr); } }
.oss-tessera { background: var(--pan); border-radius: 18px; padding: 16px; box-shadow: inset 0 0 0 1px var(--linea); min-width: 0; } .oss-tessera small { display: block; font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffa24d; margin-bottom: 6px; }
.oss-tessera b { display: block; font-size: 18px; line-height: 1.25; } .oss-tessera span { display: block; font-size: 13.5px; color: var(--muto); margin-top: 4px; }
.oss-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.oss-filtri button { font: 600 14px var(--tit); padding: 10px 16px; min-height: 42px; border-radius: 999px; border: 1px solid #ffffff33; background: transparent; color: var(--ink); cursor: pointer; } .oss-filtri button.qui { background: #ff7a1a; border-color: #ff7a1a; color: #1d0f04; } .oss-filtri button:hover { border-color: #ff7a1a; }
.oss-filtri.chiari button { border-color: #1d140d33; color: #1d140d; } .oss-filtri.chiari button.qui { color: #1d0f04; }
.guarda { display: grid; gap: 12px; } @media (min-width: 760px) { .guarda { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .guarda { grid-template-columns: 1fr 1fr 1fr; } }
.guarda-carta { display: grid; grid-template-columns: 14px 1fr; gap: 12px; background: var(--pan); border-radius: 18px; padding: 16px; box-shadow: inset 0 0 0 1px var(--linea); } .guarda-punto { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 14px currentColor; }
.guarda-carta small { font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muto); } .guarda-carta h3 { margin: 2px 0 8px; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.guarda-carta p { margin: 0 0 8px; font-size: 14.5px; color: #ddd3e4; line-height: 1.5; } .guarda-dati { font-size: 14px !important; } .guarda-dati b { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffa24d; margin-right: 4px; }
.guarda-strum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; } .guarda-strum i { font: 600 12px var(--tit); font-style: normal; padding: 4px 10px; border-radius: 999px; background: #ffffff14; color: #f1e8f5; }
.mappa-griglia { display: grid; gap: 24px; align-items: center; } @media (min-width: 900px) { .mappa-griglia { grid-template-columns: minmax(0, 480px) 1fr; } }
.mappa-tela { max-width: 480px; width: 100%; margin: 0 auto; } #mappa { display: block; width: 100%; height: auto; }
#mappa text { font-family: var(--tit); } .m-card { fill: #ffffffc0; font-size: 13px; font-weight: 700; text-anchor: middle; } .m-st { fill: #ffffffa8; font-size: 9.5px; } .m-fig { fill: #ffffff66; font-size: 9px; text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; } .m-pi { fill: #fff; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #0a0c1c; stroke-width: 3px; }
.mappa-ora { margin: 0 0 12px; } .mappa-ora b { display: block; font: 800 clamp(44px, 8vw, 64px)/1 var(--tit); letter-spacing: -.03em; } .mappa-ora span { font: 600 13px var(--mono); color: #ffa24d; }
.mappa-cursore { display: block; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muto); margin-bottom: 14px; } .mappa-cursore input { display: block; width: 100%; margin-top: 10px; accent-color: #ff7a1a; height: 28px; }
.mappa-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 15px; } .mappa-lista li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mappa-lista span { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ev-cal { display: block; width: max-content; margin-top: 8px; padding: 6px 12px; min-height: 32px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--eti); font: 600 12.5px var(--tit); cursor: pointer; } .ev-cal:hover { border-color: var(--ar); }
.e-eclissi { border-left-color: #e0493a; } .eventi .vuoto { list-style: none; }
.diretta-video { margin: 0 0 18px; border-radius: 22px; overflow: hidden; background: #120b09; aspect-ratio: 16 / 9; max-width: 860px; } .diretta-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.diretta-video button { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; border: 0; cursor: pointer; color: #f7efe4; text-align: center; background: radial-gradient(ellipse at 70% 0%, #4a2a1a, #1a1020 60%, #0a0710); font-family: var(--tit); }
.diretta-video button b { font-size: clamp(20px, 3.4vw, 30px); } .diretta-video button small { max-width: 34em; color: #cfc3d6; font-size: 14px; line-height: 1.45; } .diretta-video button:hover b { color: #ffa24d; }
.diretta-punto { width: 16px; height: 16px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 6px #ff3b3033; }
@media (min-width: 760px) { .strade.dirette { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .strade.dirette { grid-template-columns: repeat(4, 1fr); } } .strade.dirette .strada b { font-size: 21px; } .strade.dirette .strada { padding: 20px; }
@media (prefers-reduced-motion: no-preference) { .diretta-punto { animation: sf-battito 1.6s infinite; } } @keyframes sf-battito { 50% { box-shadow: 0 0 0 12px #ff3b3000; } }
html:has(.oss-menu) { scroll-padding-top: 150px; }

.oss-dove { position: relative; display: grid; gap: 10px; width: 100%; } @media (min-width: 620px) { .oss-dove { grid-template-columns: 1fr 1fr; width: auto; min-width: min(520px, 100%); } }
.oss-luogo input { font: 500 15px var(--tit); letter-spacing: 0; text-transform: none; color: var(--ink); background: #241b30; border: 1px solid #ffffff33; border-radius: 12px; padding: 11px 14px; min-height: 44px; width: 100%; } .oss-luogo input::placeholder { color: #9c90a8; } .oss-luogo select { width: 100%; }
.oss-esiti { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px; background: #241b30; border: 1px solid #ffffff33; border-radius: 14px; box-shadow: 0 18px 40px #000a; max-height: 320px; overflow: auto; }
.oss-esiti button { display: block; width: 100%; text-align: left; padding: 11px 12px; min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 15px var(--tit); cursor: pointer; } .oss-esiti button:hover, .oss-esiti button:focus-visible { background: #ff7a1a33; } .oss-esiti span { color: var(--muto); font-size: 13.5px; } .oss-niente { padding: 12px; color: var(--muto); font-size: 14px; }

/* 2.8 — icone del profilo */
.profilo-icone { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; } .profilo-icone legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; } .profilo-icone > div { display: flex; flex-wrap: wrap; gap: 8px; }
.area-modulo .profilo-icone label { position: relative; display: block; margin: 0; cursor: pointer; } .area-modulo .profilo-icone input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.profilo-icone img { display: block; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: transform .15s, box-shadow .15s; } .profilo-icone label:hover img { transform: scale(1.08); }
.profilo-icone input:checked + img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ar); } .profilo-icone input:focus-visible + img, .profilo-icone input:focus-visible + span { outline: 2px solid var(--ar); outline-offset: 3px; }
.profilo-nessuna span { display: grid; place-items: center; height: 48px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--linea); margin: 0 !important; color: var(--ink) !important; } .profilo-nessuna input:checked + span { box-shadow: inset 0 0 0 2px var(--ar); }
/* 2.8 — osservatorio sul telefono: consigli da sfogliare con il dito */
@media (max-width: 759px) { .guarda { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .guarda::-webkit-scrollbar { display: none; } .guarda-carta { scroll-snap-align: center; }
  .guarda-conta { display: block; text-align: center; font: 600 12px var(--mono); color: var(--muto); margin-top: 2px; } .mappa-tela { touch-action: pan-y; } }
.guarda-conta { display: none; }
.diretta-video { aspect-ratio: auto; height: min(70vh, 560px); max-width: none; } @media (max-width: 759px) { .diretta-video { height: 72vh; } }

/* 3.0 — Progetti: laboratorio, schede, tappe, idee da votare */
.lab-numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; max-width: 760px; } @media (min-width: 700px) { .lab-numeri { grid-template-columns: repeat(4, 1fr); } }
.lab-numeri div { background: var(--pan); border-radius: 18px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--linea); } .lab-numeri b { display: block; font: 800 38px/1 var(--tit); letter-spacing: -.03em; color: var(--ar-scuro); font-variant-numeric: tabular-nums; } .lab-numeri span { font-size: 13.5px; color: var(--muto); }
.lab-ora { display: flex; gap: 14px; align-items: center; margin-top: 14px; max-width: 760px; padding: 14px 18px; border-radius: 18px; background: #1d140d; color: #f7efe4; text-decoration: none; font-size: 15.5px; line-height: 1.4; } .lab-ora small { display: block; font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffa24d; margin-bottom: 2px; } .lab-ora i { font-style: normal; margin-left: auto; color: #ffa24d; }
.lab-punto { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 5px #3ddc8433; } @media (prefers-reduced-motion: no-preference) { .lab-punto { animation: sf-vivo 1.8s infinite; } } @keyframes sf-vivo { 50% { box-shadow: 0 0 0 10px #3ddc8400; } }
.lab-primo { display: grid; border-radius: 26px; overflow: hidden; background: #1d140d; color: #f7efe4; text-decoration: none; transition: transform .25s, box-shadow .25s; } .lab-primo:hover { transform: translateY(-4px); box-shadow: 0 26px 60px #1d140d55; }
@media (min-width: 860px) { .lab-primo { grid-template-columns: 1.1fr 1fr; } }
.lab-primo-foto { position: relative; display: grid; place-items: center; min-height: 220px; background: radial-gradient(ellipse at 70% 10%, #5a2c12, #23130c 60%, #120b09); overflow: hidden; } .lab-primo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lab-primo-testo { display: flex; flex-direction: column; gap: 8px; padding: 26px; } .lab-primo-testo small { font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffa24d; } .lab-primo-testo > b { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.03em; line-height: 1; } .lab-primo-testo em { font-style: normal; color: #e6d8c6; font-size: 17px; line-height: 1.4; } .lab-primo-testo u { text-decoration: none; color: #ffa24d; font-weight: 600; margin-top: 6px; }
.prog-sigla { font: 800 64px/1 var(--tit); letter-spacing: -.05em; color: #ff7a1a; }
.tappe { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tappe li { position: relative; padding-top: 22px; font-size: 12px; text-align: center; color: #b3a391; min-width: 0; } .tappe li b { font-weight: 600; overflow-wrap: anywhere; }
.tappe li::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 4px; border-radius: 4px; background: #ffffff26; } .tappe li i { position: absolute; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #55473c; box-shadow: 0 0 0 3px #1d140d; }
.tappe li.fatta::before, .tappe li.qui::before { background: #ff7a1a; } .tappe li.fatta i { background: #ff7a1a; } .tappe li.qui i { background: #fff; box-shadow: 0 0 0 3px #ff7a1a, 0 0 16px #ff7a1a; } .tappe li.qui { color: #fff; }
.prog-avanza { padding-top: 26px; padding-bottom: 10px; } .tappe.vive { gap: 6px; max-width: 860px; } .tappe.vive li { padding: 0; color: var(--muto); } .tappe.vive li::before { top: 19px; background: var(--riga); } .tappe.vive li.fatta::before, .tappe.vive li.qui::before { background: var(--ar); }
.tappe.vive button { position: relative; display: grid; justify-items: center; gap: 8px; width: 100%; padding: 4px 2px 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 12px; min-height: 76px; }
.tappe.vive i { position: static; margin: 0; width: 34px; height: 34px; display: grid; place-items: center; font: 700 14px var(--tit); font-style: normal; color: var(--muto); background: var(--pan); box-shadow: inset 0 0 0 2px var(--riga), 0 0 0 4px var(--bg); }
.tappe.vive li.fatta i { background: var(--ar); color: #1d0f04; box-shadow: 0 0 0 4px var(--bg); } .tappe.vive li.qui i { background: #1d140d; color: #fff; box-shadow: 0 0 0 3px var(--ar), 0 0 0 7px #ff7a1a33; } .tappe.vive li.qui { color: var(--ink); }
.tappe.vive button[aria-pressed="true"] b { text-decoration: underline; text-decoration-color: var(--ar); text-underline-offset: 4px; } .tappe.vive button:focus-visible { outline: 2px solid var(--ar); }
.tappe-testo { max-width: 860px; margin: 14px 0 0; padding: 14px 18px; border-radius: 16px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); font-size: 15.5px; line-height: 1.5; }
.lab-filtri { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 16px; padding: 2px 18px 6px; scrollbar-width: none; } .lab-filtri::-webkit-scrollbar { display: none; } .lab-filtri button { flex: none; } @media (min-width: 760px) { .lab-filtri { flex-wrap: wrap; margin: 0 0 18px; padding: 0; overflow: visible; } }
.prog-griglia { display: grid; gap: 16px; } @media (min-width: 640px) { .prog-griglia { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .prog-griglia { grid-template-columns: 1fr 1fr 1fr; } }
.prog { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--pan); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; transition: transform .22s, box-shadow .22s; } .prog[hidden] { display: none; }
.prog:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1.5px var(--ar), 0 18px 40px var(--ombra); }
.prog-foto { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(ellipse at 70% 10%, #5a2c12, #23130c 60%, #120b09); } .prog-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .prog:hover .prog-foto img { transform: scale(1.05); }
.prog-stato { display: inline-block; padding: 5px 11px; border-radius: 999px; font: 700 11.5px var(--tit); letter-spacing: .02em; background: #1d140d; color: #fff; } .prog-foto .prog-stato { position: absolute; left: 12px; top: 12px; }
.s-idea { background: #6b5a48; } .s-prototipo { background: #8a4bd6; } .s-costruzione { background: #c2520a; } .s-disponibile { background: #1f7a4d; } .s-attivo { background: #14708a; }
.prog-corpo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; } .prog-corpo > b { font-size: 23px; letter-spacing: -.02em; line-height: 1.15; } .prog-frase { color: var(--muto); font-size: 14.5px; line-height: 1.45; }
.prog-mat { display: flex; flex-wrap: wrap; gap: 6px; } .prog-mat i, .prog-chip { font: 600 12px var(--tit); font-style: normal; padding: 4px 10px; border-radius: 999px; background: var(--velo); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--linea); }
.prog-barra { display: block; height: 6px; border-radius: 6px; background: var(--riga); overflow: hidden; margin-top: auto; } .prog-barra span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff7a1a, #ffb04d); }
.prog-piede { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .prog-piede small { font: 12px var(--mono); color: var(--muto); } .prog-piede u { text-decoration: none; font-weight: 600; font-size: 14px; color: var(--eti); }
.lab-idee { background: var(--pan2); } .idee { display: grid; gap: 14px; } @media (min-width: 860px) { .idee { grid-template-columns: 1fr 1fr; } }
.idea { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; background: var(--pan); border-radius: 20px; padding: 14px; box-shadow: inset 0 0 0 1px var(--linea); } .idea:not(:has(.idea-foto)) { grid-template-columns: 1fr; }
.idea-foto { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; } .idea-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .idea h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.2; } .idea h3 a { color: var(--ink); text-decoration: none; } .idea p { margin: 0 0 10px; font-size: 14.5px; color: var(--muto); line-height: 1.45; }
.idea-voto { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; } .vota { font: 600 14px var(--tit); padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 0; background: var(--ar); color: #1d0f04; cursor: pointer; transition: transform .15s; } .vota:hover { transform: scale(1.04); } .vota.fatto { background: #1f7a4d; color: #fff; cursor: default; transform: none; } .vota:disabled { opacity: .9; }
.idea-barra { flex: 1; min-width: 60px; height: 8px; border-radius: 8px; background: var(--riga); overflow: hidden; } .idea-barra span { display: block; height: 100%; background: var(--ar); border-radius: 8px; transition: width .6s; } .idea-n { font: 800 20px var(--tit); font-variant-numeric: tabular-nums; } .idea-etichetta { font-size: 13px; color: var(--muto); }
@media (max-width: 520px) { .idea { grid-template-columns: 76px 1fr; gap: 12px; } }
.prog-testa { display: grid; gap: 24px; align-items: center; margin-top: 10px; } @media (min-width: 900px) { .prog-testa { grid-template-columns: 1fr 1fr; } } .prog-capo .riga { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prog-immagine { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px; box-shadow: 0 20px 50px #1d140d33; } .prog-immagine.vuota { display: grid; place-items: center; background: radial-gradient(ellipse at 70% 10%, #5a2c12, #23130c 60%, #120b09); } .prog-immagine.vuota .prog-sigla { font-size: 110px; }
.prog-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .prog-azioni .bott { margin: 0; cursor: pointer; font-family: inherit; } .bott.segui.attivo { background: var(--ar); color: #1d0f04; box-shadow: none; }
.prog-corpo-griglia { display: grid; gap: 28px; padding-top: 30px; padding-bottom: 20px; align-items: start; } @media (min-width: 980px) { .prog-corpo-griglia:has(.prog-scheda) { grid-template-columns: minmax(0, 1fr) 320px; } } .prog-corpo-griglia .prosa { max-width: 72ch; }
.prog-scheda { background: var(--pan); border-radius: 20px; padding: 18px; box-shadow: inset 0 0 0 1px var(--linea); } @media (min-width: 980px) { .prog-scheda { position: sticky; top: 100px; } } .prog-scheda .scheda-dati div { display: grid; gap: 2px; } .prog-scheda .scheda-dati dd { font-weight: 600; }
.capitoli .tappa time { letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 639px) { .progetto .prog-griglia { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; } .progetto .prog-griglia::-webkit-scrollbar { display: none; } .progetto .prog-griglia .prog { scroll-snap-align: center; } }

/* 3.1 — immagine del progetto nelle pagine dedicate e in home */
.eroe-foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 72% 50%; border-radius: 26px; box-shadow: 0 24px 60px #1d140d40; }
.vet.con-foto img { object-position: 78% 50%; }

/* 3.2 — Laboratorio: scena dei progetti, banco di lavoro, sala giochi, officina delle idee, sfida */
.lab-salta { display: flex; gap: 8px; overflow-x: auto; margin: 18px -18px 0; padding: 2px 18px 4px; scrollbar-width: none; } .lab-salta::-webkit-scrollbar { display: none; }
.lab-salta a { flex: none; padding: 10px 16px; border-radius: 999px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink); text-decoration: none; font: 600 14px var(--tit); } .lab-salta a:hover { box-shadow: inset 0 0 0 1.5px var(--ar); }
.lab-scena-sez { padding-top: 14px; }
.lab-scegli { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px 12px; padding: 2px 18px 6px; scrollbar-width: none; } .lab-scegli::-webkit-scrollbar { display: none; }
.lab-scegli a { flex: none; padding: 11px 18px; min-height: 44px; border-radius: 999px; font: 700 15px var(--tit); text-decoration: none; color: var(--ink); background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); transition: background .2s, color .2s, transform .2s; }
.lab-scegli a[aria-selected="true"] { background: #1d140d; color: #fff; box-shadow: none; transform: scale(1.04); }
.lab-scena { display: grid; border-radius: 28px; overflow: hidden; background: #1d140d; color: #f7efe4; box-shadow: 0 24px 60px #1d140d40; } @media (min-width: 900px) { .lab-scena { grid-template-columns: 1.15fr 1fr; min-height: 520px; } }
.scena-foto { position: relative; display: grid; place-items: center; min-height: 230px; background: radial-gradient(ellipse at 70% 10%, #5a2c12, #23130c 60%, #120b09); overflow: hidden; } .scena-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.scena-foto .prog-stato { position: absolute; left: 16px; top: 16px; }
.scena-freccia { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 0; background: #0f0b09b3; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); } .scena-freccia.sx { left: 10px; } .scena-freccia.dx { right: 10px; } .scena-freccia:hover { background: #ff7a1a; color: #1d0f04; }
@media (prefers-reduced-motion: no-preference) { .scena-foto.entra-dx img, .scena-foto.entra-dx .prog-sigla { animation: sf-entra-dx .45s cubic-bezier(.2, .7, .2, 1); } .scena-foto.entra-sx img, .scena-foto.entra-sx .prog-sigla { animation: sf-entra-sx .45s cubic-bezier(.2, .7, .2, 1); }
  .scena-breve li, .scena-tappe li, .officina-passi li { animation: sf-sale .4s both; animation-delay: calc(var(--r) * 70ms); } }
@keyframes sf-entra-dx { from { transform: translateX(8%) scale(1.06); opacity: 0; } } @keyframes sf-entra-sx { from { transform: translateX(-8%) scale(1.06); opacity: 0; } } @keyframes sf-sale { from { transform: translateY(10px); opacity: 0; } }
.scena-corpo { display: flex; flex-direction: column; gap: 10px; padding: 22px; min-width: 0; } @media (min-width: 900px) { .scena-corpo { padding: 32px; } }
.scena-ora { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 14px; border-radius: 14px; background: #ffffff12; font-size: 13.5px; line-height: 1.4; color: #e6d8c6; } .scena-ora .lab-punto { width: 10px; height: 10px; }
.scena-corpo h3 { margin: 0; font-size: clamp(34px, 6vw, 54px); letter-spacing: -.035em; line-height: 1; color: #fff; } .scena-frase { margin: 0; font-size: 16.5px; line-height: 1.45; color: #e6d8c6; }
.scena-tab { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: #ffffff14; margin-top: 6px; } .scena-tab button { flex: 1; min-height: 40px; padding: 8px 6px; border: 0; border-radius: 999px; background: none; color: #d6c7b4; font: 600 13.5px var(--tit); cursor: pointer; white-space: nowrap; } .scena-tab button[aria-pressed="true"] { background: #ff7a1a; color: #1d0f04; }
.scena-pannello { min-height: 150px; } .scena-breve, .scena-tappe, .scena-diario { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.scena-breve li { position: relative; padding: 10px 12px 10px 38px; border-radius: 12px; background: #ffffff0f; font-size: 15px; line-height: 1.4; } .scena-breve li::before { content: "✓"; position: absolute; left: 13px; top: 9px; color: #ff9a4d; font-weight: 800; }
.scena-tappe li { display: flex; gap: 12px; align-items: center; color: #8f8173; font-size: 15px; } .scena-tappe i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ffffff1a; font: 700 13px var(--tit); font-style: normal; color: #b3a391; }
.scena-tappe li.fatta { color: #e6d8c6; } .scena-tappe li.fatta i { background: #ff7a1a; color: #1d0f04; } .scena-tappe li.qui { color: #fff; font-weight: 700; } .scena-tappe li.qui i { background: #fff; color: #1d0f04; box-shadow: 0 0 0 4px #ff7a1a; } .scena-tappe em { font-style: normal; font: 600 11.5px var(--mono); color: #ffa24d; margin-left: 6px; text-transform: uppercase; letter-spacing: .08em; }
.scena-diario a { display: block; padding: 10px 14px; border-radius: 12px; background: #ffffff0f; color: #fff; text-decoration: none; font-weight: 600; line-height: 1.3; } .scena-diario a:hover { background: #ffffff1f; } .scena-diario small { display: block; font: 11.5px var(--mono); color: #ffa24d; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; } .scena-niente { color: #b3a391; font-size: 15px; margin: 0; }
.scena-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; } .scena-azioni .bott { margin: 0; cursor: pointer; font-family: inherit; } .scena-azioni .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.lab-gesto { text-align: center; margin: 10px 0 0; }
.banco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 22px; background: var(--pan2); box-shadow: inset 0 0 0 1px var(--linea); }
.banco-col { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 6px; border-radius: 14px; background: var(--pan); } .banco-col:has(.banco-pezzo.scelto) { box-shadow: inset 0 0 0 2px var(--ar); }
.banco-tappa { display: grid; justify-items: center; gap: 4px; padding: 6px 2px 8px; border: 0; border-bottom: 2px dashed var(--riga); background: none; color: var(--muto); font: 600 12px var(--tit); cursor: pointer; overflow-wrap: anywhere; } .banco-tappa i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--velo); font: 700 12.5px var(--tit); font-style: normal; } .banco-tappa.letta { color: var(--ink); } .banco-tappa.letta i { background: var(--ar); color: #1d0f04; }
.banco-pezzo { display: block; padding: 9px 5px; border-radius: 10px; background: #1d140d; color: #fff; text-decoration: none; font: 700 12.5px/1.2 var(--tit); text-align: center; overflow-wrap: anywhere; transition: transform .18s; border-bottom: 4px solid #ff7a1a; } .banco-pezzo:hover { transform: translateY(-3px) rotate(-1.5deg); } .banco-pezzo.scelto { background: var(--ar); color: #1d0f04; border-bottom-color: #1d140d; }
.banco-pezzo.k-prototipo { border-bottom-color: #a06be0; } .banco-pezzo.k-disponibile { border-bottom-color: #2fa66c; } .banco-pezzo.k-attivo { border-bottom-color: #2a9bbd; }
@media (min-width: 760px) { .banco { gap: 10px; padding: 14px; } .banco-col { padding: 10px; } .banco-tappa { font-size: 14px; } .banco-pezzo { font-size: 15px; padding: 12px 8px; } }
.lab-giochi { background: #120d18; color: #f7efe4; --ink: #f7efe4; --muto: #b9adc4; --linea: #ffffff1f; } .lab-giochi h2, .lab-giochi h3 { color: #fff; } .lab-giochi .sotto { color: #b9adc4; } .lab-giochi .eti { color: #ffa24d; }
.gioco-scelta { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 14px; padding: 2px 18px 6px; scrollbar-width: none; } .gioco-scelta::-webkit-scrollbar { display: none; } @media (min-width: 760px) { .gioco-scelta { flex-wrap: wrap; margin: 0 0 16px; padding: 0; overflow: visible; } }
.gioco-scelta button { flex: none; display: grid; gap: 1px; text-align: left; border-radius: 16px; padding: 10px 16px; } .gioco-scelta small { font: 500 12px var(--tit); opacity: .75; }
.gioco { max-width: 720px; border-radius: 24px; padding: 18px; background: #1c1626; box-shadow: inset 0 0 0 1px #ffffff1f; }
.gioco-testa { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: flex-start; } .gioco-testa h3 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; } .gioco-testa p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #cfc3d6; max-width: 46ch; }
.gioco-punti { display: flex; gap: 14px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #b9adc4 !important; } .gioco-punti b { display: block; font: 800 30px/1 var(--tit); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; } .gioco-punti span:first-child b { color: #ff9a4d; }
.gioco-campo { position: relative; height: 320px; margin-top: 14px; border-radius: 18px; background: #0d0a14; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; outline-offset: 3px; } .gioco-campo:focus-visible { outline: 2px solid #ff7a1a; } .gioco-campo.attivo { cursor: pointer; }
.gioco-attesa { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #8f8499; font-size: 15px; } .gioco-tocca { position: absolute; left: 0; right: 0; top: 10px; margin: 0; text-align: center; font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6f6479; pointer-events: none; }
.gioco-voce { min-height: 24px; margin: 12px 0 0; font-size: 15.5px; font-weight: 600; color: #ffd9b8; } .gioco-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .gioco-azioni .bott { margin: 0; cursor: pointer; font-family: inherit; } .gioco-azioni .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.st-torre { position: absolute; left: 8%; right: 8%; bottom: 14px; height: 0; transition: transform .25s; } .st-strato { position: absolute; height: 20px; border-radius: 5px; background: linear-gradient(#ffb04d, #ff7a1a); box-shadow: inset 0 -3px 0 #c2520a; }
.st-base { background: linear-gradient(#6b5a48, #4a3d31); box-shadow: inset 0 -3px 0 #33291f; } .st-mobile { background: linear-gradient(#fff3d6, #ffc247); box-shadow: 0 0 18px #ffc24788; } .st-perfetto { background: linear-gradient(#d6ffe9, #3ddc84); box-shadow: inset 0 -3px 0 #1f7a4d; } .st-cade { transition: transform .6s ease-in, opacity .6s; transform: translateY(260px) rotate(18deg); opacity: 0; }
.sq-cerchio { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .sq-nodo { position: absolute; width: 62px; height: 62px; margin: -31px; border-radius: 50%; border: 2px solid #ff7a1a66; background: #2a1f3d; cursor: pointer; transform: rotate(var(--a)) translateY(-108px); transition: background .12s, box-shadow .12s; padding: 0; }
.sq-nodo.acceso { background: #ff9a4d; border-color: #fff; box-shadow: 0 0 34px #ff7a1a; } .sq-nodo.sbagliato { background: #e0493a; } .sq-nodo.giusto { background: #3ddc84; } .sq-centro { position: absolute; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(#ff7a1a, #5a2c12); box-shadow: 0 0 40px #ff7a1a66; }
.ct-griglia { position: absolute; inset: 14px 14px 46px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; } .ct-blocco { border: 0; border-radius: 12px; background: #2a1f3d; color: #fff; font: 800 24px var(--tit); cursor: pointer; transition: transform .12s, background .2s; } .ct-blocco:active { transform: scale(.94); }
.ct-blocco.agganciato { background: #ff7a1a; color: #1d0f04; opacity: .55; } .ct-blocco.sbagliato { background: #e0493a; animation: sf-scuoti .3s; } @keyframes sf-scuoti { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .ct-filo { position: absolute; left: 14px; right: 14px; bottom: 10px; margin: 0; font-size: 13px; letter-spacing: -.02em; color: #ff9a4d; white-space: nowrap; overflow: hidden; }
.ag-pista { position: absolute; left: 9%; right: 9%; top: 50%; height: 10px; margin-top: -5px; border-radius: 10px; background: #2a1f3d; } .ag-magnete { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 14px; background: #3a2c22; box-shadow: inset 0 0 0 3px #ff7a1a, 0 0 30px #ff7a1a55; }
.ag-pezzo { position: absolute; top: 50%; left: 0; width: 42px; height: 42px; margin: -21px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b9b0a6 60%, #6b5a48); box-shadow: 0 4px 14px #000a; } .ag-pezzo.ag-preso { box-shadow: 0 0 0 5px #3ddc84, 0 0 30px #3ddc84; } .ag-giri { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; letter-spacing: .4em; color: #ff9a4d; }
.officina { display: grid; gap: 18px; align-items: start; } @media (min-width: 900px) { .officina { grid-template-columns: 1fr 1fr; } }
.officina fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; } .officina legend { font: 700 15px var(--tit); padding: 0; margin-bottom: 8px; } .officina .oss-filtri { margin: 0; } .officina-scelte > .bott { margin: 0; cursor: pointer; font-family: inherit; }
.officina-scheda { border-radius: 24px; padding: 22px; background: #1d140d; color: #f7efe4; min-height: 240px; } .officina-scheda .eti { color: #ffa24d; margin: 0 0 4px; } .officina-scheda h3 { margin: 0 0 6px; font-size: clamp(30px, 5vw, 42px); letter-spacing: -.03em; line-height: 1; color: #fff; } .officina-frase { margin: 0 0 14px; color: #e6d8c6; font-size: 16px; line-height: 1.45; } .officina-vuota { color: #b3a391; margin: 0; }
.officina-passi { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; counter-reset: passo; } .officina-passi li { counter-increment: passo; position: relative; padding: 10px 12px 10px 46px; border-radius: 12px; background: #ffffff0f; font-size: 14.5px; line-height: 1.4; } .officina-passi li::before { content: counter(passo); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ff7a1a; color: #1d0f04; font: 700 12.5px var(--tit); }
.officina-passi b { display: block; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffa24d; } .officina-azioni { display: flex; flex-wrap: wrap; gap: 8px; } .officina-azioni .bott { margin: 0; cursor: pointer; font-family: inherit; } .officina-azioni .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; } .officina-scheda .piccolo { color: #b3a391; margin: 10px 0 0; }
.sfida { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .sfida .idea { display: block; padding: 0; background: none; box-shadow: none; }
.idea-tocca { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 0; padding: 10px 10px 14px; border: 0; border-radius: 22px; background: var(--pan); color: var(--ink); box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; text-align: left; font-family: inherit; cursor: pointer; transition: transform .18s, box-shadow .18s; } .idea-tocca:hover:not(:disabled) { transform: translateY(-4px) scale(1.01); box-shadow: inset 0 0 0 2px var(--ar), 0 18px 40px var(--ombra); }
.idea-tocca img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; display: block; } .idea-nome { font: 700 19px/1.2 var(--tit); letter-spacing: -.01em; padding: 0 4px; } .idea-tocca .idea-barra { flex: none; width: auto; margin: 0 4px; height: 10px; } .idea-conta { padding: 0 4px; font-size: 13.5px; color: var(--muto); } .idea-conta b { font: 800 20px var(--tit); color: var(--ink); margin-right: 3px; } .idea-fatto { font-style: normal; color: #1f7a4d; font-weight: 600; }
.idea-tocca.vota { background: var(--pan); color: var(--ink); border-radius: 22px; } .idea-tocca.vota.fatto { background: var(--pan); color: var(--ink); box-shadow: inset 0 0 0 2px #1f7a4d; opacity: 1; cursor: default; } .idea-leggi { display: inline-block; margin: 8px 4px 0; font-size: 14px; font-weight: 600; color: var(--eti); text-decoration: none; }
.lab-appunti { border-radius: 20px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; } .lab-appunti summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 16px 20px; cursor: pointer; list-style: none; } .lab-appunti summary::-webkit-details-marker { display: none; } .lab-appunti summary b { font-size: 18px; } .lab-appunti summary span { color: var(--muto); font-size: 14px; } .lab-appunti summary::after { content: "▾"; margin-left: auto; color: var(--eti); } .lab-appunti[open] summary::after { content: "▴"; } .lab-appunti .pubblicazioni { padding: 0 12px 14px; }
@media (max-width: 759px) { .banco { grid-template-columns: 1fr; gap: 6px; } .banco-col { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 54px; padding: 8px; gap: 8px; }
  .banco-tappa { flex: none; width: 92px; grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 8px; padding: 2px; border-bottom: 0; text-align: left; font-size: 13.5px; } .banco-pezzo { padding: 9px 12px; font-size: 14px; overflow-wrap: normal; } }
.banco-pezzo { overflow-wrap: normal; hyphens: none; }
@media (max-width: 759px) { .banco-tappa { width: 116px; overflow-wrap: normal; } }
.s-completato { background: #1f7a4d; } .banco-pezzo.k-completato { border-bottom-color: #2fa66c; }

/* 3.5 — La piazza (forum su una pagina), pulsante Salva */
.piazza-azioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; max-width: 900px; } @media (min-width: 820px) { .piazza-azioni { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.piazza-azioni button { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 16px; min-height: 104px; border: 0; border-radius: 20px; background: var(--pan); color: var(--ink); box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; font-family: inherit; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.piazza-azioni button:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--ar), 0 16px 36px var(--ombra); } .piazza-azioni button.qui { background: #1d140d; color: #fff; } .piazza-azioni button.qui small { color: #d6c7b4; }
.piazza-azioni span { font-size: 26px; line-height: 1; } .piazza-azioni b { font-size: 17px; letter-spacing: -.01em; line-height: 1.2; } .piazza-azioni small { font-size: 13px; color: var(--muto); line-height: 1.3; }
.piazza-scrivi { max-width: 900px; margin-top: 12px; padding: 20px; border-radius: 22px; background: #1d140d; color: #f7efe4; } .piazza-invito { margin: 0 0 12px; font-size: 16px; color: #ffd9b8; }
.piazza-scrivi label { display: block; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #b3a391; margin-bottom: 12px; }
.piazza-scrivi input, .piazza-scrivi textarea, .piazza-scrivi select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; min-height: 46px; border-radius: 12px; border: 1px solid #ffffff33; background: #2a1f18; color: #fff; font: 400 16px var(--tit); letter-spacing: 0; text-transform: none; } .piazza-scrivi textarea { resize: vertical; line-height: 1.5; } .piazza-scrivi ::placeholder { color: #8f8173; }
.piazza-collegato { margin: 0 0 10px; font-size: 14px; color: #e6d8c6; } .piazza-collegato button { border: 0; background: none; color: #ffa24d; text-decoration: underline; cursor: pointer; font: inherit; padding: 4px; }
.piazza-errore { min-height: 0; margin: 0 0 8px; color: #ff9a8a; font-size: 14.5px; font-weight: 600; } .piazza-bottoni, .piazza-entra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .piazza-entra p { flex: 1 1 260px; margin: 0; line-height: 1.45; color: #e6d8c6; } .piazza-entra b { color: #fff; }
.piazza-scrivi .bott { margin: 0; cursor: pointer; font-family: inherit; } .piazza-scrivi .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.piazza-sez { padding-top: 22px; } .piazza-griglia { display: grid; gap: 26px; align-items: start; } @media (min-width: 1000px) { .piazza-griglia { grid-template-columns: minmax(0, 1fr) 320px; } }
.piazza-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; } .piazza-stanze { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; max-width: 100vw; } .piazza-stanze::-webkit-scrollbar { display: none; } .piazza-stanze button { flex: none; } @media (min-width: 760px) { .piazza-stanze { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
.piazza-ordine { display: flex; gap: 8px; align-items: center; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muto); } .piazza-ordine select { font: 600 14px var(--tit); letter-spacing: 0; text-transform: none; padding: 9px 12px; min-height: 42px; border-radius: 12px; border: 1px solid #1d140d33; background: var(--pan); color: var(--ink); }
.piazza-descrizione { margin: 4px 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--pan2); font-size: 15px; color: var(--ink2); }
.piazza-lista { display: grid; gap: 12px; margin-top: 10px; }
.disc { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 20px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; transition: box-shadow .2s; } .disc[hidden] { display: none; } .disc.aperta { box-shadow: inset 0 0 0 2px var(--ar), 0 14px 36px var(--ombra); }
.disc-voto { display: grid; justify-items: center; align-content: start; gap: 2px; } .disc-su { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--velo); color: var(--muto); font-size: 17px; cursor: pointer; transition: transform .15s, background .15s; } .disc-su:hover { background: #ff7a1a33; color: var(--ar-scuro); transform: translateY(-2px); } .disc-su.fatto { background: var(--ar); color: #1d0f04; cursor: default; transform: none; } .disc-voto b { font: 800 18px var(--tit); font-variant-numeric: tabular-nums; }
.disc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 4px; font-size: 13px; color: var(--muto); } .disc-meta span { display: inline-flex; gap: 6px; align-items: center; } .disc-meta img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .disc-stanza { font-style: normal; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--pan2); color: var(--ink2); }
.disc h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; } .disc h3 a { color: var(--ink); text-decoration: none; } .disc h3 a:hover { color: var(--ar-scuro); } .disc-estratto { margin: 0 0 8px; font-size: 15px; color: var(--muto); line-height: 1.5; }
.disc-collegato { display: block; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--pan2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.3; } .disc-collegato small { display: block; font: 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--eti); margin-bottom: 2px; } .disc-collegato:hover { box-shadow: inset 0 0 0 1.5px var(--ar); }
.disc-piede { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; } .disc-apri, .disc-salva { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--velo); color: var(--ink); font: 600 13.5px var(--tit); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .disc-apri:hover, .disc-salva:hover { background: #ff7a1a26; } .disc-salva.attivo { background: #1d140d; color: #fff; } .disc-vai { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--eti); text-decoration: none; }
.disc-dentro { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--riga); } .disc-testo { font-size: 15.5px; line-height: 1.6; } .disc-testo p { margin: 0 0 10px; } .disc-testo img { max-width: 100%; height: auto; border-radius: 12px; } .disc-carica, .disc-nessuna { color: var(--muto); font-size: 14.5px; margin: 8px 0; }
.disc-risposte { display: grid; gap: 10px; margin: 10px 0; } .risp { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; background: var(--pan2); } .risp.sandro { background: #ff7a1a1c; box-shadow: inset 0 0 0 1px #ff7a1a55; } .risp img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.risp-chi { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 0 0 2px; font-size: 14px; } .risp-chi i { font-style: normal; font: 700 11px var(--tit); padding: 2px 8px; border-radius: 999px; background: var(--ar); color: #1d0f04; } .risp-chi span { color: var(--muto); font-size: 12.5px; } .risp-testo { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; } .risp-testo p { margin: 0 0 6px; }
.disc-rispondi textarea { display: block; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid #1d140d40; background: #fffaf3; font: 16px var(--tit); line-height: 1.5; resize: vertical; } .disc-rispondi .bott { margin: 8px 0 0; cursor: pointer; font-family: inherit; } .disc-rispondi .piazza-errore { color: #c0391f; margin: 6px 0 0; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.piazza-lato { display: grid; gap: 14px; } .piazza-scheda { padding: 18px; border-radius: 20px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); } .piazza-scheda .eti { margin: 0 0 10px; }
.piazza-elenco, .piazza-articoli { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .piazza-elenco button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; width: 100%; text-align: left; padding: 10px; border: 0; border-radius: 14px; background: none; color: var(--ink); font-family: inherit; cursor: pointer; } .piazza-elenco button:hover { background: var(--velo); }
.piazza-elenco span { grid-row: span 2; font-size: 22px; } .piazza-elenco b { font-size: 15.5px; } .piazza-elenco small { font-size: 13px; color: var(--muto); line-height: 1.35; }
.piazza-articoli li { padding: 10px 0; border-bottom: 1px dashed var(--riga); } .piazza-articoli li:last-child { border-bottom: 0; } .piazza-articoli a { display: block; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; } .piazza-discuti { margin-top: 6px; padding: 6px 12px; min-height: 34px; border-radius: 999px; border: 0; background: var(--velo); color: var(--eti); font: 600 13px var(--tit); cursor: pointer; } .piazza-discuti:hover { background: #ff7a1a26; }
@media (max-width: 520px) { .disc { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 12px; gap: 10px; } .disc-su { width: 40px; height: 40px; } .disc h3 { font-size: 18px; } .disc-vai { margin-left: 0; } }
.bott.salva { cursor: pointer; font-family: inherit; } .bott.salva.attivo { background: #1d140d; color: #fff; box-shadow: none; } .salva-icona { font-size: 17px; line-height: 1; } .ba-salva.attivo .salva-icona { color: #ffc247; } @media (max-width: 480px) { .ba-salva b { display: none; } }
#sf-avviso { position: fixed; z-index: 90; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 16px; background: #1d140d; color: #f7efe4; font-size: 14.5px; line-height: 1.4; box-shadow: 0 14px 40px #1d140d66; transition: transform .3s, opacity .3s; } #sf-avviso.su { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } #sf-avviso a { color: #ffa24d; font-weight: 600; }
.idee-lettori { margin-top: 22px; }
.piazza-barra > * { min-width: 0; } .piazza-stanze { max-width: calc(100% + 36px); } @media (min-width: 760px) { .piazza-stanze { max-width: 100%; } }

/* 3.6 — piazza: targhette dei livelli, tessera, sondaggio, firma SF Mind */
.targa { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--velo); color: var(--ink2); font: 600 11.5px var(--tit); font-style: normal; white-space: nowrap; } .targa.t-sandro { background: var(--ar); color: #1d0f04; } .targa.t-mind { background: #1d140d; color: #ffa24d; }
.tessera-chi { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .tessera-chi img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .tessera-chi b { display: block; font-size: 16px; } .tessera-chi span { font-size: 13.5px; color: var(--muto); }
.tessera-barra { height: 10px; border-radius: 10px; background: var(--riga); overflow: hidden; } .tessera-barra span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #ff7a1a, #ffb04d); transition: width .8s; } .tessera-dopo { margin: 10px 0 0; font-size: 13.5px; color: var(--muto); line-height: 1.4; }
.sondaggio { margin: 12px 0 4px; padding: 18px; border-radius: 22px; background: #1d140d; color: #f7efe4; } .sondaggio .eti { color: #ffa24d; margin: 0 0 4px; } .sondaggio h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.25; color: #fff; }
.sondaggio-opzioni { display: grid; gap: 8px; } .sondaggio-opzioni button { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 14px; background: #ffffff14; color: #fff; font: 600 15.5px var(--tit); text-align: left; cursor: pointer; transition: background .2s, transform .15s; }
.sondaggio-opzioni button:hover:not(:disabled) { background: #ffffff26; transform: translateX(4px); } .sondaggio-opzioni button:disabled { cursor: default; opacity: 1; } .sondaggio-opzioni b, .sondaggio-opzioni i { position: relative; } .sondaggio-opzioni i { font-style: normal; font-variant-numeric: tabular-nums; color: #ffd9b8; }
.sondaggio-riempi { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ff7a1a66; transition: width .8s cubic-bezier(.2, .7, .2, 1); } .sondaggio-opzioni button.scelta .sondaggio-riempi { background: #ff7a1a; } .sondaggio-opzioni button.scelta { color: #1d0f04; } .sondaggio-opzioni button.scelta i { color: #1d0f04; }
.sondaggio-totale { color: #b3a391 !important; margin: 10px 0 0; } .sondaggio-nuovo { margin-top: 12px; font-size: 14px; } .sondaggio-nuovo summary { cursor: pointer; color: #ffa24d; } .sondaggio-nuovo label { display: block; margin: 10px 0; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #b3a391; }
.sondaggio-nuovo input, .sondaggio-nuovo textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: 12px; border: 1px solid #ffffff33; background: #2a1f18; color: #fff; font: 400 16px var(--tit); letter-spacing: 0; text-transform: none; } .sondaggio-nuovo .bott { margin: 0; cursor: pointer; font-family: inherit; }
.disc-firma { min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--riga); background: none; color: var(--muto); font: 600 12.5px var(--tit); cursor: pointer; } .disc-firma[aria-pressed="true"] { border-style: solid; border-color: var(--ar); color: var(--eti); }

/* 3.7 — Tessera SF: punti, livelli, anello sull'icona, icone da sbloccare, inviti */
.anello { box-shadow: 0 0 0 2px var(--bg, #f8f1e6), 0 0 0 4px #b3a391; border-radius: 50%; } .anello.liv-2 { box-shadow: 0 0 0 2px var(--bg, #f8f1e6), 0 0 0 4px #46b9ab; } .anello.liv-3 { box-shadow: 0 0 0 2px var(--bg, #f8f1e6), 0 0 0 4px #ff7a1a; } .anello.liv-4 { box-shadow: 0 0 0 2px var(--bg, #f8f1e6), 0 0 0 4px #a06be0; } .anello.liv-5 { box-shadow: 0 0 0 2px var(--bg, #f8f1e6), 0 0 0 4px #ffc247, 0 0 14px #ffc247; }
.omino.dentro { position: relative; overflow: visible; } .omino.dentro.con-foto { overflow: visible; } .omino-liv { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: #1d140d; color: #fff; font: 800 10.5px var(--tit); box-shadow: 0 0 0 2px var(--bg); }
.conto-menu a.conto-tessera { background: #1d140d; color: #fff; margin-bottom: 4px; font-size: 14px; } .conto-menu a.conto-tessera:hover { background: #2a1f18; } .conto-tessera b { color: #ffa24d; }
.targa.liv-2 { background: #46b9ab33; } .targa.liv-3 { background: #ff7a1a33; } .targa.liv-4 { background: #a06be033; } .targa.liv-5 { background: #ffc24766; }
.tessera-chi { color: inherit; text-decoration: none; } .tessera-dopo a { color: var(--eti); font-weight: 600; text-decoration: none; }
.tess-griglia { display: grid; gap: 20px; align-items: start; } @media (min-width: 920px) { .tess-griglia { grid-template-columns: minmax(0, 440px) 1fr; } }
.tess-carta { position: relative; overflow: hidden; padding: 22px; border-radius: 28px; color: #f7efe4; background: radial-gradient(ellipse at 90% 0%, #6a3414, #2a1810 55%, #120b09); box-shadow: 0 24px 60px #1d140d55; --bg: #1d140d; }
.tess-carta.liv-2 { background: radial-gradient(ellipse at 90% 0%, #1f6f66, #14312e 55%, #0c1716); } .tess-carta.liv-4 { background: radial-gradient(ellipse at 90% 0%, #5b3a8f, #24183a 55%, #100b18); } .tess-carta.liv-5 { background: radial-gradient(ellipse at 90% 0%, #9a7a1c, #3a2c10 55%, #151006); }
.tess-carta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, #ffffff14 50%, transparent 60%); background-size: 250% 100%; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .tess-carta::after { animation: sf-riflesso 6s infinite; } } @keyframes sf-riflesso { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.tess-carta-su { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .tess-marchio { font: 800 34px/1 var(--tit); letter-spacing: -.05em; color: #ff7a1a; } .tess-numero { font: 600 12px var(--mono); letter-spacing: .14em; color: #d6c7b4; }
.tess-chi { display: flex; gap: 16px; align-items: center; } .tess-chi img, .tess-vuoto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; } .tess-vuoto { display: grid; place-items: center; background: #ffffff1a; font: 800 34px var(--tit); } .tess-chi b { display: block; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; color: #fff; } .tess-chi span { font-size: 14px; color: #e6d8c6; }
.tess-punti { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; } .tess-punti b { font: 800 clamp(54px, 13vw, 76px)/1 var(--tit); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; } .tess-punti span { font: 600 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffa24d; }
.tess-carta .tessera-barra { background: #ffffff26; } .tess-dopo { margin: 10px 0 16px; font-size: 14.5px; color: #e6d8c6; } .tess-dopo b { color: #fff; }
.tess-livelli { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tess-livelli li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #ffffff0d; color: #b3a391; font-size: 14.5px; } .tess-livelli i { font-style: normal; font-size: 18px; filter: grayscale(1); opacity: .6; } .tess-livelli small { display: block; font: 11.5px var(--mono); color: #8f8173; }
.tess-livelli li.fatto { color: #e6d8c6; } .tess-livelli li.fatto i, .tess-livelli li.qui i { filter: none; opacity: 1; } .tess-livelli li.qui { background: #ff7a1a; color: #1d0f04; font-weight: 700; } .tess-livelli li.qui small { color: #4a2405; }
.tess-fonti, .tess-storia { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tess-fonti li, .tess-storia li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--pan2); }
.tess-fonti b, .tess-storia b { font: 800 18px var(--tit); color: var(--ar-scuro); font-variant-numeric: tabular-nums; } .tess-fonti span { font-size: 15px; line-height: 1.3; } .tess-fonti small, .tess-storia small { display: block; font-size: 12.5px; color: var(--muto); } .tess-fonti a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pan); color: var(--eti); text-decoration: none; font-weight: 700; } .tess-fonti li.pieno { opacity: .6; } .tess-storia { max-width: 760px; } .tess-storia span { font-size: 15px; }
.tess-icone { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .tess-icone button { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink); font-family: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tess-icone img { width: 64px; height: 64px; border-radius: 50%; } .tess-icone b { font-size: 13.5px; } .tess-icone small { font-size: 11.5px; color: var(--muto); } .tess-icone button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--ar); } .tess-icone button.scelta { box-shadow: inset 0 0 0 2.5px var(--ar); background: #ff7a1a14; } .tess-icone button.chiusa { cursor: default; opacity: .75; } .tess-icone button.chiusa img { filter: grayscale(1) brightness(.75); opacity: .55; }
.tess-invita { background: var(--pan2); } .tess-link { display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; } .tess-link input { flex: 1 1 260px; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid #1d140d33; background: var(--pan); font: 14px var(--mono); color: var(--ink); } .tess-link .bott { margin: 0; cursor: pointer; font-family: inherit; } .tess-amici { margin: 14px 0 4px; font-size: 16px; } .tess-amici b { font: 800 28px var(--tit); color: var(--ar-scuro); margin-right: 6px; }
.tess-invitato { display: block; margin: 0 0 12px; }
.profilo-icone label.chiusa { cursor: default; } .profilo-icone label.chiusa img { filter: grayscale(1) brightness(.8); opacity: .45; } .profilo-icone label.chiusa i { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; background: #1d140d; color: #fff; font: 700 10px var(--tit); font-style: normal; } .profilo-icone legend a { font-weight: 400; color: var(--eti); }
#sf-punti-avviso { position: fixed; z-index: 95; right: 16px; top: 84px; display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 999px; background: #1d140d; color: #f7efe4; text-decoration: none; box-shadow: 0 14px 40px #1d140d66; transform: translateX(140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.3, .3, 1), opacity .3s; pointer-events: none; } #sf-punti-avviso.su { transform: none; opacity: 1; pointer-events: auto; }
#sf-punti-avviso b { font: 800 20px var(--tit); color: #ff9a4d; } #sf-punti-avviso span { font-size: 13.5px; } #sf-punti-avviso.festa { background: linear-gradient(120deg, #ff7a1a, #ffb04d); color: #1d0f04; flex-direction: column; align-items: flex-start; gap: 0; border-radius: 20px; } #sf-punti-avviso.festa b { color: #1d0f04; font-size: 18px; }
.sf-coriandoli { position: fixed; inset: 0; z-index: 94; pointer-events: none; overflow: hidden; } .sf-coriandoli i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: sf-cade linear forwards; } @keyframes sf-cade { to { top: 110%; transform: rotate(720deg) translateX(40px); } }

/* 4.0 — testata con ritorno alla home e ricerca, barra delle sezioni, nuova home, biblioteca degli articoli */
.marchio { align-items: center; gap: 12px; padding: 4px 10px 4px 0; border-radius: 16px; } .sf { font-size: 46px; } .marchio-casa { display: none; line-height: 1.15; } .marchio-casa b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .marchio-casa small { display: block; font: 600 11px var(--mono); letter-spacing: .06em; color: var(--eti); }
@media (min-width: 1040px) { .marchio-casa { display: block; } } .marchio:hover .sf { filter: brightness(1.1); } .marchio.a-casa .marchio-casa small { color: var(--muto); }
.apri-cerca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--velo); color: var(--ink); font: 600 14px var(--tit); cursor: pointer; order: 2; margin-left: auto; box-shadow: inset 0 0 0 1px var(--linea); } .apri-cerca:hover { box-shadow: inset 0 0 0 1.5px var(--ar); }
@media (max-width: 860px) { .apri-cerca { order: 0; padding: 0; width: 44px; justify-content: center; background: none; box-shadow: none; } .apri-cerca span { display: none; } .testa .apri-cerca + .conto, .testa .apri-cerca + .omino { margin-left: 0 !important; } .sf { font-size: 40px; } }
@media (min-width: 861px) { .testa nav { order: 1; margin-left: auto; } .testa .apri-cerca { margin-left: 8px; } }
.cerca-tutto { position: fixed; inset: 0; z-index: 120; background: #1d140d99; backdrop-filter: blur(6px); padding: 12px; overflow-y: auto; } .cerca-tutto[hidden] { display: none; } html.cerca-aperta { overflow: hidden; }
.cerca-tutto-scatola { max-width: 720px; margin: min(9vh, 80px) auto 0; background: var(--bg); border-radius: 24px; padding: 14px; box-shadow: 0 30px 80px #000a; }
.cerca-tutto-riga { display: flex; gap: 10px; align-items: center; padding: 4px 6px 4px 14px; border-radius: 16px; background: var(--pan); box-shadow: inset 0 0 0 2px var(--ar); } .cerca-tutto-riga input { flex: 1; min-width: 0; border: 0; background: none; font: 500 18px var(--tit); color: var(--ink); padding: 14px 0; outline: none; } .cerca-tutto-riga button { border: 0; background: var(--velo); border-radius: 12px; padding: 10px 14px; min-height: 44px; font: 600 14px var(--tit); color: var(--ink); cursor: pointer; }
.cerca-tutto-idee { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 6px 4px; font-size: 13.5px; color: var(--muto); } .cerca-tutto-idee button { border: 0; border-radius: 999px; padding: 8px 12px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); font: 600 13.5px var(--tit); color: var(--ink); cursor: pointer; }
.cerca-tutto-esiti { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .cerca-tutto-esiti a { display: block; padding: 12px 14px; border-radius: 14px; background: var(--pan); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linea); } .cerca-tutto-esiti a:hover, .cerca-tutto-esiti a:focus-visible { box-shadow: inset 0 0 0 2px var(--ar); }
.cerca-tutto-esiti small { display: block; font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--eti); } .cerca-tutto-esiti b { display: block; font-size: 17px; line-height: 1.25; } .cerca-tutto-esiti span { display: block; font-size: 14px; color: var(--muto); margin-top: 2px; } .cerca-nota { padding: 10px 14px; color: var(--muto); font-size: 14.5px; } .cerca-nota a { background: none; box-shadow: none; padding: 0; color: var(--eti); font-weight: 600; }
.barra-sezioni { display: none; } @media (max-width: 860px) { .barra-sezioni { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #fffaf3f2; backdrop-filter: blur(14px); border-top: 1px solid var(--linea); }
  .barra-sezioni a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; color: var(--muto); text-decoration: none; font: 600 11.5px var(--tit); } .barra-sezioni span { font-size: 21px; line-height: 1; filter: grayscale(.6); } .barra-sezioni a[aria-current] { color: var(--ink); background: #ff7a1a1f; } .barra-sezioni a[aria-current] span { filter: none; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } .barra-azioni { bottom: calc(76px + env(safe-area-inset-bottom)); } #sf-avviso { bottom: calc(150px + env(safe-area-inset-bottom)); } .piede { margin-bottom: 0; } }
.casa-eroe { position: relative; overflow: hidden; padding: 46px 0 30px; } .casa-eroe .w { position: relative; } .casa-eroe h1 { margin: 6px 0 10px; font-size: clamp(40px, 7.4vw, 86px); line-height: .98; letter-spacing: -.04em; color: var(--ink); } .casa-eroe h1 em { font-style: normal; color: var(--ar); } .casa-eroe .intro { max-width: 40em; }
.casa-cerca { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 720px; margin: 22px 0 0; padding: 0 18px; min-height: 62px; border: 0; border-radius: 20px; background: var(--pan); color: var(--muto); font: 500 18px var(--tit); text-align: left; cursor: text; box-shadow: inset 0 0 0 2px #1d140d22, 0 12px 34px #1d140d14; transition: box-shadow .2s, transform .2s; } .casa-cerca:hover { box-shadow: inset 0 0 0 2px var(--ar), 0 16px 40px #1d140d22; transform: translateY(-2px); } .casa-cerca span:nth-child(2) { flex: 1; } .casa-cerca kbd { font: 600 13px var(--mono); padding: 4px 9px; border-radius: 8px; background: var(--velo); color: var(--muto); }
.casa-porte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; } @media (min-width: 760px) { .casa-porte { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .casa-porte { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.casa-porta { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; min-height: 150px; border-radius: 22px; background: var(--pan); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linea), 0 6px 22px #1d140d0f; overflow: hidden; transition: transform .22s, box-shadow .22s, background .22s, color .22s; }
.casa-porta-icona { font-size: 30px; line-height: 1; transition: transform .25s; } .casa-porta b { font-size: 21px; letter-spacing: -.02em; margin-top: 6px; } .casa-porta small { font-size: 13.5px; line-height: 1.35; color: var(--muto); } .casa-porta i { position: absolute; right: 14px; top: 14px; font-style: normal; color: var(--eti); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.casa-porta:hover { transform: translateY(-6px); background: #1d140d; color: #fff; box-shadow: 0 20px 44px #1d140d44; } .casa-porta:hover small { color: #d6c7b4; } .casa-porta:hover i { opacity: 1; transform: none; color: #ffa24d; } .casa-porta:hover .casa-porta-icona { transform: scale(1.2) rotate(-6deg); }
.casa-adesso { padding-top: 24px; } .adesso { border-radius: 28px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea), 0 18px 50px #1d140d14; overflow: hidden; }
.adesso-linguette { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: none; } .adesso-linguette::-webkit-scrollbar { display: none; } .adesso-linguette button { flex: none; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--velo); color: var(--ink); font: 600 14.5px var(--tit); cursor: pointer; } .adesso-linguette button[aria-selected="true"] { background: #1d140d; color: #fff; }
.adesso-barra { height: 3px; background: var(--riga); } .adesso-barra span { display: block; height: 100%; width: 0; background: var(--ar); }
.adesso-pannello { display: grid; } .adesso-pannello[hidden] { display: none; } @media (min-width: 860px) { .adesso-pannello:not(.senza-foto) { grid-template-columns: 1.1fr 1fr; min-height: 380px; } }
.adesso-foto { position: relative; display: block; min-height: 220px; background: radial-gradient(ellipse at 70% 10%, #5a2c12, #23130c 60%, #120b09); overflow: hidden; } .adesso-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } .adesso-pannello:hover .adesso-foto img { transform: scale(1.04); }
.adesso-testo { display: flex; flex-direction: column; gap: 8px; padding: 22px; min-width: 0; } @media (min-width: 860px) { .adesso-testo { padding: 32px; justify-content: center; } } .adesso-testo .eti { margin: 0; } .adesso-testo h3 { margin: 0; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -.025em; } .adesso-testo > p:not(.eti) { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muto); }
.adesso-testo .tappe li { color: var(--muto); } .adesso-testo .tappe li::before { background: var(--riga); } .adesso-testo .tappe li i { background: var(--riga); box-shadow: 0 0 0 3px var(--pan); } .adesso-testo .tappe li.fatta::before, .adesso-testo .tappe li.qui::before { background: var(--ar); } .adesso-testo .tappe li.fatta i { background: var(--ar); } .adesso-testo .tappe li.qui i { background: #1d140d; box-shadow: 0 0 0 3px var(--ar); } .adesso-testo .tappe li.qui { color: var(--ink); font-weight: 700; }
.adesso-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .adesso-azioni .bott { margin: 0; cursor: pointer; font-family: inherit; }
.adesso-elenco { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; } .adesso-elenco a { display: block; padding: 10px 14px; border-radius: 14px; background: var(--pan2); color: var(--ink); text-decoration: none; } .adesso-elenco a:hover { box-shadow: inset 0 0 0 1.5px var(--ar); } .adesso-elenco b { display: block; font-size: 15.5px; line-height: 1.3; } .adesso-elenco small { font-size: 12.5px; color: var(--muto); }
.adesso-pannello.scuro { background: radial-gradient(ellipse at 80% 0%, #3a2440, #17111c 60%, #0a0710); color: #f7efe4; } .adesso-pannello.scuro h3 { color: #fff; } .adesso-pannello.scuro .eti { color: #ffa24d; } .adesso-pannello.scuro .adesso-testo > p:not(.eti) { color: #dccfe0; } .adesso-pannello.scuro .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.adesso-fasi { display: flex; gap: 8px; font-size: 26px; margin: 6px 0; } .adesso-fasi span { opacity: .3; transition: transform .3s; } .adesso-fasi span.qui { opacity: 1; transform: scale(1.5); }
.voglia-scelte { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 14px; padding: 2px 18px 6px; scrollbar-width: none; } .voglia-scelte::-webkit-scrollbar { display: none; } .voglia-scelte button { flex: none; min-height: 48px; font-size: 15px; } @media (min-width: 760px) { .voglia-scelte { flex-wrap: wrap; margin: 0 0 16px; padding: 0; overflow: visible; } }
.voglia-carta { border-radius: 26px; background: #1d140d; color: #f7efe4; overflow: hidden; min-height: 120px; } .voglia-vuota { margin: 0; padding: 40px 22px; text-align: center; color: #b3a391; }
.voglia-dentro { display: grid; } @media (min-width: 760px) { .voglia-dentro:not(.senza-foto) { grid-template-columns: 300px 1fr; } } .voglia-dentro > div { padding: 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .voglia-dentro .eti { color: #ffa24d; margin: 0; } .voglia-dentro h3 { margin: 0; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.025em; line-height: 1.12; color: #fff; } .voglia-dentro p { margin: 0; color: #e6d8c6; font-size: 15.5px; }
.voglia-foto { position: relative; display: block; min-height: 180px; } .voglia-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .voglia-dentro .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; } @media (prefers-reduced-motion: no-preference) { .voglia-dentro { animation: sf-sale .35s both; } }
.casa-riga-titolo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; } .casa-riga-titolo h2 { margin-bottom: 0; } .casa-riga-titolo .bott { margin: 0; }
@media (max-width: 699px) { .casa-articoli, .casa-progetti { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; } .casa-articoli::-webkit-scrollbar, .casa-progetti::-webkit-scrollbar { display: none; } .casa-articoli > *, .casa-progetti > * { scroll-snap-align: center; } }
.bib-cerca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 820px; margin-top: 18px; padding: 6px 6px 6px 16px; border-radius: 20px; background: var(--pan); box-shadow: inset 0 0 0 2px #1d140d22, 0 10px 30px #1d140d12; } .bib-cerca:focus-within { box-shadow: inset 0 0 0 2px var(--ar), 0 10px 30px #1d140d1f; } .bib-cerca input { flex: 1 1 200px; min-width: 0; border: 0; background: none; outline: none; font: 500 18px var(--tit); color: var(--ink); padding: 12px 0; } .bib-cerca .bott { margin: 0; cursor: pointer; font-family: inherit; }
.bib-modi { display: grid; gap: 4px; margin-top: 14px; } .bib-modi .oss-filtri { margin: 0; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 6px; } .bib-modi .oss-filtri::-webkit-scrollbar { display: none; } .bib-modi button { flex: none; } @media (min-width: 760px) { .bib-modi .oss-filtri { flex-wrap: wrap; margin: 0; padding: 0 0 6px; overflow: visible; } } .bib-etichetta { flex: none; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muto); margin-right: 4px; }
.bib-letti { max-width: 820px; margin-top: 8px; } .bib-letti p { margin: 6px 0 0; font-size: 14px; color: var(--muto); }
.bib-extra-griglia { display: grid; gap: 18px; align-items: start; } @media (min-width: 900px) { .bib-extra-griglia { grid-template-columns: 1.2fr 1fr; } } .percorsi { display: grid; gap: 8px; }
.percorso { border-radius: 18px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; } .percorso summary { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 14px 18px; cursor: pointer; list-style: none; } .percorso summary::-webkit-details-marker { display: none; } .percorso summary b { font-size: 18px; } .percorso summary span { font-size: 13.5px; color: var(--muto); } .percorso summary::after { content: "＋"; margin-left: auto; color: var(--eti); font-weight: 700; } .percorso[open] summary::after { content: "−"; } .percorso[open] { box-shadow: inset 0 0 0 2px var(--ar); }
.percorso ol { margin: 0; padding: 0 14px 8px; list-style: none; counter-reset: tappa; display: grid; gap: 6px; } .percorso li { counter-increment: tappa; } .percorso li a { position: relative; display: block; padding: 10px 12px 10px 46px; border-radius: 12px; background: var(--pan2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; } .percorso li a::before { content: counter(tappa); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ar); color: #1d0f04; font: 700 12.5px var(--tit); } .percorso li small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muto); }
.percorso-tutti { margin: 4px 14px 14px; padding: 8px 12px; min-height: 40px; border: 0; border-radius: 999px; background: var(--velo); color: var(--eti); font: 600 13.5px var(--tit); cursor: pointer; }
.sapevi { padding: 20px; border-radius: 22px; background: #1d140d; color: #f7efe4; } .sapevi .eti { color: #ffa24d; margin: 0 0 8px; } .sapevi blockquote { margin: 0 0 10px; font-size: 18px; line-height: 1.45; color: #fff; } .sapevi-da { margin: 0 0 12px; font-size: 13.5px; color: #b3a391; } .sapevi-da a { color: #ffb873; } .sapevi .bott { margin: 0; cursor: pointer; font-family: inherit; background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.art[data-fuori] { display: none !important; } .art.letto .foto::after { content: "✓ letto"; position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: #1d140dd9; color: #fff; font: 600 11.5px var(--tit); } .art .foto { position: relative; }
#lista.compatta { grid-template-columns: 1fr !important; gap: 8px; } #lista.compatta .art { display: grid; grid-template-columns: 110px 1fr; align-items: center; } #lista.compatta .art .foto { aspect-ratio: 16 / 10; height: 100%; } #lista.compatta .art .estr, #lista.compatta .art .piede-scheda { display: none; } #lista.compatta .art .corpo { padding: 10px 14px; gap: 4px; } #lista.compatta .art b { font-size: 16px; }

/* 4.1 — solo il logo, più grande */
.sf { font-size: 56px; } @media (max-width: 860px) { .sf { font-size: 46px; } } .marchio { padding: 2px 8px 2px 0; }

/* 4.2 — accanto al logo, fuori dalla home, il richiamo per tornarci */
.marchio-torna { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--eti); white-space: nowrap; transition: transform .2s; } .marchio:hover .marchio-torna { transform: translateX(-3px); } @media (max-width: 420px) { .marchio-torna { display: none; } }

/* 4.5 — "Adesso sul sito": la copertina si vede tutta; targhetta MAX del fondatore */
.adesso-pannello:not(.senza-foto) .adesso-foto { aspect-ratio: 16 / 9; min-height: 0; }
@media (min-width: 860px) { .adesso-pannello:not(.senza-foto) { grid-template-columns: 1.5fr 1fr; min-height: 0; align-items: center; } }
.omino-liv.max { right: -12px; padding: 0 5px; background: linear-gradient(135deg, #ff7a1a, #e0480c); font-size: 9px; letter-spacing: .04em; }

/* 4.6 — Freddure: bolla in home, pagina, manopola che vota al contrario */
.bolla-ridere { position: fixed; right: 14px; bottom: 92px; z-index: 60; transition: opacity .3s, transform .3s; animation: bolla-entra .6s .8s both; }
@media (min-width: 900px) { .bolla-ridere { right: 26px; bottom: 26px; } }
.bolla-ridere.ciao { opacity: 0; transform: scale(.6); }
.bolla-ridere a { width: 108px; height: 108px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; text-decoration: none; color: #fff; background: radial-gradient(circle at 30% 25%, #3a2a1e, #1d140d 70%); box-shadow: 0 10px 28px #1d140d59, inset 0 0 0 3px var(--ar); animation: bolla-dondola 5s 2s infinite; }
.bolla-faccia { font-size: 30px; line-height: 1; height: 32px; display: grid; } .bolla-faccia i { grid-area: 1 / 1; font-style: normal; transition: opacity .2s, transform .25s; } .bolla-faccia i + i { opacity: 0; transform: scale(.4) rotate(-30deg); }
.bolla-ridere a:hover .bolla-faccia i, .bolla-ridere a:active .bolla-faccia i, .bolla-ridere a:focus-visible .bolla-faccia i { opacity: 0; transform: scale(.4) rotate(30deg); } .bolla-ridere a:hover .bolla-faccia i + i, .bolla-ridere a:active .bolla-faccia i + i, .bolla-ridere a:focus-visible .bolla-faccia i + i { opacity: 1; transform: none; }
.bolla-testo { font: 600 10.5px/1.2 var(--tit); max-width: 84px; } .bolla-testo b { display: block; color: #ffa24d; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.bolla-via { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--pan); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px #1d140d40; }
@keyframes bolla-entra { from { opacity: 0; transform: translateY(30px) scale(.5); } }
@keyframes bolla-dondola { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-9deg) scale(1.05); } 93% { transform: rotate(8deg) scale(1.05); } 97% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .bolla-ridere, .bolla-ridere a { animation: none; } }

.fr-capo h1 em { font-style: normal; color: var(--ar2); }
.fr-sez { padding-top: 6px; } .fr-nota { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #fff4e0; color: #6b4a12; font-size: 14px; }
.fr-carta { background: linear-gradient(160deg, #eef7fb, #ffffff 55%); border: 1px solid #bfdcea; border-radius: 24px; padding: 24px 22px; box-shadow: 0 14px 34px #1d140d14; display: flex; flex-direction: column; gap: 14px; }
.fr-carta.entra { animation: fr-entra .45s both; } @keyframes fr-entra { from { opacity: 0; transform: translateY(14px) rotate(-1deg); } }
.fr-conta { margin: 0; display: flex; justify-content: space-between; align-items: center; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3d7c99; } .fr-termo { padding: 4px 10px; border-radius: 999px; background: #dff0f8; color: #1f5f7c; }
.fr-carta h2 { margin: 0; font-size: clamp(24px, 4.6vw, 36px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.fr-completa { display: flex; flex-direction: column; gap: 6px; } .fr-completa label { font-size: 14px; font-weight: 600; color: var(--muto); }
.fr-completa input, .fr-modulo input { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--riga); background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.fr-scongela { align-self: flex-start; margin: 0; }
.fr-finale { display: flex; flex-direction: column; gap: 8px; animation: fr-entra .4s both; } .fr-finale p { margin: 0; }
.fr-vero { font-size: clamp(19px, 3.4vw, 24px); line-height: 1.35; font-weight: 700; color: #1f5f7c; } .fr-tuo-finale { font-size: 15px; color: var(--muto); font-style: italic; } .fr-autore { font-size: 13px; color: var(--muto); }
.fr-voto { margin-top: 18px; padding: 22px; border-radius: 24px; background: radial-gradient(ellipse at 80% 0%, #33261c, #1d140d 65%); color: #f7efe4; display: flex; flex-direction: column; gap: 14px; animation: fr-entra .4s both; } .fr-voto .eti { margin: 0; color: #ffa24d; }
.fr-manopola-zona { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.fr-manopola { position: relative; width: 210px; height: 210px; flex: none; border-radius: 50%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline-offset: 4px; } .fr-manopola:active { cursor: grabbing; } .fr-manopola.bloccata { opacity: .55; pointer-events: none; }
.fr-tacche span { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; display: grid; place-items: center; font: 700 13px var(--mono); color: #b3a391; transform: rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a))); transition: color .15s, transform .15s; } .fr-tacche span.su { color: #ffa24d; transform: rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a))) scale(1.4); }
.fr-pomello { position: absolute; inset: 34px; border-radius: 50%; background: conic-gradient(from 0deg, #4a3a2e, #2a1f17, #57463a, #2a1f17, #4a3a2e); box-shadow: 0 10px 24px #000a, inset 0 2px 3px #ffffff33, inset 0 -6px 12px #0008; transition: transform .12s; } .fr-pomello i { position: absolute; left: 50%; top: 10px; width: 6px; height: 30px; margin-left: -3px; border-radius: 3px; background: var(--ar); box-shadow: 0 0 10px #ff7a1a; }
.fr-schermo { min-width: 130px; padding: 14px 18px; border-radius: 16px; background: #0c0806; box-shadow: inset 0 0 0 1px #3a2c22; display: grid; justify-items: center; gap: 2px; font-family: var(--mono); } .fr-schermo-eti, .fr-schermo-su { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #8d7c6a; } .fr-schermo b { font-size: 54px; line-height: 1; color: #6dff9a; text-shadow: 0 0 14px #6dff9a80; } .fr-faccia { font-size: 30px; margin-top: 4px; }
.fr-commento { margin: 0; min-height: 2.8em; text-align: center; font-size: 15.5px; color: #e6d8c6; }
.fr-azioni { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .fr-azioni .bott { margin: 0; } .fr-azioni .bott:disabled { opacity: .5; cursor: default; } .fr-voto .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.fr-media { margin: 0; text-align: center; font-size: 14px; color: #b3a391; } .fr-media b { color: #fff; }
.fr-salta { margin: 14px 0 0; }
.fr-modulo { display: flex; flex-direction: column; gap: 14px; } .fr-modulo label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink2); } .fr-modulo .bott { align-self: flex-start; margin: 0; } .fr-trappola { position: absolute !important; left: -9999px; } .fr-esito { margin: 0; min-height: 1.4em; font-size: 15px; color: var(--eti); }
.fr-palco [hidden], .fr-carta [hidden] { display: none !important; }
.fr-carta h2, .fr-vero { white-space: pre-line; }

/* 4.13 — titolo principale di pagina con l'aspetto dei titoli di sezione */
h1.t2 { font-size: clamp(28px, 4.2vw, 48px); }

/* 4.15 — mini giochi del cielo (osservatorio e home), tessera da scaricare, finale indovinato */
.cielo-giochi .gc { max-width: 760px; margin: 0 auto; }
.gc-scelte { justify-content: center; } .gc-scelte button { border-color: var(--riga); }
.gc-campo { border-radius: 26px; padding: 18px; background: radial-gradient(ellipse at 80% 0%, #33244a, #15101f 60%, #08060d); color: #f7efe4; box-shadow: 0 18px 44px #1d140d33; }
.gc-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 13px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #b9aacb; margin-bottom: 12px; } .gc-testa b { color: #fff; font-size: 18px; margin-left: 4px; } .gc-tempo { color: #ffa24d; font-weight: 800; font-size: 15px; }
.gc-area { position: relative; min-height: 300px; border-radius: 18px; overflow: hidden; background: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 14%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 84% 62%, #ffffffcc 50%, transparent 51%), radial-gradient(1px 1px at 34% 76%, #ffffffaa 50%, transparent 51%), radial-gradient(1.5px 1.5px at 52% 42%, #ffffff99 50%, transparent 51%), radial-gradient(1px 1px at 22% 54%, #ffffff88 50%, transparent 51%), #0b0813; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.gc.attivo .gc-area { box-shadow: inset 0 0 0 2px #ff7a1a66; }
.gc-voce { margin: 12px 0 0; min-height: 2.6em; text-align: center; font-size: 15.5px; color: #e6dcef; } .gc-azioni { display: flex; justify-content: center; } .gc-azioni .bott { margin: 6px 0 0; } .gc-nota { margin: 10px 0 0; text-align: center; font-size: 13px; color: #a898bb; } .gc-nota a { color: #ffa24d; }
.gc-meteora { position: absolute; width: 64px; height: 64px; margin: -32px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gc-meteora::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px #ffe9b0, 0 0 26px 10px #ff9a3c88; }
.gc-meteora::after { content: ""; position: absolute; right: 50%; top: 50%; width: 70px; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, transparent, #ffd9a0); transform-origin: 100% 50%; transform: rotate(var(--ang)); }
.gc-meteora.presa::before { animation: gc-scoppio .26s forwards; } .gc-meteora.presa::after { opacity: 0; } @keyframes gc-scoppio { to { transform: scale(4); opacity: 0; } }
.gc-area.gc-pianeti { padding: 14px; } .gc-fila { min-height: 34px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .gc-fila span { padding: 5px 10px; border-radius: 999px; background: #ff7a1a; color: #1d0f04; font: 700 12.5px var(--tit); }
.gc-area div.gc-pianeti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } @media (max-width: 480px) { .gc-area div.gc-pianeti { grid-template-columns: repeat(2, 1fr); } }
.gc-pianeta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 10px 6px; border-radius: 16px; border: 1px solid #ffffff22; background: #ffffff0d; color: #fff; font: 600 14px var(--tit); cursor: pointer; } .gc-pianeta i { display: block; border-radius: 50%; position: relative; } .gc-pianeta i.anelli::after { content: ""; position: absolute; left: -32%; right: -32%; top: 42%; height: 16%; border-radius: 50%; border: 2px solid #e9dcae; transform: rotate(-18deg); }
.gc-pianeta.giusto { opacity: .35; border-color: #6dff9a66; } .gc-pianeta.sbagliato, .gc-risposte button.sbagliato { animation: gc-no .35s; border-color: #ff6b6b; } @keyframes gc-no { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.gc-area.gc-fasi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; } .gc-luna svg { display: block; filter: drop-shadow(0 0 22px #f4ecd833); }
.gc-risposte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 460px; } .gc-risposte button { min-height: 50px; padding: 8px 10px; border-radius: 14px; border: 1px solid #ffffff2e; background: #ffffff0f; color: #fff; font: 600 14.5px var(--tit); cursor: pointer; } .gc-risposte button.giusto { background: #1f7a45; border-color: #6dff9a; }
.casa-gioca-altri { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; } .casa-gioca-altri .bott { margin: 0; }
.tess-dal { margin: 14px 0 0; font-size: 13.5px; color: #ffffffb3; } .tess-scarica { margin: 14px 0 0; width: 100%; justify-content: center; position: relative; z-index: 1; } .tess-scarica:disabled { opacity: .7; }
.tess-carta .tess-marchio { font-size: 44px; }
.fr-tuo-finale.presa { color: #1f7a45; font-style: normal; font-weight: 700; }
.gc [hidden] { display: none !important; }

/* 4.16 — il sito come app installabile */
.app-invito { position: fixed; left: 12px; right: 12px; top: 84px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: #1d140d; color: #f7efe4; box-shadow: 0 16px 40px #1d140d66; animation: bolla-entra .5s both; }
@media (min-width: 900px) { .app-invito { top: auto; left: auto; right: 150px; bottom: 26px; max-width: 460px; } }
.app-invito[hidden], .app-guida[hidden], .app-link[hidden] { display: none !important; }
.app-icona { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 75% 10%, #5a2c12, #2a1810); color: #ff7a1a; font: 800 24px/1 var(--tit); letter-spacing: -.06em; box-shadow: inset 0 0 0 1px #ffffff22; }
.app-invito > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .app-invito b { font-size: 15px; } .app-invito span { font-size: 13px; color: #cdbfae; line-height: 1.35; }
.app-invito .bott { margin: 0; flex: none; padding: 10px 16px; min-height: 42px; } .app-via { position: absolute; top: -8px; right: -6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--pan); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px #1d140d40; }
.app-guida { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; background: #1d140dbb; padding: 14px; }
.app-guida > div { width: 100%; max-width: 460px; padding: 22px; border-radius: 24px; background: var(--pan); color: var(--ink); } .app-guida h2 { font-size: 22px; margin: 0 0 12px; } .app-guida ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.4; } .app-guida .bott { margin: 6px 0 0; width: 100%; justify-content: center; }
@media (display-mode: standalone) { .app-link { display: none !important; } }
.app-invito .app-icona { font-size: 24px; color: #ff7a1a; }
.app-invito .app-icona { background: #f7f0e4; color: #ee7d2b; box-shadow: none; }

/* 4.19 — tre versioni: telefono (fino a 860px), tablet (861–1180px o schermi grandi a tocco), computer (da 1181px con mouse) */
.barra-sezioni { z-index: 80; }
.scia-pc, .tasti-pc[hidden] { display: none; }
/* TABLET: si usa come il telefono (menu a scomparsa e sezioni fisse in basso), ma con più spazio */
@media (min-width: 861px) and (max-width: 1180px), (min-width: 861px) and (max-width: 1400px) and (pointer: coarse) {
  .panino { display: block; order: 9; }
  .testa nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg); padding: 12px 28px 22px; border-bottom: 1px solid var(--riga); display: none; margin-left: 0; order: 0; }
  .testa nav.aperto { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; } .testa nav a { font-size: 19px; padding: 14px 10px; }
  .panino.aperto i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .panino.aperto i:nth-child(2) { opacity: 0; } .panino.aperto i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .testa .apri-cerca { margin-left: auto; }
  .barra-sezioni { position: fixed; left: 50%; right: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(620px, calc(100% - 180px)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border-radius: 26px; background: #fffaf3f2; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--linea); box-shadow: 0 14px 36px #1d140d2e; }
  .barra-sezioni a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 6px; border-radius: 18px; color: var(--muto); text-decoration: none; font: 600 14.5px var(--tit); } .barra-sezioni span { font-size: 21px; line-height: 1; filter: grayscale(.6); } .barra-sezioni a[aria-current] { color: var(--ink); background: #ff7a1a1f; } .barra-sezioni a[aria-current] span { filter: none; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .piede { margin-bottom: 0; }
  .bolla-ridere { bottom: calc(18px + env(safe-area-inset-bottom)); right: 18px; } .bolla-ridere a { width: 92px; height: 92px; } .bolla-testo { font-size: 9.5px; max-width: 76px; } .bolla-testo b { font-size: 10.5px; }
  .app-invito { top: 84px; bottom: auto; left: auto; right: 18px; max-width: 460px; }
  .bott, .oss-filtri button { min-height: 48px; }
}
/* COMPUTER: striscia di strumenti rapidi a destra e scorciatoie da tastiera */
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .scia-pc { position: fixed; z-index: 55; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 20px; background: #fffaf3e6; backdrop-filter: blur(12px); border: 1px solid var(--linea); box-shadow: 0 10px 30px #1d140d1f; }
  .scia-pc a, .scia-pc button { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; background: none; color: var(--ink); font-size: 19px; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
  .scia-pc a:hover, .scia-pc button:hover, .scia-pc a:focus-visible, .scia-pc button:focus-visible { background: #ff7a1a26; transform: scale(1.06); }
  .scia-pc i { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px); padding: 6px 10px; border-radius: 10px; background: var(--scuro); color: #fff; font: 600 12.5px var(--tit); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
  .scia-pc a:hover i, .scia-pc button:hover i, .scia-pc a:focus-visible i, .scia-pc button:focus-visible i { opacity: 1; transform: translateY(-50%); }
  .tasti-pc { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; background: #1d140db3; } .tasti-pc > div { width: min(460px, calc(100% - 40px)); padding: 26px; border-radius: 24px; background: var(--pan); color: var(--ink); box-shadow: 0 30px 80px #000a; } .tasti-pc h2 { font-size: 24px; margin: 0 0 16px; }
  .tasti-pc dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0 0 18px; align-items: center; } .tasti-pc dt, .tasti-pc dd { margin: 0; } .tasti-pc dd { font-size: 15.5px; } .tasti-pc kbd { display: inline-grid; place-items: center; min-width: 34px; height: 32px; padding: 0 8px; border-radius: 9px; background: var(--pan2); border: 1px solid var(--riga); border-bottom-width: 3px; font: 700 14px var(--mono); } .tasti-pc .bott { margin: 0; }
}
@media print { .scia-pc, .barra-sezioni, .bolla-ridere, .app-invito { display: none !important; } }

/* 4.20 — freddure da approvare, visibili solo a Sandro */
.fr-regia { background: #fff4e0; } .fr-nota a { color: inherit; }
.fr-attesa { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fr-attesa li { padding: 16px 18px; border-radius: 18px; background: var(--pan); border: 1px solid var(--riga); display: grid; gap: 6px; } .fr-attesa p { margin: 0; }
.fr-attesa-chi { font-size: 13px; color: var(--muto); } .fr-attesa-prima { font-size: 18px; font-weight: 700; color: var(--ink); white-space: pre-line; } .fr-attesa-finale { font-size: 16px; color: #1f5f7c; font-weight: 600; white-space: pre-line; }
.fr-attesa-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .fr-attesa-azioni .bott { margin: 0; padding: 10px 16px; min-height: 44px; } .fr-attesa-azioni .fr-no { color: #a3261c; } .fr-attesa-azioni .bott:disabled { opacity: .5; }
.fr-attesa-esito { font-size: 14px; font-weight: 600; color: var(--eti); min-height: 0; } .fr-attesa li.pubblicata { border-color: #1f7a45; background: #eefaf2; } .fr-attesa li.rifiutata { opacity: .55; }

/* 4.21 */
.fr-attesa-chi b { font-size: 16px; color: var(--ink); padding: 3px 10px; border-radius: 999px; background: #ff7a1a26; } .fr-attesa-chi small { margin-left: 6px; }
.fr-piccolo { font-weight: 400; font-size: 12.5px; color: var(--muto); }

/* 4.24 — il logo sulla tessera come l'icona del sito */
.tess-carta .tess-marchio { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #f7f0e4; color: #ee7d2b; font-size: 34px; }

/* 4.25 — caccia al tesoro e stanza segreta */
.chiave-punto { font: inherit; color: inherit; background: none; border: 0; padding: 0 .08em; margin: 0; cursor: default; display: inline-block; transition: transform .3s cubic-bezier(.3,1.6,.5,1), color .3s; -webkit-tap-highlight-color: transparent; }
.chiave-punto.viva { cursor: pointer; animation: chiave-battito 7s 4s infinite; } .chiave-punto.viva:hover { color: var(--ar); } @keyframes chiave-battito { 0%, 92%, 100% { color: inherit; } 95% { color: var(--ar); text-shadow: 0 0 18px #ff7a1a; } }
.chiavi-conto { position: fixed; z-index: 62; left: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #1d140d; color: #fff; text-decoration: none; font: 700 14px var(--tit); box-shadow: 0 8px 22px #1d140d55; } .chiavi-conto[hidden] { display: none; } .chiavi-conto i { font-style: normal; font-weight: 500; color: #cdbfae; font-size: 12.5px; } .chiavi-conto.tutte { background: linear-gradient(135deg, #b8860b, #6b4a08); animation: bolla-dondola 5s infinite; }
@media (min-width: 861px) { .chiavi-conto { left: 20px; bottom: 22px; } } @media (min-width: 861px) and (max-width: 1180px) { .chiavi-conto { bottom: 110px; } }
.chiave-trovata { position: fixed; z-index: 220; left: 50%; top: 22%; transform: translateX(-50%); width: min(360px, calc(100% - 32px)); padding: 22px 20px 20px; border-radius: 24px; text-align: center; color: #fff; background: radial-gradient(ellipse at 50% 0%, #6b4a08, #1d140d 70%); box-shadow: 0 30px 80px #000a, inset 0 0 0 1px #ffd97a55; animation: chiave-arriva .6s cubic-bezier(.3,1.5,.5,1) both; }
.chiave-trovata > span { display: block; font-size: 56px; line-height: 1; animation: chiave-gira 1.2s .2s both; } .chiave-trovata b { display: block; margin: 10px 0 4px; font-size: 20px; color: #ffd97a; } .chiave-trovata p { margin: 0 0 14px; font-size: 15px; color: #f0e4cf; } .chiave-trovata .bott { margin: 0; } .chiave-trovata button { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; background: none; color: #fff; font-size: 22px; cursor: pointer; }
@keyframes chiave-arriva { from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.7); } } @keyframes chiave-gira { from { transform: rotate(-180deg) scale(.3); } }
.chiave-fine { display: flex; align-items: center; gap: 8px; margin: 26px auto 0; padding: 10px 16px; border-radius: 999px; border: 1px dashed var(--riga); background: none; color: var(--muto); font: 600 14px var(--tit); cursor: pointer; animation: chiave-arriva2 .6s both; } .chiave-fine:hover { color: var(--ink); border-color: var(--ar); } @keyframes chiave-arriva2 { from { opacity: 0; transform: translateY(10px); } }
.piede .buco { display: inline-block; width: 9px; height: 13px; margin: 0 4px; border-radius: 50% 50% 2px 2px / 60% 60% 2px 2px; background: currentColor; opacity: .22; vertical-align: -1px; } .piede .buco:hover { opacity: .8; }
.stanza { min-height: 80vh; padding: 46px 0 70px; background: radial-gradient(ellipse at 50% 0%, #2c2118, #120c08 70%); color: #f7efe4; --ink: #f7efe4; --muto: #cdbfae; --riga: #ffffff2b; --pan: #1f1610; --pan2: #2a1e15; }
.stanza h1, .stanza h2 { color: #fff; } .stanza .eti { color: #ffa24d; } .stanza .intro { color: #dccdb8; }
.porta { margin: 26px auto 18px; width: min(240px, 62vw); aspect-ratio: 3 / 4.4; perspective: 900px; background: #050302; border-radius: 120px 120px 10px 10px; box-shadow: 0 0 0 10px #3a2a1e, 0 0 60px #ffb04d22, inset 0 0 50px #ffcf7a66; }
.porta-anta { position: relative; width: 100%; height: 100%; border-radius: 112px 112px 6px 6px; background: linear-gradient(100deg, #4a2f1b, #6a4426 45%, #3d2616); box-shadow: inset 0 0 0 6px #2a1a0e, inset 0 0 0 9px #7a5330; transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.6,0,.3,1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.porta.aperta .porta-anta { transform: rotateY(-78deg); } .porta.scossa { animation: gc-no .4s; }
.porta-sf { font: 800 44px/1 var(--tit); letter-spacing: -.06em; color: #ee7d2b; text-shadow: 0 2px 0 #00000055; }
.porta-serrature { display: flex; gap: 8px; } .porta-serrature i { width: 16px; height: 22px; border-radius: 50% 50% 3px 3px / 55% 55% 3px 3px; background: #1a0f08; box-shadow: inset 0 0 0 2px #7a5330; transition: background .4s, box-shadow .4s; } .porta-serrature i.piena { background: #ffd97a; box-shadow: 0 0 12px #ffd97a, inset 0 0 0 2px #b8860b; }
.stanza-conto { text-align: center; font-size: 16px; color: #f0e4cf; margin: 0 0 18px; }
.stanza-indizi { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .stanza-indizi li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #ffffff0d; border: 1px solid #ffffff1f; } .stanza-indizi b { color: #fff; font-size: 15.5px; } .stanza-indizi p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: #cdbfae; } .indizio-stato { font-size: 22px; line-height: 1.2; } .stanza-indizi li.trovata { border-color: #ffd97a66; background: #ffd97a14; } .stanza-indizi li.trovata p { color: #ffd97a; }
.stanza-azioni { display: flex; justify-content: center; } .stanza-azioni .bott { margin: 0; } .stanza-azioni .bott:disabled { opacity: .4; cursor: not-allowed; }
.stanza-parola { margin: 22px auto 0; max-width: 420px; text-align: center; } .stanza-parola summary { cursor: pointer; color: #cdbfae; font-size: 14.5px; } .stanza-parola form, #regia-parola { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .stanza-parola input, #regia-parola input { flex: 1; min-width: 180px; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff12; color: #fff; font: inherit; font-size: 16px; } .stanza-parola .bott, #regia-parola .bott { margin: 0; }
.stanza-esito { text-align: center; min-height: 1.5em; margin: 14px 0 0; color: #ffb38a; font-weight: 600; }
.stanza-aperta { animation: fr-entra .6s both; } .stanza-dentro { padding: 30px 24px; border-radius: 26px; background: radial-gradient(ellipse at 80% 0%, #4a3410, #1f1610 65%); box-shadow: inset 0 0 0 1px #ffd97a44, 0 20px 60px #000a; } .stanza-dentro p { font-size: 17px; line-height: 1.6; color: #f0e4cf; } .stanza-cartello { display: inline-block; margin: 14px 0 !important; padding: 10px 18px; border-radius: 12px; background: repeating-linear-gradient(-45deg, #ffc247, #ffc247 14px, #1d140d 14px, #1d140d 28px); color: #1d140d !important; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; box-shadow: inset 0 0 0 4px #ffc247; } .stanza-cartello span { background: #ffc247; padding: 2px 6px; border-radius: 6px; } .stanza-firma { color: #ffd97a !important; font-style: italic; }
.stanza-cartello { background-clip: padding-box; text-shadow: 0 0 0 #ffc247; } .stanza-cartello { background: #ffc247; }
.stanza-regia { margin-top: 34px; padding: 22px; border-radius: 22px; background: #ffffff0f; border: 1px dashed #ffffff40; } .stanza-regia p { color: #dccdb8; font-size: 15px; } .stanza-regia .fr-nota { color: #6b4a12; }
.chiave-trovata small { display: block; margin: -6px 0 12px; font-size: 13px; line-height: 1.4; color: #e0d2b8; } .chiave-trovata .bott + .bott { margin-top: 8px; background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; } .chiave-trovata .bott { display: flex; justify-content: center; }
.stanza-come { margin: 0 0 22px; padding: 14px 16px; border-radius: 16px; background: #ffffff0a; border: 1px solid #ffffff1f; } .stanza-come summary { cursor: pointer; font-weight: 700; color: #fff; } .stanza-come ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; color: #dccdb8; } .stanza-come b { color: #ffd97a; } .stanza-come a { color: #ffa24d; }
.chiavi-elenco { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; } .chiavi-elenco li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--velo); } .chiavi-elenco li > span { font-size: 20px; line-height: 1.2; } .chiavi-elenco b { display: block; font-size: 14.5px; } .chiavi-elenco small { display: block; font-size: 13px; line-height: 1.4; color: var(--muto); } .chiavi-elenco li.trovata { background: #ffd97a33; }
.chiave-avviso { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: #ffd97a40; color: var(--ink); font-size: 15px; line-height: 1.45; }

/* 4.26 — appunti del fondatore (home, solo Sandro) */
.fondatore { padding: 10px 0 0; } .fondatore-scatola { border-radius: 22px; background: #1d140d; color: #f7efe4; border: 1px dashed #ffd97a88; --ink: #f7efe4; --muto: #cdbfae; }
.fondatore-scatola summary { cursor: pointer; padding: 16px 20px; display: grid; gap: 2px; list-style: none; } .fondatore-scatola summary::-webkit-details-marker { display: none; } .fondatore-scatola summary .eti { color: #ffd97a; margin: 0; } .fondatore-scatola summary b { font-size: 20px; color: #fff; } .fondatore-scatola summary small { color: #cdbfae; font-size: 13px; }
.fondatore-griglia { display: grid; gap: 14px; padding: 0 16px 18px; } @media (min-width: 1000px) { .fondatore-griglia { grid-template-columns: 1.2fr 1fr 1fr; } }
.fondatore-carta { padding: 16px 18px; border-radius: 16px; background: #ffffff0d; font-size: 14.5px; line-height: 1.5; } .fondatore-carta h3 { margin: 0 0 10px; font-size: 17px; color: #ffd97a; } .fondatore-carta p { margin: 0 0 10px; color: #e6d8c6; } .fondatore-carta a { color: #ffa24d; } .fondatore-carta .piccolo { font-size: 12.5px; color: #b3a391; } .fondatore-carta .bott { margin: 0; } .fondatore-carta .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; padding: 8px 14px; min-height: 0; }
.fondatore-carta ul, .fondatore-chiavi { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; color: #e6d8c6; } .fondatore-chiavi b { color: #fff; } .fondatore-chiavi p { margin: 2px 0 0; color: #cdbfae; }
.fondatore-parola { display: inline-block; margin: 6px 6px 0 0; padding: 6px 12px; border-radius: 10px; background: #ffd97a; color: #1d140d; font: 700 16px var(--mono); } .fondatore-carta kbd { padding: 1px 6px; border-radius: 6px; background: #ffffff22; font-family: var(--mono); }

/* 4.27 — caccia a 10 chiavi, stanza segreta arredata, meteo per chi osserva */
.caccia-casa { padding-top: 10px; } .caccia-scatola { display: grid; gap: 18px; padding: 24px; border-radius: 26px; background: radial-gradient(ellipse at 90% 0%, #4a3410, #1d140d 65%); color: #f7efe4; box-shadow: 0 18px 44px #1d140d33; } @media (min-width: 860px) { .caccia-scatola { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 32px; } }
.caccia-scatola .eti { color: #ffd97a; margin: 0 0 6px; } .caccia-scatola h2 { color: #fff; margin: 0 0 10px; } .caccia-testo > p { color: #e6d8c6; margin: 0 0 12px; font-size: 16px; } .caccia-regole { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; color: #dccdb8; } .caccia-regole b { color: #ffd97a; } .caccia-regole a { color: #ffa24d; }
.caccia-indizio { position: relative; padding: 22px 20px; border-radius: 20px; background: #ffffff0f; border: 1px dashed #ffd97a77; text-align: center; } .caccia-chiave { display: block; font-size: 44px; line-height: 1; margin-bottom: 8px; animation: bolla-dondola 6s 2s infinite; } .caccia-frase { margin: 0 0 12px; font-size: 17px; line-height: 1.45; font-style: italic; color: #fff; } .caccia-conto { margin: 0 0 12px; font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #cdbfae; } .caccia-indizio .bott { margin: 0; background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.chiave-indizio { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #ffffff14; border: 1px dashed #ffd97a88; font-size: 15px; line-height: 1.45; font-style: italic; color: #fff; text-align: left; } .chiave-indizio em { display: block; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #ffd97a; margin-bottom: 4px; }
.chiave-trovata { top: 12%; max-height: 80vh; overflow: auto; }
.chiave-nome { cursor: default; display: inline-block; } .chiave-nome.bussa { animation: gc-no .3s; }
.porta-serrature { flex-wrap: wrap; justify-content: center; max-width: 130px; } .porta-serrature i { width: 14px; height: 19px; }
.porta { --attesa: 0; } .porta::after { content: ""; display: block; height: 4px; margin: 14px auto 0; width: calc(var(--attesa) * 100%); border-radius: 4px; background: #ffd97a; transition: width 1s linear; }
.stanza-indizi li.prossima { border-color: #ffa24d99; background: #ff7a1a1f; } .stanza-indizi li.prossima p { color: #fff; font-style: italic; font-size: 15.5px; } .stanza-indizi li.chiuse { opacity: .6; }
.chiavi-elenco li.prossima { background: #ff7a1a1f; } .chiavi-elenco li.prossima small { color: var(--ink); font-style: italic; }
.stanza-aperta { display: grid; gap: 18px; } .stanza-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .stanza-indice a { padding: 9px 14px; border-radius: 999px; background: #ffffff14; color: #fff; text-decoration: none; font: 600 14px var(--tit); box-shadow: inset 0 0 0 1px #ffffff2e; }
.st-blocco { padding: 26px 22px; border-radius: 26px; background: #ffffff0a; border: 1px solid #ffffff1f; scroll-margin-top: 90px; } .st-blocco h2 { margin: 0 0 10px; } .st-blocco h3 { color: #ffd97a; font-size: 18px; margin: 20px 0 8px; } .st-blocco > p { color: #dccdb8; font-size: 16px; line-height: 1.55; margin: 0 0 14px; } .st-blocco .piccolo { font-size: 13px; color: #b3a391; }
.mind-cervello { max-width: 380px; margin: 4px auto 14px; } .mind-cervello svg { display: block; width: 100%; height: auto; } .mind-nodo { fill: #ffb878; animation: mind-pulsa 3.2s infinite; transform-box: fill-box; transform-origin: center; } .mind-filo { stroke: #ffb878; stroke-width: 1.2; opacity: .18; animation: mind-scorre 3.2s infinite; } @keyframes mind-pulsa { 0%, 100% { opacity: .35; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.5); fill: #fff; } } @keyframes mind-scorre { 0%, 100% { opacity: .12; } 45% { opacity: .75; } } @media (prefers-reduced-motion: reduce) { .mind-nodo, .mind-filo { animation: none; opacity: .6; } }
.mind-zone { display: grid; gap: 10px; margin: 0 0 18px; } @media (min-width: 700px) { .mind-zone { grid-template-columns: 1fr 1fr; } } .mind-zone div { padding: 12px 14px; border-radius: 14px; background: #ffffff0d; } .mind-zone b { display: block; color: #fff; font-size: 15px; } .mind-zone span { font-size: 14px; line-height: 1.45; color: #cdbfae; }
.mind-prova { padding: 18px; border-radius: 20px; background: #0c0806; box-shadow: inset 0 0 0 1px #ffa24d55; margin-bottom: 14px; } .mind-prova h3 { margin-top: 0; } #mind-grafico { display: block; width: 100%; height: auto; border-radius: 12px; background: #15100c; } .mind-comandi { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .mind-comandi .bott { margin: 0; } .mind-comandi .bott:disabled { opacity: .45; } .mind-comandi .bott.due, .cass-comandi .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.mind-diario { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; color: #e6d8c6; } .mind-diario li { animation: fr-entra .35s both; }
.cass { padding: 20px; border-radius: 22px; background: linear-gradient(160deg, #3b3f46, #1c1f24); box-shadow: inset 0 0 0 2px #5b6069, 0 12px 30px #0008; text-align: center; } .cass.aperta { box-shadow: inset 0 0 0 2px #6dff9a, 0 0 40px #6dff9a44; }
.cass-ruote { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; } .cass-ruota { display: grid; gap: 6px; } .cass-ruota button { width: 58px; height: 40px; border: 0; border-radius: 12px; background: #ffffff1a; color: #fff; font-size: 16px; cursor: pointer; } .cass-ruota output { display: grid; place-items: center; width: 58px; height: 68px; border-radius: 12px; background: #0b0c0e; color: #6dff9a; font: 700 38px var(--mono); box-shadow: inset 0 0 0 1px #5b6069; text-shadow: 0 0 12px #6dff9a88; }
.cass-comandi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .cass-comandi .bott { margin: 0; } .cass-comandi .bott:disabled { opacity: .45; } .cass-voce { margin: 12px 0; min-height: 1.5em; color: #f0e4cf; font-weight: 600; }
.cass-storia { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 320px; margin-inline: auto; } .cass-storia li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #00000040; font-family: var(--mono); color: #fff; } .cass-n { color: #9aa3ad; font-size: 12px; width: 18px; } .cass-storia b { letter-spacing: .1em; font-size: 17px; } .cass-spie { margin-left: auto; display: flex; gap: 5px; } .cass-spie i { width: 13px; height: 13px; border-radius: 50%; background: #3b3f46; } .cass-spie i.v { background: #6dff9a; box-shadow: 0 0 8px #6dff9a; } .cass-spie i.g { background: #ffd24a; box-shadow: 0 0 8px #ffd24a; }
.cass-classifica { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: #e6d8c6; } .cass-classifica li { padding-left: 4px; } .cass-classifica li.vuota { list-style: none; margin-left: -22px; color: #b3a391; } .cass-classifica b { color: #fff; margin-right: 8px; } .cass-classifica span { font: 500 13px var(--mono); color: #cdbfae; }
.muro-modulo { display: grid; gap: 8px; margin-bottom: 8px; } @media (min-width: 700px) { .muro-modulo { grid-template-columns: 200px 1fr auto; } } .muro-modulo input { min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff12; color: #fff; font: inherit; font-size: 16px; } .muro-modulo input[readonly] { opacity: .7; } .muro-modulo .bott { margin: 0; } .muro-esito { min-height: 1.4em; margin: 0 0 12px; color: #ffd97a; font-weight: 600; font-size: 14.5px; }
.muro { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 10px; border-radius: 18px; background: #2a1a12; box-shadow: inset 0 0 0 2px #1a0f0a; } .muro-vuoto { grid-column: 1 / -1; margin: 0; padding: 18px; text-align: center; color: #cdbfae; }
.mattone { position: relative; padding: 12px 14px; border-radius: 8px; background: hsl(calc(8 + var(--tinta, 0) * 1), 52%, 34%); box-shadow: inset 0 -4px 0 #0000002e, inset 0 2px 0 #ffffff1f; color: #fff; display: grid; gap: 4px; animation: fr-entra .4s both; } .mattone:nth-child(3n) { grid-column: span 1; } .mattone small { font: 600 10.5px var(--mono); letter-spacing: .05em; color: #ffffffa6; } .mattone p { margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } .mattone b { font-size: 13px; color: #ffe2b8; } .mattone.mio { box-shadow: inset 0 0 0 2px #ffd97a, inset 0 -4px 0 #0000002e; } .mattone-via { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .6; }
.st-voti { display: grid; gap: 8px; } .st-voce { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; border-radius: 16px; border: 1px solid #ffffff2e; background: #ffffff0d; color: #fff; font: 600 15.5px var(--tit); text-align: left; cursor: pointer; overflow: hidden; } .st-voce > span { font-size: 22px; position: relative; } .st-voce b { position: relative; flex: 1; } .st-voce em { position: relative; font: 700 15px var(--mono); font-style: normal; color: #ffd97a; } .st-voce i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--l); background: #ff7a1a33; transition: width .5s; } .st-voce.mia { border-color: #ffd97a; } .st-voce.mia b::after { content: "  ✓ il tuo voto"; font-weight: 500; font-size: 12.5px; color: #ffd97a; }
.vietate { display: grid; gap: 8px; } .vietata { border-radius: 14px; background: #0f1a22; border: 1px solid #2c4a5c; } .vietata summary { cursor: pointer; padding: 14px 16px; color: #fff; font-weight: 600; font-size: 15.5px; white-space: pre-line; } .vietata p { margin: 0; padding: 0 16px 14px; color: #8fd3f4; font-weight: 700; white-space: pre-line; }
.meteo-cielo { padding: 20px; border-radius: 24px; background: #ffffff0d; border: 1px solid #ffffff22; display: grid; gap: 16px; transition: opacity .3s; } .meteo-cielo.carica { opacity: .6; }
.meteo-verdetto { display: flex; gap: 16px; align-items: center; } .meteo-simbolo { font-size: 54px; line-height: 1; } .meteo-verdetto .eti { margin: 0; } .meteo-verdetto h3 { margin: 2px 0 4px; font-size: clamp(24px, 4vw, 34px); } .meteo-verdetto p:last-child { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muto); }
.meteo-cielo[data-esito="si"] h3 { color: #6dff9a; } .meteo-cielo[data-esito="forse"] h3 { color: #ffd24a; } .meteo-cielo[data-esito="no"] h3 { color: #ff8b7a; }
.meteo-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .meteo-numeri div { padding: 12px; border-radius: 14px; background: #ffffff0d; display: grid; gap: 2px; } .meteo-numeri b { font-size: 21px; color: var(--ink); } .meteo-numeri span { font-size: 12.5px; color: var(--muto); }
.meteo-eti { margin: 0 0 -8px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muto); } .meteo-ore { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; } .meteo-ore div { flex: 1 0 34px; display: grid; justify-items: center; gap: 4px; font: 600 11.5px var(--mono); color: var(--muto); } .meteo-ore i { position: relative; display: block; width: 100%; height: 64px; border-radius: 8px; background: #ffffff12; overflow: hidden; } .meteo-ore i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--n); background: #9aa3ad; } .meteo-ore .ok i { box-shadow: inset 0 0 0 2px #6dff9a; } .meteo-ore .mah i { box-shadow: inset 0 0 0 2px #ffd24a; } .meteo-ore .ko i { box-shadow: inset 0 0 0 2px #ff8b7a; } .meteo-ore b { color: var(--ink); font-size: 11px; }
.meteo-note { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink); } .meteo-note:empty { display: none; }
.meteo-come summary { cursor: pointer; font-weight: 700; } .meteo-come ul { margin: 10px 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muto); } .meteo-come b { color: var(--ink); }

/* 4.28 — con tutte le chiavi la porta si fa notare */
.chiavi-conto em { display: none; font-style: normal; font-weight: 700; margin-left: 4px; } .chiavi-conto.tutte em { display: inline; } .chiavi-conto.tutte { padding: 11px 16px; font-size: 15px; }
.caccia-scatola.completa .caccia-indizio { border-style: solid; border-color: #ffd97a; background: #ffd97a22; box-shadow: 0 0 40px #ffd97a33; } .caccia-scatola.completa .caccia-indizio .bott { background: #ff7a1a; color: #1d0f04; box-shadow: none; }

/* 4.31 — consiglio del giorno ed eventi di tecnologia */
.consiglio-sez { padding-top: 10px; } .consiglio { padding: 24px; border-radius: 26px; background: linear-gradient(150deg, #fff7ea, #ffffff 60%); border: 1px solid var(--riga); box-shadow: 0 14px 34px #1d140d14; display: grid; gap: 12px; } @media (min-width: 860px) { .consiglio { padding: 32px; } }
.consiglio.gira { animation: fr-entra .45s both; } .consiglio-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .consiglio-testa .eti { margin: 0; } .consiglio-serie { padding: 6px 12px; border-radius: 999px; background: #ff7a1a24; color: var(--eti); font: 700 13px var(--tit); white-space: nowrap; } .consiglio-serie[hidden] { display: none; }
.consiglio h2 { margin: 0; font-size: clamp(26px, 4.4vw, 40px); } .consiglio-testo { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink2); max-width: 46em; }
.consiglio-prova { padding: 14px 16px; border-radius: 16px; background: #1d140d; color: #f7efe4; } .consiglio-prova b { display: block; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffa24d; margin-bottom: 4px; } .consiglio-prova p { margin: 0; font-size: 16px; line-height: 1.5; }
.consiglio-azioni { display: flex; flex-wrap: wrap; gap: 8px; } .consiglio-azioni .bott { margin: 0; } .consiglio-azioni .bott[hidden] { display: none; } .consiglio-azioni .bott:disabled { opacity: .6; cursor: default; } .consiglio-esito { margin: 0; min-height: 1.3em; font-size: 14.5px; font-weight: 600; color: var(--eti); }
.eventi-casa .casa-riga-titolo { align-items: flex-end; }
.eventi-tech { display: grid; gap: 12px; } @media (min-width: 900px) { .eventi-tech.breve { grid-template-columns: repeat(3, 1fr); } }
.evento-tech { display: flex; gap: 16px; padding: 18px; border-radius: 22px; background: var(--pan); border: 1px solid var(--riga); box-shadow: 0 8px 22px #1d140d0f; } .eventi-tech.breve .evento-tech { flex-direction: column; gap: 12px; }
.evento-conto { flex: none; width: 82px; height: 82px; border-radius: 20px; display: grid; place-content: center; text-align: center; background: #1d140d; color: #fff; } .evento-conto b { font: 800 30px/1 var(--tit); color: #ffa24d; } .evento-conto span { font: 600 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #cdbfae; } .evento-tech.ora .evento-conto { background: #ff7a1a; } .evento-tech.ora .evento-conto b, .evento-tech.ora .evento-conto span { color: #1d0f04; } .evento-tech.ora .evento-conto b { font-size: 22px; }
.evento-corpo { min-width: 0; display: grid; gap: 6px; } .evento-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 600 12px var(--tit); } .evento-meta span { padding: 4px 10px; border-radius: 999px; background: var(--velo); color: var(--ink2); } .evento-corpo h3 { margin: 0; font-size: 22px; } .evento-quando { margin: 0; font-weight: 700; color: var(--eti); font-size: 15px; } .evento-testo { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muto); }
.evento-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .evento-azioni .bott { margin: 0; padding: 9px 14px; min-height: 42px; font-size: 14px; } .eventi-vuoto { color: var(--muto); }

/* 4.32 — dal disegno al 3D (prototipo nel laboratorio) */
.forma3d-sez { background: linear-gradient(180deg, #fff7ea, transparent); }
.forma3d { display: grid; gap: 18px; } @media (min-width: 900px) { .forma3d { grid-template-columns: 1fr 1fr; } }
.forma3d-lato { padding: 16px; border-radius: 24px; background: var(--pan); border: 1px solid var(--riga); box-shadow: 0 10px 28px #1d140d12; display: grid; gap: 12px; align-content: start; }
.forma3d-passo { margin: 0; font: 700 15px var(--tit); display: flex; align-items: center; gap: 8px; } .forma3d-passo b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ar); color: #1d0f04; font-size: 14px; }
.forma3d canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; touch-action: none; user-select: none; -webkit-user-select: none; } #f3d-foglio { background: #fffdf8; box-shadow: inset 0 0 0 2px var(--riga); cursor: crosshair; } #f3d-vista { background: radial-gradient(ellipse at 50% 30%, #3a2a1e, #120b09 75%); cursor: grab; } #f3d-vista:active { cursor: grabbing; }
.forma3d-modi { margin: 0; } .forma3d-comandi { display: flex; flex-wrap: wrap; gap: 8px; } .forma3d-comandi .bott { margin: 0; padding: 10px 14px; min-height: 44px; font-size: 14.5px; } .forma3d-comandi .bott:disabled { opacity: .45; cursor: not-allowed; }
.forma3d-aiuto { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muto); } .forma3d-cursore { display: flex; align-items: center; gap: 10px; font: 600 14px var(--tit); } .forma3d-cursore[hidden] { display: none; } .forma3d-cursore input { flex: 1; accent-color: var(--ar); } .forma3d-cursore output { font-family: var(--mono); min-width: 54px; text-align: right; }
.forma3d-parere { margin-top: 18px; padding: 22px; border-radius: 24px; background: #1d140d; color: #f7efe4; display: grid; gap: 14px; } @media (min-width: 900px) { .forma3d-parere { grid-template-columns: 1.3fr 1fr; align-items: center; } .forma3d-parere form, .forma3d-esito { grid-column: 1 / -1; } }
.forma3d-parere .eti { color: #ffa24d; margin: 0 0 4px; } .forma3d-parere h3 { margin: 0 0 6px; color: #fff; font-size: 24px; } .forma3d-parere p { margin: 0; color: #dccdb8; font-size: 15px; line-height: 1.5; }
.forma3d-voti { display: flex; flex-wrap: wrap; gap: 8px; } .forma3d-voti .bott { margin: 0; } .forma3d-voti .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; } .forma3d-voti .bott:disabled { opacity: .45; } .forma3d-voti .bott.scelto { opacity: 1; box-shadow: 0 0 0 3px #ffd97a; }
.forma3d-parere form { display: flex; flex-wrap: wrap; gap: 8px; } .forma3d-parere form[hidden] { display: none; } .forma3d-parere input { flex: 1; min-width: 200px; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff12; color: #fff; font: inherit; font-size: 16px; } .forma3d-parere form .bott { margin: 0; background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; } .forma3d-esito { min-height: 1.3em; color: #ffd97a !important; font-weight: 600; }

/* 4.35 — telefono: la pagina non si sposta più di lato (il piede andava fuori schermo e si trascinava dietro tutto) */
html, body { overflow-x: clip; max-width: 100%; }
.piede .fine { flex-wrap: wrap; row-gap: 10px; } .piede .fine > * { min-width: 0; }
@media (max-width: 860px) { .piede .fine { justify-content: flex-start; column-gap: 16px; } .piede .fine .su { margin-left: 0; } }

/* 4.36 — SF Forma (programma di disegno 3D), guida alla stampa 3D, stampante in home */
.forma3d { display: grid; gap: 12px; } .f3d-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: #1d140d; color: #fff; }
.f3d-nome { display: flex; align-items: center; gap: 8px; margin-right: auto; } .f3d-nome b { font-size: 18px; letter-spacing: -.02em; } .f3d-nome em { font: 700 10.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #ff7a1a; color: #1d0f04; }
.f3d-barra .oss-filtri { margin: 0; } .f3d-barra .oss-filtri button { color: #fff; border-color: #ffffff40; min-height: 38px; padding: 6px 12px; } .f3d-barra .bott { margin: 0; padding: 8px 14px; min-height: 38px; font-size: 13.5px; background: #ffffff1a; color: #fff; box-shadow: inset 0 0 0 1px #ffffff40; }
.f3d-schede { display: none; } .f3d-corpo { display: grid; gap: 14px; } @media (min-width: 900px) { .f3d-corpo { grid-template-columns: 1fr 1fr; } }
.f3d-attrezzi { display: grid; gap: 8px; } .f3d-attrezzi .oss-filtri, .f3d-modi { margin: 0; gap: 6px; } .f3d-attrezzi .oss-filtri button, .f3d-modi button { min-height: 40px; padding: 7px 12px; font-size: 13.5px; }
.f3d-pallino { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 3px; } .f3d-pallino.base { background: #ff963c; } .f3d-pallino.rilievo { background: #c2520a; } .f3d-pallino.foro { background: #fff; box-shadow: inset 0 0 0 2px #1d140d; }
.f3d-foglio-zona { position: relative; border-radius: 16px; overflow: hidden; background-color: #fffdf8; background-image: linear-gradient(#1d140d14 1px, transparent 1px), linear-gradient(90deg, #1d140d14 1px, transparent 1px); background-size: 8.333% 8.333%; box-shadow: inset 0 0 0 2px var(--riga); }
.f3d-foglio-zona canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; background: none !important; box-shadow: none !important; } #f3d-sopra { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.forma3d-cursore input[type=text] { flex: 1; min-width: 0; min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--riga); background: #fff; color: var(--ink); font: inherit; font-size: 16px; } .forma3d-cursore small { color: var(--muto); font-weight: 500; white-space: nowrap; } .forma3d-cursore[hidden] { display: none; }
.f3d-colori { display: flex; flex-wrap: wrap; gap: 8px; } .f3d-colori button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 2px #1d140d26; cursor: pointer; } .f3d-colori button.qui { box-shadow: 0 0 0 3px var(--pan), 0 0 0 5px var(--ar); }
.f3d-solo-tornio { display: none; } .modo-tornio .f3d-solo-tornio { display: block; } .modo-tornio .f3d-solo-spessore, .modo-tornio .f3d-attrezzi .f3d-arnesi, .modo-tornio .f3d-attrezzi .f3d-livelli, .modo-tornio #f3d-testo-riga { display: none; } .modo-tornio .f3d-foglio-zona { background-image: none; }
.f3d-salvataggio { padding: 14px; border-radius: 16px; background: var(--velo); display: grid; gap: 8px; } .f3d-salva-riga { display: flex; flex-wrap: wrap; gap: 8px; } .f3d-salva-riga input { flex: 1; min-width: 130px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--riga); background: #fff; color: var(--ink); font: inherit; font-size: 16px; } .f3d-salva-riga .bott { margin: 0; } .f3d-salva-riga .bott:disabled { opacity: .45; }
html.f3d-blocca { overflow: hidden; }
.forma3d.tutto-schermo { position: fixed; inset: 0; z-index: 400; background: var(--bg); padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); overflow: auto; align-content: start; grid-template-rows: auto 1fr; }
.forma3d.tutto-schermo .f3d-schede { display: flex; } .forma3d.tutto-schermo .f3d-corpo { grid-template-columns: 1fr; min-height: 0; } .forma3d.tutto-schermo .f3d-lato-3d { display: none; } .forma3d.tutto-schermo.mostra-3d .f3d-lato-3d { display: grid; } .forma3d.tutto-schermo.mostra-3d .f3d-lato-disegno { display: none; }
.forma3d.tutto-schermo .forma3d-lato { padding: 10px; border-radius: 18px; } .forma3d.tutto-schermo .f3d-foglio-zona, .forma3d.tutto-schermo #f3d-vista { max-width: min(100%, 62vh); margin: 0 auto; width: 100%; } .forma3d.tutto-schermo .forma3d-passo, .forma3d.tutto-schermo .forma3d-aiuto.f3d-solo-spessore { display: none; }
@media (min-width: 1000px) and (min-height: 600px) { .forma3d.tutto-schermo .f3d-corpo { grid-template-columns: 1fr 1fr; } .forma3d.tutto-schermo .f3d-lato-3d, .forma3d.tutto-schermo.mostra-3d .f3d-lato-disegno { display: grid; } .forma3d.tutto-schermo .f3d-schede { display: none; } .forma3d.tutto-schermo .f3d-foglio-zona, .forma3d.tutto-schermo #f3d-vista { max-width: min(100%, 58vh); } }
.forma-capo h1 em { font-style: normal; color: var(--ar2); } .forma-etichette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .forma-etichette span { padding: 7px 12px; border-radius: 999px; background: var(--pan); border: 1px solid var(--riga); font: 600 13.5px var(--tit); }
.forma-passi { display: grid; gap: 12px; } @media (min-width: 800px) { .forma-passi { grid-template-columns: repeat(3, 1fr); } } .forma-passi > div { padding: 20px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); } .forma-passi b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ar); color: #1d0f04; font-size: 18px; } .forma-passi h3 { margin: 12px 0 6px; font-size: 20px; } .forma-passi p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muto); }
.f3d-galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .f3d-vuota { grid-column: 1 / -1; margin: 0; padding: 26px; border-radius: 18px; background: var(--velo); text-align: center; color: var(--muto); }
.f3d-modello { border-radius: 18px; background: var(--pan); border: 1px solid var(--riga); overflow: hidden; display: grid; } .f3d-modello.attesa { border-style: dashed; border-color: var(--ar); } .f3d-apri { padding: 0; border: 0; background: #1d140d; cursor: pointer; } .f3d-apri img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.f3d-modello-testo { padding: 10px 12px 0; display: grid; } .f3d-modello-testo b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f3d-modello-testo small { font-size: 12.5px; color: var(--muto); } .f3d-modello-azioni { display: flex; gap: 6px; padding: 8px 12px 12px; } .f3d-modello-azioni .bott { margin: 0; padding: 6px 10px; min-height: 36px; font-size: 13px; }
.f3d-piace { border: 1px solid var(--riga); background: none; border-radius: 999px; padding: 6px 12px; font: 600 14px var(--tit); color: var(--ink); cursor: pointer; } .f3d-piace i { font-style: normal; } .f3d-piace.dato { background: #ff7a1a24; border-color: var(--ar); color: var(--eti); }
.forma-piano { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; } .forma-piano li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--pan); border: 1px solid var(--riga); } .forma-piano li > span { font-size: 18px; width: 26px; text-align: center; } .forma-piano b { display: block; font-size: 15px; } .forma-piano small { font-size: 12.5px; color: var(--muto); } .forma-piano li.fatto > span { color: #1f7a45; font-weight: 800; } .forma-piano li.ora { border-color: var(--ar); background: #fff7ea; } .forma-piano li.dopo { opacity: .75; }
.forma-note { padding: 20px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); margin-bottom: 18px; } .forma-note h3 { margin: 0 0 10px; font-size: 19px; } .forma-note ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.guida-menu { margin-top: 16px; background: none; position: static; padding: 0; } .guida-menu a { display: inline-block; margin: 0 6px 6px 0; padding: 9px 14px; border-radius: 999px; background: var(--pan); border: 1px solid var(--riga); color: var(--ink); text-decoration: none; font: 600 14px var(--tit); }
.guida-testo { font-size: 17px; line-height: 1.6; color: var(--ink2); margin: 0 0 12px; }
.guida-carte { display: grid; gap: 12px; margin-bottom: 14px; } @media (min-width: 860px) { .guida-carte { grid-template-columns: repeat(3, 1fr); } .guida-carte.quattro { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 560px) and (max-width: 859px) { .guida-carte.quattro { grid-template-columns: 1fr 1fr; } }
.guida-carta { position: relative; padding: 20px; border-radius: 22px; background: var(--pan); border: 1px solid var(--riga); display: flex; flex-direction: column; gap: 8px; } .guida-carta.scelta { border: 2px solid var(--ar); box-shadow: 0 14px 34px #ff7a1a26; } .guida-carta .eti { margin: 0; } .guida-carta h3 { margin: 0; font-size: 21px; } .guida-carta p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink2); } .guida-nota { font-size: 13.5px !important; color: var(--muto) !important; } .guida-carta .bott { margin: auto 0 0; align-self: flex-start; }
.guida-consiglio { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--ar); color: #1d0f04; font: 700 12px var(--tit); } .guida-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--velo); font: 600 12px var(--tit); color: var(--ink2); }
.guida-prova { display: grid; gap: 16px; align-items: center; padding: 26px; border-radius: 26px; background: radial-gradient(ellipse at 90% 0%, #5a2c12, #1d140d 65%); color: #f7efe4; } @media (min-width: 800px) { .guida-prova { grid-template-columns: 1fr auto; } } .guida-prova .eti { color: #ffa24d; margin: 0 0 6px; } .guida-prova h2 { color: #fff; margin: 0 0 8px; } .guida-prova p { margin: 0; color: #e6d8c6; } .guida-prova .bott { margin: 0; }
.guida-leggi { margin: 26px 0 10px; font-size: 20px; } .guida-articoli { display: grid; gap: 8px; } .guida-articoli a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--pan); border: 1px solid var(--riga); text-decoration: none; color: var(--ink); } .guida-articoli span { color: var(--eti); font-weight: 600; white-space: nowrap; }
.stampante-casa { padding-top: 10px; } .stampante-scatola { display: grid; gap: 18px; align-items: center; padding: 24px; border-radius: 26px; background: linear-gradient(150deg, #fff3e0, #ffffff 65%); border: 1px solid var(--riga); box-shadow: 0 14px 34px #1d140d14; } @media (min-width: 860px) { .stampante-scatola { grid-template-columns: 1.1fr 1fr; padding: 32px; } }
.stampante-testo h2 { margin: 0 0 10px; } .stampante-testo > p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.55; color: var(--ink2); } .stampante-spiega { padding: 12px 14px; border-radius: 14px; background: #1d140d; color: #f7efe4 !important; font-size: 15px !important; min-height: 4.6em; } .stampante-spiega b { color: #ffa24d; } .stampante-spiega.nuova { animation: fr-entra .35s both; }
.stampante-azioni { display: flex; flex-wrap: wrap; gap: 8px; } .stampante-azioni .bott { margin: 0; }
.stampante { max-width: 420px; margin: 0 auto; width: 100%; } .stampante svg { display: block; width: 100%; height: auto; overflow: visible; } .st-strato { animation: st-nasce .4s both; } @keyframes st-nasce { from { opacity: .2; fill: #ffd9a0; } } .st-goccia { animation: st-pulsa .5s infinite alternate; } @keyframes st-pulsa { to { r: 4.5; fill: #fff3d6; } }
.st-punto { fill: #ff7a1a; fill-opacity: .9; stroke: #fff; stroke-width: 3; cursor: pointer; animation: st-richiamo 2.2s infinite; transform-box: fill-box; transform-origin: center; outline: none; } .st-punto.scelto { fill: #1d140d; animation: none; } .st-punto:focus-visible { stroke: #1d140d; } @keyframes st-richiamo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { .st-punto, .st-goccia, .st-strato { animation: none; } }
.stampante-stato { display: flex; justify-content: space-between; margin: 8px 6px 0; font: 600 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muto); }

/* 4.40 — sito più snello: home a schede, porte compatte, sezioni secondarie richiudibili su telefono e tablet */
.casa-schede { padding: 34px 0 0; } .casa-schede > .w > .eti { margin: 0 0 10px; }
.casa-schede-barra { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 8px; scrollbar-width: none; } .casa-schede-barra::-webkit-scrollbar { display: none; } @media (min-width: 760px) { .casa-schede-barra { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0 0 4px; } }
.casa-schede-barra button { flex: none; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); font: 600 15px var(--tit); cursor: pointer; transition: background .15s, color .15s; } .casa-schede-barra button[aria-selected="true"] { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.casa-schede > section { padding-top: 16px; padding-bottom: 10px; } .casa-schede > section.scheda-chiusa { display: none; } .casa-schede > section:not(.scheda-chiusa) { animation: fr-entra .35s both; } @media (prefers-reduced-motion: reduce) { .casa-schede > section:not(.scheda-chiusa) { animation: none; } }
.casa-schede .consiglio .eti, .casa-schede .stampante-testo .eti { display: none; } .casa-schede .consiglio-testa { justify-content: flex-end; min-height: 0; } .casa-schede .consiglio-serie[hidden] + * { margin-top: 0; }
/* le porte: otto riquadri, quattro per riga; sul telefono solo icona e nome */
.casa-porte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .casa-porte { gap: 8px; } .casa-porta { padding: 12px 6px !important; min-height: 0 !important; display: grid !important; justify-items: center; text-align: center; gap: 6px; } .casa-porta small, .casa-porta > i { display: none !important; } .casa-porta b { font-size: 12.5px; line-height: 1.2; } .casa-porta-icona { font-size: 24px; margin: 0 !important; } }
@media (max-width: 700px) { .casa-eroe { padding: 28px 0 18px; } .casa-eroe .intro { font-size: 16px; } }
/* testi di accompagnamento più corti sul telefono */
@media (max-width: 700px) { .sez > .w > .sotto, .casa-riga-titolo .sotto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; } .sez { padding-top: 34px; padding-bottom: 34px; } }
/* sezioni richiudibili */
.piega-bott { display: none; } .piega-corpo { min-width: 0; }
[data-piega].piegata .piega-corpo { height: 0; overflow: hidden; visibility: hidden; } [data-piega].piegata { padding-top: 18px; padding-bottom: 18px; } [data-piega].piegata .sotto { display: none; }
@media (max-width: 1180px), (pointer: coarse) and (max-width: 1400px) { [data-piega] > .w { position: relative; } [data-piega] h2 { padding-right: 96px; }
  .piega-bott { display: inline-flex; align-items: center; gap: 6px; position: absolute; right: 18px; top: 0; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; font: 600 14px var(--tit); cursor: pointer; opacity: .85; } .piega-bott i { font-style: normal; transition: transform .2s; } .piega-bott[aria-expanded="true"] i { transform: rotate(180deg); }
  [data-piega].piegata h2 { font-size: clamp(22px, 5vw, 30px); margin: 0; } [data-piega].piegata .eti { margin-bottom: 4px; } }
/* meno cose che galleggiano sul telefono */
@media (max-width: 700px) { .bolla-ridere a { width: 84px; height: 84px; } .bolla-faccia { font-size: 24px; height: 26px; } .bolla-testo { font-size: 9px; max-width: 70px; } .bolla-testo b { font-size: 10px; }
  .app-invito { padding: 10px 12px; gap: 10px; } .app-invito span { display: none; } .app-invito .app-icona { display: grid; width: 40px; height: 40px; font-size: 18px; } .app-invito b { font-size: 14px; } .app-invito .bott { padding: 8px 14px; min-height: 38px; }
  .chiavi-conto { padding: 6px 10px; font-size: 13px; } }

/* 4.41 — chat della stanza segreta */
.chat { height: min(420px, 55vh); overflow-y: auto; padding: 12px; border-radius: 18px; background: #0c0806; box-shadow: inset 0 0 0 1px #ffffff1f; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; overscroll-behavior: contain; }
.chat-riga { position: relative; max-width: 84%; align-self: flex-start; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #ffffff14; color: #fff; } .chat-riga small { display: block; font: 600 11.5px var(--tit); color: #cdbfae; margin-bottom: 2px; } .chat-riga p { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; color: #fff !important; }
.chat-riga.mio { align-self: flex-end; background: #ff7a1a; color: #1d0f04; border-radius: 14px 14px 4px 14px; } .chat-riga.mio small, .chat-riga.mio p { color: #1d0f04 !important; } .chat-riga.sandro:not(.mio) { box-shadow: inset 0 0 0 1px #ffd97a; } .chat-riga.sandro:not(.mio) small { color: #ffd97a; } .chat-riga .mattone-via { top: 0; right: 4px; }
.chat-modulo { display: grid; gap: 8px; grid-template-columns: 1fr auto; } .chat-modulo input[name=nome] { grid-column: 1 / -1; } .chat-modulo input[hidden] { display: none; } @media (min-width: 700px) { .chat-modulo { grid-template-columns: 180px 1fr auto; } .chat-modulo input[name=nome] { grid-column: auto; } .chat-modulo input[name=nome][hidden] + input { grid-column: 1 / 3; } }
.chat-modulo input { min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff12; color: #fff; font: inherit; font-size: 16px; min-width: 0; } .chat-modulo .bott { margin: 0; }

/* 4.43 — tessera speciale (titolo dato da Sandro) */
.tess-carta.speciale { background: radial-gradient(ellipse at 90% 0%, #b8860b, #3a2c10 55%, #120b06); box-shadow: 0 24px 60px #1d140d55, inset 0 0 0 3px #ffd97a; } .tess-carta.speciale .tess-chi span { color: #ffd97a; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* 4.44 — informativa sulla privacy */
.privacy-testo h2 { font-size: clamp(20px, 3vw, 26px); margin: 28px 0 10px; } .privacy-testo h2:first-child { margin-top: 0; } .privacy-testo p, .privacy-testo li { font-size: 16.5px; line-height: 1.6; color: var(--ink2); } .privacy-testo p { margin: 0 0 10px; } .privacy-testo ul { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; }
.privacy-regia { padding: 22px; border-radius: 22px; background: #1d140d; color: #f7efe4; border: 1px dashed #ffd97a88; } .privacy-regia .eti { color: #ffd97a; margin: 0 0 4px; } .privacy-regia h2 { color: #fff; margin: 0 0 10px; font-size: 22px; } .privacy-regia p { color: #dccdb8; font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.privacy-regia form { display: grid; gap: 12px; } .privacy-regia label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; } .privacy-regia input[type=email], .privacy-regia input[type=text] { min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff12; color: #fff; font: inherit; font-size: 16px; } .privacy-spunta { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; } .privacy-spunta input { width: 22px; height: 22px; accent-color: var(--ar); } .privacy-regia .bott { margin: 0; justify-self: start; } #privacy-esito { margin: 0; color: #ffd97a; font-weight: 600; min-height: 1.3em; }
.piede-privacy { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--velo); font-size: 13.5px; line-height: 1.5; color: var(--muto); } .piede-privacy a { color: inherit; text-decoration: underline; }

/* 4.45 — giochi: la pagina resta ferma mentre si gioca, e c'è lo schermo intero */
.gc.attivo .gc-area, .gioco-campo.attivo { touch-action: none; overscroll-behavior: contain; }
.gc .gc-azioni .gc-via[hidden], .gioco-azioni #gioco-via[hidden] { display: inline-flex !important; visibility: hidden; }   /* il pulsante sparisce alla vista ma tiene il suo posto: sotto non si sposta niente */
.gc-voce, .gioco-voce { min-height: 4.4em; } .gc-testa span, .gioco-punti span { font-variant-numeric: tabular-nums; white-space: nowrap; } .gc-tempo { min-width: 4.5em; text-align: center; }
.gioco-pieno-bott { display: block; margin: 0 0 10px auto; padding: 7px 12px; min-height: 36px; border-radius: 999px; border: 1px solid #ffffff40; background: #ffffff14; color: #fff; font: 600 13px var(--tit); cursor: pointer; } #gioco > .gioco-pieno-bott { border-color: var(--riga); background: var(--pan); color: var(--ink); }
.gioco-pieno { position: fixed !important; inset: 0; z-index: 420; margin: 0 !important; max-width: none !important; border-radius: 0 !important; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important; display: flex !important; flex-direction: column; overflow: auto; background: radial-gradient(ellipse at 80% 0%, #33244a, #15101f 60%, #08060d); color: #f7efe4; }
.gioco-pieno .gc-area, .gioco-pieno .gioco-campo { flex: 1 1 auto; min-height: 240px; height: auto !important; } .gioco-pieno .gc-voce, .gioco-pieno .gioco-voce { min-height: 3em; } .gioco-pieno .gc-nota { display: none; }
#gioco.gioco-pieno { --ink: #f7efe4; --muto: #cdbfae; } #gioco.gioco-pieno h3, #gioco.gioco-pieno .gioco-punti b { color: #fff; } #gioco.gioco-pieno > .gioco-pieno-bott { border-color: #ffffff40; background: #ffffff14; color: #fff; }
.sopra-pieno { animation: none !important; transform: none !important; filter: none !important; perspective: none !important; contain: none !important; overflow: visible !important; z-index: 430 !important; position: relative; }
#gioco-condividi[hidden] { display: none !important; }

/* 4.46 — sala giochi, meteo della settimana */
.sala-scelta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 auto 14px; max-width: 760px; } @media (min-width: 760px) { .sala-scelta { grid-template-columns: repeat(4, 1fr); } }
.sala-scelta button { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 18px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); cursor: pointer; font: inherit; } .sala-scelta span { font-size: 26px; } .sala-scelta b { font-size: 15px; } .sala-scelta small { font-size: 12px; color: var(--muto); text-align: center; } .sala-scelta button.qui { background: var(--scuro); border-color: var(--scuro); color: #fff; } .sala-scelta button.qui small { color: #cdbfae; }
.sala-campo { max-width: 460px; margin: 0 auto; } .sala-tela-zona { display: grid; place-items: center; } #sala-tela { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 3 / 4; border-radius: 18px; background: #0b0813; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; } .sala-campo.attivo #sala-tela { box-shadow: 0 0 0 2px #ff7a1a66; }
.sala-frecce { display: grid; grid-template-columns: repeat(3, 58px); grid-template-areas: ". su ." "sx giu dx"; gap: 6px; justify-content: center; margin: 4px 0 8px; } .sala-frecce[hidden] { display: none !important; } .sala-frecce button { height: 50px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff14; color: #fff; font-size: 18px; touch-action: manipulation; } .sala-frecce [data-d=su] { grid-area: su; } .sala-frecce [data-d=sx] { grid-area: sx; } .sala-frecce [data-d=giu] { grid-area: giu; } .sala-frecce [data-d=dx] { grid-area: dx; } @media (hover: hover) and (pointer: fine) { .sala-frecce { display: none !important; } }
.gioco-pieno .sala-tela-zona { flex: 1 1 auto; min-height: 0; } .gioco-pieno #sala-tela { width: auto; max-width: 100%; height: 100%; max-height: 100%; }
.meteo-settimana { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 4px; } .meteo-giorno { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: #ffffff0d; text-align: center; border-top: 3px solid #9aa3ad; } .meteo-giorno.si { border-top-color: #6dff9a; } .meteo-giorno.forse { border-top-color: #ffd24a; } .meteo-giorno.no { border-top-color: #ff8b7a; }
.meteo-giorno b { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muto); } .meteo-giorno span { font-size: 24px; line-height: 1.2; } .meteo-giorno em { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--ink); text-transform: capitalize; } .meteo-giorno small { font-size: 11.5px; color: var(--muto); }

/* 4.47 — menu del computer più arioso: niente voci spezzate su due righe */
@media (min-width: 1181px) {
  .testa nav { flex-wrap: nowrap; gap: 2px; } .testa nav a { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  .testa nav > a:first-child { display: none; }                 /* "Home": c'è già il logo, che porta alla home */
  .testa .marchio-torna { white-space: nowrap; }
}
@media (min-width: 1181px) and (max-width: 1500px) { .testa .marchio-torna { display: none; } .testa nav a { font-size: 15px; padding-left: 10px; padding-right: 10px; } .testa .apri-cerca span { display: none; } .testa .apri-cerca { padding: 0; width: 44px; justify-content: center; } }
@media (min-width: 1181px) and (max-width: 1280px) { .testa nav a { font-size: 14px; padding-left: 8px; padding-right: 8px; } }

/* 4.48 — sparatutto, viaggio 3D tra i pianeti, sezione "Mini giochi" in home */
.viaggio { max-width: 920px; margin: 0 auto; } .viaggio-tela-zona { position: relative; } #viaggio-tela { display: block; width: 100%; height: auto; aspect-ratio: 900 / 560; border-radius: 18px; background: #04030a; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; } #viaggio-tela:active { cursor: grabbing; } #viaggio-tela:focus-visible { box-shadow: 0 0 0 2px #ff7a1a; }
.viaggio-scheda { position: absolute; left: 10px; right: 10px; top: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(10,8,18,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; display: grid; gap: 2px; pointer-events: none; } @media (min-width: 760px) { .viaggio-scheda { right: auto; max-width: 430px; } }
.viaggio-scheda b { font-size: 18px; color: #ffa24d; } .viaggio-scheda span { font-size: 13.5px; line-height: 1.4; color: #e9e1f3; } .viaggio-scheda.nuova { animation: fr-entra .4s both; }
.viaggio-comandi { display: flex; gap: 8px; justify-content: center; margin: 12px 0 10px; } .viaggio-comandi .bott { margin: 0; } .viaggio-comandi .bott.due { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.viaggio-pianeti { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 0 0 4px; padding-bottom: 6px; scrollbar-width: none; } .viaggio-pianeti::-webkit-scrollbar { display: none; } .viaggio-pianeti button { flex: none; color: #fff; min-height: 40px; padding: 7px 13px; font-size: 13.5px; } @media (min-width: 900px) { .viaggio-pianeti { justify-content: center; flex-wrap: wrap; } }
.gioco-pieno.viaggio .viaggio-tela-zona { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; } .gioco-pieno.viaggio #viaggio-tela { width: auto; max-width: 100%; max-height: 100%; height: auto; }
.minigiochi { background: linear-gradient(180deg, transparent, #fff4e0 30%, transparent); } .minigiochi-filtri { margin-bottom: 14px; }
.minigiochi-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 700px) { .minigiochi-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .minigiochi-griglia { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.minigioco { display: grid; gap: 4px; align-content: start; padding: 16px 14px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); color: var(--ink); text-decoration: none; box-shadow: 0 6px 18px #1d140d0d; transition: transform .15s, box-shadow .15s, border-color .15s; } .minigioco[hidden] { display: none; }
.minigioco > span { font-size: 30px; line-height: 1.1; } .minigioco b { font-size: 16px; line-height: 1.2; } .minigioco small { font-size: 13px; line-height: 1.35; color: var(--muto); } .minigioco i { font-style: normal; font: 700 13px var(--tit); color: var(--eti); margin-top: 4px; }
@media (hover: hover) { .minigioco:hover { transform: translateY(-3px); border-color: var(--ar); box-shadow: 0 14px 30px #ff7a1a26; } } .minigioco:active { transform: scale(.97); }
@media (max-width: 700px) { .minigioco { padding: 12px 10px; } .minigioco > span { font-size: 26px; } .minigioco b { font-size: 14.5px; } .minigioco small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; } }
.minigiochi-nota { margin-top: 14px; text-align: center; }

/* ——— 4.50 · quattro passioni in home + sezione Motori ——— */
.casa-porte.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 900px) { .casa-porte.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.casa-porte.quattro .casa-porta { padding: 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column; gap: 0; text-align: left; justify-items: stretch; }
.casa-porta-su { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 14px; flex: 1; color: inherit; text-decoration: none; } .casa-porta-su small { display: block !important; } .casa-porta-su > i { display: block !important; }
.casa-porta-giu { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; } .casa-porta-giu a { padding: 7px 11px; border-radius: 999px; font: 600 13px var(--tit); text-decoration: none; background: var(--velo); color: inherit; white-space: nowrap; } .casa-porta-giu a:hover { background: var(--ar); color: #1d0f04; }
.casa-porta:hover .casa-porta-giu a { background: #ffffff1f; } .casa-porta:hover .casa-porta-giu a:hover { background: var(--ar); }
@media (max-width: 700px) { .casa-porte.quattro .casa-porta-su { padding: 14px 12px 10px; } .casa-porte.quattro .casa-porta b { font-size: 18px; } .casa-porte.quattro .casa-porta small { font-size: 12.5px; } .casa-porte.quattro .casa-porta-icona { font-size: 28px; } .casa-porta-giu { padding: 0 8px 10px; gap: 5px; } .casa-porta-giu a { padding: 7px 9px; font-size: 12px; } }
.casa-porticine { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .casa-porticine a { padding: 9px 14px; border-radius: 999px; font: 600 14px var(--tit); text-decoration: none; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--linea); background: #ffffff80; } .casa-porticine a:hover { background: var(--scuro); color: #fff; }

.mot-capo { background: linear-gradient(160deg, #1d140d, #2a1a10 55%, #47200a); color: #f7efe4; padding-bottom: 30px; position: relative; overflow: hidden; }
.mot-capo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-conic-gradient(#f7efe4 0 25%, #1d140d 0 50%) 0 0 / 20px 20px; opacity: .85; }
.mot-capo .eti { color: #ffa24d; } .mot-capo h1 { color: #fff !important; } .mot-capo .sotto { color: #dccdb8; }
.mot-prossimo { margin-top: 20px; padding: 18px; border-radius: 22px; background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff26; min-height: 210px; } .mot-prossimo p { margin: 0; }
.mot-prossimo-eti { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffa24d; } .mot-prossimo-eti b { color: #ffd97a; }
.mot-prossimo-nome { font: 700 clamp(24px, 4.4vw, 38px)/1.1 var(--tit); letter-spacing: -.02em; color: #fff; margin: 6px 0 2px !important; } .mot-prossimo-dove { color: #cdbfae; font-size: 15px; }
.mot-conto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0 10px; font-size: 13px; color: #cdbfae; } .mot-conto small { width: 100%; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; } .mot-conto span { display: inline-flex; align-items: baseline; gap: 4px; } .mot-conto b { font: 700 34px/1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; } .mot-conto a { color: #ffa24d; }
.mot-viva { color: #ff6b5a; font-weight: 700; font-size: 16px; animation: mot-batte 1.2s infinite; } @keyframes mot-batte { 50% { opacity: .45; } }
.mot-sessioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } @media (min-width: 700px) { .mot-sessioni { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } }
.mot-sessioni li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #ffffff0f; font-size: 14px; } .mot-sessioni li b { font-weight: 600; } .mot-sessioni li span { color: #cdbfae; white-space: nowrap; } .mot-sessioni li.fatta { opacity: .45; text-decoration: line-through; } .mot-sessioni li.prossima { background: #ff7a1a; color: #1d0f04; } .mot-sessioni li.prossima span { color: #1d0f04; }
@media (min-width: 700px) { .mot-sessioni li { flex-direction: column; gap: 0; } }
.mot-attesa { margin: 0; padding: 18px 4px; color: var(--muto); font-size: 15px; } .mot-capo .mot-attesa { color: #cdbfae; }
.mot-barra { position: sticky; top: 62px; z-index: 30; background: var(--testa); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.mot-barra-scorri { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: 0 -20px; padding-inline: 20px; } .mot-barra-scorri::-webkit-scrollbar { display: none; }
.mot-barra button { flex: none; padding: 9px 14px; min-height: 42px; border-radius: 999px; border: 1px solid var(--riga); background: var(--pan); font: 600 14px var(--tit); white-space: nowrap; } .mot-barra button[aria-selected="true"] { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.mot-scheda[hidden] { display: none !important; } .mot-scheda { animation: fr-entra .3s both; } @media (prefers-reduced-motion: reduce) { .mot-scheda { animation: none; } }
.mot-due { display: grid; gap: 16px; } @media (min-width: 960px) { .mot-due { grid-template-columns: 1fr 1fr; align-items: start; } }
.mot-riquadro { padding: 16px; border-radius: 24px; background: var(--pan); border: 1px solid var(--riga); box-shadow: 0 8px 24px #1d140d0f; min-width: 0; } .mot-riquadro-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .mot-riquadro h2 { font-size: 24px; } .mot-mini { margin: 0; } .mot-mini button { min-height: 36px !important; padding: 6px 12px; font-size: 13px; }
.mot-tabella { min-height: 320px; } .mot-lista { list-style: none; margin: 0; padding: 0; }
.mot-lista li { display: grid; grid-template-columns: 26px minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-left: 4px solid var(--t, #999); border-radius: 4px 10px 10px 4px; } .mot-lista li[hidden] { display: none; } .mot-lista li:nth-child(odd) { background: var(--velo); }
.mot-lista i { font: 700 14px var(--mono); font-style: normal; color: var(--muto); text-align: right; } .mot-lista li:nth-child(-n+3) i { color: var(--ink); }
.mot-nome { display: grid; min-width: 0; } .mot-nome b { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mot-nome small { font-size: 12px; color: var(--muto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mot-nome abbr { text-decoration: none; cursor: help; }
.mot-barretta { height: 6px; border-radius: 6px; background: var(--velo); overflow: hidden; } .mot-barretta u { display: block; height: 100%; border-radius: 6px; background: var(--t, var(--ar)); }
.mot-lista em { font: 700 15px var(--mono); font-style: normal; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; } .mot-lista.arrivo em { color: var(--eti); font-size: 13px; } .mot-tempo { font: 500 12.5px var(--mono); color: var(--muto); text-align: right; white-space: nowrap; }
@media (max-width: 520px) { .mot-lista li { grid-template-columns: 22px minmax(0, 1fr) auto; } .mot-barretta { display: none; } .mot-lista.arrivo li { grid-template-columns: 22px minmax(0, 1fr) auto auto; } .mot-tempo { font-size: 11.5px; } }
.mot-ultima-nome { margin: 0 0 10px; display: grid; } .mot-ultima-nome b { font-size: 18px; } .mot-ultima-nome small { color: var(--muto); font-size: 13px; } .mot-tutti { margin: 12px 0 0; }
.mot-quando { margin: 10px 0 0; } .mot-fonte { margin-top: 18px; max-width: 70ch; } .mot-intro { font-size: 18px; margin: 0 0 16px; max-width: 60ch; }
.mot-notizie { display: grid; gap: 10px; min-height: 300px; align-content: start; } @media (min-width: 800px) { .mot-notizie { grid-template-columns: 1fr 1fr; } }
.mot-notizia { display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--pan); border: 1px solid var(--riga); color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s; } @media (hover: hover) { .mot-notizia:hover { transform: translateY(-2px); border-color: var(--ar); } }
.mot-notizia-su { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muto); } .mot-notizia-su b { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--eti); } .mot-notizia-su i { font-style: normal; } .mot-notizia-su em { font-style: normal; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #1d140d; color: #fff; } .mot-notizia-su em.m { background: var(--petrolio); color: #06211e; } .mot-notizia-su time { margin-left: auto; }
.mot-notizia strong { font-size: 16.5px; line-height: 1.3; font-weight: 650; } .mot-notizia small { font-size: 12.5px; color: var(--muto); }
.mot-lezione { background: var(--pan); border: 1px solid var(--riga); border-radius: 18px; margin-bottom: 10px; overflow: hidden; } .mot-lezione summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px; font-size: 17px; } .mot-lezione summary::-webkit-details-marker { display: none; } .mot-lezione summary span { font-size: 24px; } .mot-lezione summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--muto); transition: transform .2s; } .mot-lezione[open] summary::after { transform: rotate(45deg); }
.mot-lezione > div { padding: 0 18px 16px; max-width: 72ch; } .mot-lezione p { margin: 0 0 10px; } .mot-lezione ul { margin: 0 0 10px; padding-left: 20px; } .mot-lezione li { margin-bottom: 6px; }
.mot-piloti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 300px; align-content: start; } @media (min-width: 760px) { .mot-piloti { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .mot-piloti { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mot-pilota { position: relative; padding: 14px 14px 12px; border-radius: 18px; background: var(--pan); border: 1px solid var(--riga); border-top: 5px solid var(--t, #999); overflow: hidden; min-width: 0; } .mot-pilota h3 { margin: 0; font-size: 16.5px; line-height: 1.2; padding-right: 44px; } .mot-pilota-sq { margin: 2px 0 10px; font-size: 12.5px; color: var(--muto); }
.mot-numero { position: absolute; right: 10px; top: 8px; font: 800 30px/1 var(--mono); color: var(--t, #999); opacity: .9; font-style: italic; }
.mot-pilota dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 8px; } .mot-pilota dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muto); } .mot-pilota dd { margin: 0; font: 700 16px var(--mono); } .mot-pilota > a { font: 600 13px var(--tit); color: var(--eti); text-decoration: none; }
.mot-calendario { display: grid; gap: 8px; min-height: 300px; align-content: start; }
.mot-gara { background: var(--pan); border: 1px solid var(--riga); border-radius: 18px; overflow: hidden; } .mot-gara.passata { opacity: .62; } .mot-gara.prossima { border-color: var(--ar); box-shadow: 0 8px 24px #ff7a1a26; }
.mot-gara summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .mot-gara summary::-webkit-details-marker { display: none; }
.mot-gara-data { flex: none; width: 50px; display: grid; justify-items: center; font: 600 11.5px var(--mono); text-transform: uppercase; color: var(--muto); } .mot-gara-data b { font: 800 22px/1 var(--tit); color: var(--ink); }
.mot-gara-nome { display: grid; min-width: 0; flex: 1; } .mot-gara-nome b { font-size: 16px; line-height: 1.25; } .mot-gara-nome small { font-size: 12.5px; color: var(--muto); }
.mot-gara summary em { flex: none; font: 700 11px var(--mono); font-style: normal; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--velo); } .mot-gara summary em.ora { background: var(--ar); color: #1d0f04; }
.mot-gara > div { padding: 0 14px 14px; } .mot-gara .mot-sessioni li { background: var(--velo); } .mot-gara .mot-sessioni li span { color: var(--muto); } .mot-gara-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } .mot-gara-azioni .bott { margin: 0; }
.mot-h { font-size: 24px; margin: 6px 0 12px; } .mot-link { display: grid; gap: 10px; margin-bottom: 24px; } @media (min-width: 700px) { .mot-link { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .mot-link { grid-template-columns: repeat(4, 1fr); } }
.mot-link a { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 18px; background: var(--pan); border: 1px solid var(--riga); color: var(--ink); text-decoration: none; } .mot-link a:hover { border-color: var(--ar); } .mot-link b { font-size: 16px; } .mot-link em { font: 700 10.5px var(--mono); font-style: normal; padding: 2px 6px; border-radius: 6px; background: var(--velo); color: var(--muto); vertical-align: middle; } .mot-link small { font-size: 13.5px; line-height: 1.4; color: var(--muto); } .mot-link i { font: 700 13px var(--tit); font-style: normal; color: var(--eti); }
.mot-avviso { margin: 34px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--velo); font-size: 13px; line-height: 1.5; color: var(--muto); }
/* i giochi dei motori */
.mot-giochi-scelta { grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .mot-giochi-scelta { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .mot-giochi-scelta { grid-template-columns: repeat(6, 1fr); max-width: none; } }
.mot-campo { max-width: 620px; margin: 0 auto; } .mot-area { min-height: 360px; background: #0f0b09; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 18px; touch-action: manipulation; } .mot-campo.attivo .mot-area { box-shadow: inset 0 0 0 2px #ff7a1a66; }
.mot-copertina { display: grid; justify-items: center; gap: 8px; color: #fff; } .mot-copertina span { font-size: 64px; line-height: 1; } .mot-copertina b { font-size: 22px; }
.mot-semaforo { cursor: pointer; } .mot-luci { display: flex; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #1b1512; box-shadow: inset 0 0 0 2px #3a2c22; } .mot-luci i { width: clamp(38px, 12vw, 58px); aspect-ratio: 1; border-radius: 50%; background: #2d1210; box-shadow: inset 0 0 0 3px #00000066; } .mot-luci i.on { background: #ff2a1a; box-shadow: 0 0 26px #ff2a1acc, inset 0 0 0 3px #ffffff33; }
.mot-tocca { margin: 0; font: 600 18px var(--tit); color: #cdbfae; text-align: center; } .mot-tocca b { font: 800 44px/1 var(--mono); color: #fff; display: block; } .mot-semaforo.via { background: #0c2a14; } .mot-semaforo.via .mot-tocca { color: #7dffa0; font-size: 30px; font-weight: 800; }
.mot-pit { display: grid !important; grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px 8px; align-items: center; justify-items: center; }
.mot-auto { grid-column: 2; grid-row: 1 / 3; width: 100%; max-width: 120px; height: 250px; position: relative; transition: transform .9s cubic-bezier(.5, 0, .9, .4); } .mot-auto::before { content: ""; position: absolute; left: 32%; right: 32%; top: 4%; bottom: 6%; border-radius: 40% 40% 18% 18% / 30% 30% 8% 8%; background: linear-gradient(#ff7a1a, #c2520a); } .mot-auto::after { content: ""; position: absolute; left: 4%; right: 4%; top: 2%; height: 7%; border-radius: 6px; background: #f7efe4; box-shadow: 0 218px 0 #f7efe4; } .mot-auto u { position: absolute; left: 39%; right: 39%; top: 42%; height: 16%; border-radius: 40%; background: #1d140d; }
.mot-pit.parti .mot-auto { transform: translateY(-140%); }
.mot-ruota { width: 100%; max-width: 150px; min-height: 84px; border-radius: 18px; border: 2px solid #ffffff33; background: #241b16; color: #fff; font: 700 15px var(--tit); touch-action: manipulation; } .mot-ruota.r0 { grid-column: 1; grid-row: 1; } .mot-ruota.r1 { grid-column: 3; grid-row: 1; } .mot-ruota.r2 { grid-column: 1; grid-row: 2; } .mot-ruota.r3 { grid-column: 3; grid-row: 2; } .mot-ruota.fatta { background: #14532d; border-color: #4ade80; font-size: 26px; } .mot-ruota.colpo { animation: mot-colpo .16s; } @keyframes mot-colpo { 50% { transform: scale(.93); } }
.mot-monta { justify-content: flex-end; } .mot-pila { list-style: none; margin: 0; padding: 0; width: min(100%, 340px); display: grid; gap: 4px; min-height: 60px; align-content: end; } .mot-pila li { padding: 8px 12px; border-radius: 10px; background: linear-gradient(#6b7280, #4b5563); color: #fff; text-align: center; font-size: 14px; animation: fr-entra .3s both; } .mot-pila li:nth-last-child(-n+1) { background: linear-gradient(#52525b, #3f3f46); } .mot-pila li:nth-child(-n+2):not(:nth-last-child(-n+5)) { background: linear-gradient(#ff9a4d, #e0600a); color: #1d0f04; }
.mot-pezzi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; } .mot-pezzi button { min-height: 50px; padding: 8px; border-radius: 14px; border: 1px solid #ffffff33; background: #241b16; color: #fff; font: 600 14.5px var(--tit); } .mot-pezzi button.no { animation: gc-no .4s; border-color: #ff6b5a; } .mot-monta.acceso .mot-pila { animation: mot-vibra .12s 10; } @keyframes mot-vibra { 50% { transform: translateX(2px); } }
.mot-quiz, .mot-testa { justify-content: flex-start; align-items: stretch; text-align: left; color: #f7efe4; gap: 12px; } .mot-quiz-n { margin: 0; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #ffa24d; } .mot-quiz-d { margin: 0; font: 700 20px/1.25 var(--tit); color: #fff; min-height: 2.5em; }
.mot-quiz-r { display: grid; gap: 8px; } .mot-quiz-r button { text-align: left; padding: 12px 14px; min-height: 50px; border-radius: 14px; border: 1px solid #ffffff33; background: #241b16; color: #fff; font: 500 15.5px/1.3 var(--tit); } .mot-quiz-r button.si, .mot-testa-due button.si { background: #14532d; border-color: #4ade80; } .mot-quiz-r button.no, .mot-testa-due button.no { background: #5a1a14; border-color: #ff6b5a; } .mot-quiz-r button:disabled { cursor: default; opacity: 1; }
.mot-quiz-s { margin: 0; font-size: 14.5px; line-height: 1.45; color: #e6dccd; } .mot-quiz-s[hidden] { display: none; } .mot-avanti { margin: 0; align-self: center; }
.mot-testa-due { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; } .mot-testa-due > i { align-self: center; font: 800 14px var(--mono); font-style: normal; color: #ffa24d; }
.mot-testa-due button { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 44px 12px 14px; min-height: 170px; border-radius: 18px; border: 1px solid #ffffff33; border-top: 6px solid var(--t, #999); background: #241b16; color: #fff; font: inherit; } .mot-testa-due button b { font-size: 16px; line-height: 1.2; } .mot-testa-due button small { font-size: 12.5px; color: #cdbfae; } .mot-testa-due button em { font: 700 16px var(--mono); font-style: normal; color: #ffd97a; margin-top: 6px; } .mot-testa-due button em[hidden] { display: none; } .mot-testa-due .mot-numero { left: 12px; right: auto; }
.gioco-pieno .mot-area { min-height: 0; }
/* 4.51 · il personaggio dei giochi da sala */
.sala-icone { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; } .sala-icone span { font: 600 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #b9aacb; margin-right: 4px; }
.sala-icone button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; border: 2px solid #ffffff26; background: #ffffff0f; font-size: 22px; line-height: 1; padding: 0; } .sala-icone button b { font: 800 15px var(--tit); color: #ff7a1a; background: #f7efe4; border-radius: 7px; padding: 4px 5px; } .sala-icone button[aria-pressed="true"] { border-color: #ff7a1a; background: #ff7a1a33; }
.gioco-pieno .sala-icone { margin-top: 6px; }
.mot-miei { min-height: 0; margin-bottom: 22px; } .mot-miei .mot-notizia { border-color: var(--ar); background: #fff7ea; }
/* 4.52 · i commenti di ogni Gran Premio */
.mot-parla { margin-top: 16px; } .mot-parla[hidden] { display: none; } .mot-parla select { font: 600 14px var(--tit); padding: 9px 12px; min-height: 42px; border-radius: 12px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); max-width: 100%; }
.mot-parla-voto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border-radius: 14px; background: var(--velo); font-size: 14px; } .mot-parla-media b { font: 800 20px var(--mono); } .mot-parla-voto a { font-weight: 700; color: var(--eti); }
.mot-stelle { display: inline-flex; align-items: center; gap: 2px; } .mot-stelle small { margin-right: 6px; color: var(--muto); } .mot-stelle button { border: 0; background: none; padding: 4px 3px; font-size: 26px; line-height: 1; color: #1d140d33; } .mot-stelle button.su { color: var(--ar); }
.mot-parla-form { display: grid; gap: 8px; margin-top: 12px; } .mot-parla-form[hidden] { display: none; } .mot-parla-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--riga); background: #fff; color: var(--ink); resize: vertical; } .mot-parla-form > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .mot-parla-form span { font: 500 12px var(--mono); color: var(--muto); } .mot-parla-form .bott { margin: 0; }
.mot-parla-esito { margin: 8px 0 0; min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--eti); }
.mot-parla-lista { display: grid; gap: 10px; margin: 4px 0 12px; }
.mot-commento { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 16px; background: var(--velo); } .mot-commento img { border-radius: 50%; } .mot-commento p { margin: 0; }
.mot-commento-su { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; } .mot-commento-su em { font: 700 10.5px var(--mono); font-style: normal; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--ar); color: #1d0f04; } .mot-commento-su time { margin-left: auto; color: var(--muto); font-size: 12px; }
.mot-commento-testo { margin: 4px 0 6px !important; font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; } .mot-commento-giu { display: flex; gap: 8px; } .mot-commento-giu button { border: 1px solid var(--riga); background: var(--pan); border-radius: 999px; padding: 5px 12px; min-height: 34px; font: 600 13px var(--tit); } .mot-commento-giu button.su { background: var(--ar); border-color: var(--ar); color: #1d0f04; } .mot-commento-giu button:disabled { opacity: .6; cursor: default; }
.t-motori { background: #e8002d; color: #fff; }

/* ——— 4.60 · MotoGP, Auto, gioco di guida, Arduino, sezioni coerenti ——— */
/* la barra in basso ora ha sei voci: Home, Articoli e le quattro passioni */
@media (max-width: 860px) { .barra-sezioni { grid-template-columns: repeat(6, 1fr) !important; padding-inline: 2px; } .barra-sezioni a { font-size: 10.5px; letter-spacing: -.01em; padding-inline: 0; white-space: nowrap; } }
@media (min-width: 700px) and (max-width: 1180px) { .barra-sezioni { grid-template-columns: repeat(6, 1fr) !important; width: min(760px, calc(100% - 120px)) !important; } .barra-sezioni a { font-size: 13px !important; gap: 6px !important; padding-inline: 2px !important; } }
.sala-icone button { width: 42px; height: 42px; } .sala-icone svg { display: block; }
.ing-porte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; } @media (min-width: 760px) { .ing-porte { grid-template-columns: repeat(4, 1fr); } }
.ing-porte a { display: grid; gap: 2px; padding: 14px; border-radius: 18px; background: var(--pan); box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink); text-decoration: none; } .ing-porte a:hover { box-shadow: inset 0 0 0 1.5px var(--ar); } .ing-porte span { font-size: 24px; line-height: 1.1; } .ing-porte b { font-size: 16px; } .ing-porte small { font-size: 12.5px; color: var(--muto); }
/* Motori: i due campionati */
.mot-serie { display: inline-flex; gap: 4px; padding: 4px; margin-top: 18px; border-radius: 999px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff26; } .mot-serie button { padding: 9px 16px; min-height: 42px; border-radius: 999px; border: 0; background: transparent; color: #f7efe4; font: 700 14.5px var(--tit); white-space: nowrap; } .mot-serie button.qui { background: #ff7a1a; color: #1d0f04; }
.mot-serie + .mot-prossimo { margin-top: 12px; }
.mot-podio { display: grid; gap: 8px; } .mot-podio > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; padding: 12px; border-radius: 14px; background: var(--velo); border-left: 5px solid var(--t, #999); } .mot-podio span { grid-row: 1 / 4; align-self: center; font: 800 26px var(--mono); } .mot-podio b { font-size: 17px; } .mot-podio small { font-size: 12.5px; color: var(--muto); } .mot-podio .p1 { background: #ffd97a40; }
.mot-gara-riga { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .mot-gara-riga em { flex: none; font: 700 11px var(--mono); font-style: normal; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ar); color: #1d0f04; }
.mot-dalgp-box { margin-top: 16px; } .mot-mini-bott { margin: 0 !important; padding: 8px 14px !important; min-height: 38px !important; font-size: 13.5px !important; }
.mot-dalgp { display: grid; gap: 6px; } @media (min-width: 900px) { .mot-dalgp { grid-template-columns: 1fr 1fr; } }
.mot-dalgp a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--velo); color: var(--ink); text-decoration: none; } .mot-dalgp a:hover { background: #ff7a1a22; } .mot-dalgp b { font-size: 15px; line-height: 1.3; font-weight: 600; } .mot-dalgp small { font-size: 12px; color: var(--muto); }
/* il gioco di guida */
.mot-guida { padding: 10px !important; gap: 10px !important; } #mot-tela { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 360 / 520; border-radius: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.mot-volante { display: flex; gap: 12px; width: 100%; max-width: 340px; } .mot-volante button { flex: 1; min-height: 56px; border-radius: 16px; border: 2px solid #ffffff33; background: #241b16; color: #fff; font-size: 24px; touch-action: none; user-select: none; -webkit-user-select: none; } .mot-volante button:active { background: #ff7a1a; color: #1d0f04; }
@media (hover: hover) and (pointer: fine) { .mot-volante { display: none; } }
.gioco-pieno #mot-tela { width: auto; max-width: 100%; height: 100%; max-height: calc(100% - 70px); }
.mot-giochi-scelta { grid-template-columns: repeat(2, 1fr) !important; } @media (min-width: 620px) { .mot-giochi-scelta { grid-template-columns: repeat(4, 1fr) !important; max-width: none; } } @media (min-width: 1100px) { .mot-giochi-scelta { grid-template-columns: repeat(7, 1fr) !important; } }
/* Auto */
.auto-domande { display: grid; gap: 4px; } @media (min-width: 1000px) { .auto-domande { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.auto-domande fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; } .auto-domande legend { font: 700 15.5px var(--tit); padding: 0; margin-bottom: 8px; } .auto-domande .oss-filtri { margin: 0; } .auto-domande .oss-filtri button { min-height: 40px; padding: 8px 13px; font-size: 13.5px; }
.auto-ritratto { margin: 22px 0 14px; padding: 18px; border-radius: 22px; background: linear-gradient(140deg, #1d140d, #47200a); color: #f7efe4; } .auto-ritratto .eti { color: #ffa24d; margin: 0 0 10px; } .auto-badge { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .auto-badge span { padding: 7px 12px; border-radius: 999px; background: #ffffff1c; box-shadow: inset 0 0 0 1px #ffffff33; font: 600 13.5px var(--tit); } .auto-badge span:first-child { background: #ff7a1a; color: #1d0f04; box-shadow: none; }
.auto-griglia { display: grid; gap: 12px; } @media (min-width: 640px) { .auto-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .auto-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.auto-scheda { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); box-shadow: 0 6px 18px #1d140d0d; min-width: 0; } .auto-scheda p, .auto-scheda h3, .auto-scheda ul { margin: 0; }
.auto-tipo { font: 600 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--eti); padding-right: 96px; } .auto-scheda h3 { font-size: 20px; font-weight: 500; } .auto-scheda h3 b { font-weight: 800; } .auto-prezzo { font-size: 14px; color: var(--muto); } .auto-prezzo b { font: 800 17px var(--mono); color: var(--ink); } .auto-nota { font-size: 14.5px; line-height: 1.4; }
.auto-pct { position: absolute; right: 12px; top: 12px; padding: 4px 9px; border-radius: 999px; background: #14532d; color: #fff; font: 700 12px var(--mono); }
.auto-chip { display: flex; flex-wrap: wrap; gap: 5px; } .auto-chip span { padding: 3px 8px; border-radius: 999px; background: var(--velo); font-size: 12px; font-weight: 600; white-space: nowrap; } .auto-chip .al-e { background: #46b9ab33; } .auto-chip .al-h, .auto-chip .al-p, .auto-chip .al-m { background: #ffc24740; }
.auto-perche { padding-left: 18px; font-size: 13.5px; line-height: 1.4; color: var(--ink2); } .auto-perche li { margin-bottom: 2px; }
.auto-link { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto !important; padding-top: 6px; font-size: 13px; font-weight: 700; } .auto-link a { color: var(--eti); text-decoration: none; padding: 4px 0; } .auto-link a:hover { text-decoration: underline; }
.auto-conf { align-self: flex-start; padding: 7px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--riga); background: transparent; font: 600 13px var(--tit); } .auto-conf.su { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.auto-filtri { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); } @media (min-width: 760px) { .auto-filtri { grid-template-columns: repeat(4, 1fr); } }
.auto-filtri label { display: grid; gap: 4px; font: 600 12.5px var(--tit); color: var(--muto); min-width: 0; } .auto-filtri select, .auto-filtri input[type="search"] { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--riga); background: #fff; color: var(--ink); font: 500 16px var(--tit); } .auto-filtri input[type="range"] { width: 100%; accent-color: var(--ar); min-height: 44px; } .auto-filtri output { color: var(--ink); font-family: var(--mono); }
.auto-filtri .auto-spunta { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 44px; color: var(--ink); font-size: 14px; } .auto-spunta input { width: 20px; height: 20px; accent-color: var(--ar); }
.auto-conta { margin: 12px 0 8px; font: 600 13px var(--mono); color: var(--muto); } .auto-conf-nota { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--velo); font-size: 14px; }
.auto-tab-scatola { margin-top: 20px; padding: 16px; border-radius: 22px; background: var(--pan); border: 2px solid var(--ar); } .auto-tab-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.auto-tab { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; } .auto-tab th, .auto-tab td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); } .auto-tab thead th { font-weight: 500; font-size: 13px; } .auto-tab thead b { font-size: 16px; } .auto-tab tbody th { font: 600 12px var(--mono); text-transform: uppercase; color: var(--muto); white-space: nowrap; } .auto-tab td.meglio { font-weight: 800; color: #14532d; }
.auto-consigli { padding: 16px 18px; border-radius: 20px; background: var(--velo); } .auto-consigli ol { margin: 0; padding-left: 20px; } .auto-consigli li { margin-bottom: 8px; line-height: 1.45; }
#auto-trova[hidden], #auto-cerca[hidden], #auto-compra[hidden] { display: none; }
/* Arduino */
.ard-lezioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 700px) { .ard-lezioni { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ard-lezioni button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); font: inherit; } .ard-lezioni span { font-size: 22px; line-height: 1.1; } .ard-lezioni b { font-size: 14.5px; line-height: 1.25; } .ard-lezioni small { font-size: 11.5px; color: var(--muto); } .ard-lezioni button.qui { background: var(--scuro); border-color: var(--scuro); color: #fff; } .ard-lezioni button.qui small { color: #cdbfae; }
.ard-banco { display: grid; gap: 14px; scroll-margin-top: 80px; } @media (min-width: 1000px) { .ard-banco { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.ard-colonna { display: grid; gap: 14px; min-width: 0; }
.ard-spiega { padding: 16px 18px; border-radius: 20px; background: #fff7ea; border: 1px solid var(--riga); } .ard-spiega .eti { margin: 0 0 4px; } .ard-spiega h3 { margin: 0 0 8px; font-size: 21px; } .ard-spiega p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; } .ard-spiega p:last-child { margin: 0; } .ard-prova { padding: 10px 12px; border-radius: 12px; background: #ff7a1a1f; }
.ard-editor, .ard-terminale { border-radius: 20px; overflow: hidden; background: #15100d; color: #f7efe4; box-shadow: 0 10px 28px #1d140d26; }
.ard-editor-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: #241b16; font: 600 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; } .ard-editor-testa button { border: 0; background: none; color: #ffa24d; font: 600 12.5px var(--tit); padding: 6px; }
.ard-stato { text-transform: none; letter-spacing: 0; font: 600 12.5px var(--tit); color: #cdbfae; text-align: right; } .ard-stato.bene { color: #7dffa0; } .ard-stato.male { color: #ff9c8f; }
#ard-codice { display: block; width: 100%; height: 380px; padding: 14px; border: 0; resize: vertical; background: #15100d; color: #f3e9da; font: 14px/1.55 var(--mono); tab-size: 2; white-space: pre; overflow: auto; outline: none; } @media (max-width: 700px) { #ard-codice { height: 300px; font-size: 16px; } }
.ard-comandi { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; } .ard-comandi .bott { margin: 0; min-height: 46px; } .ard-comandi [hidden] { display: none !important; } .ard-rosso { background: #e5392b !important; color: #fff !important; }
.ard-scheda { padding: 16px; border-radius: 20px; background: linear-gradient(160deg, #0c6b63, #094943); color: #eafffb; box-shadow: 0 10px 28px #1d140d26; display: grid; gap: 14px; }
.ard-scheda-nome { margin: 0; font: 800 16px var(--mono); letter-spacing: .08em; } .ard-scheda-nome small { font: 500 12px var(--tit); letter-spacing: 0; opacity: .75; margin-left: 6px; }
.ard-led-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .ard-led-fila > div, .ard-pezzo { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 11.5px; line-height: 1.3; } .ard-scheda b { font-family: var(--mono); font-weight: 700; } .ard-scheda em { font-style: normal; opacity: .8; }
.ard-led { --v: 0; --c: 80, 160, 255; width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--c), calc(.18 + var(--v) * .82)); box-shadow: inset 0 0 0 2px #00000040, 0 0 calc(var(--v) * 26px) rgba(var(--c), calc(var(--v) * .95)); transition: background .05s, box-shadow .05s; } .ard-led.rosso { --c: 255, 60, 45; } .ard-led.giallo { --c: 255, 205, 40; } .ard-led.verde { --c: 60, 230, 110; }
.ard-pezzi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: start; }
.ard-pulsante { width: 54px; height: 54px; border-radius: 50%; border: 5px solid #1b2a28; background: radial-gradient(circle at 35% 30%, #ff9a8f, #d92c1c); box-shadow: 0 5px 0 #0b2b28; touch-action: none; user-select: none; -webkit-user-select: none; } .ard-pulsante.giu { transform: translateY(4px); box-shadow: 0 1px 0 #0b2b28; }
.ard-cicalino { width: 48px; height: 48px; border-radius: 50%; background: #121a19; box-shadow: inset 0 0 0 5px #263a37; position: relative; } .ard-cicalino::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: #3d5551; } .ard-cicalino.on { animation: ard-suona .12s infinite; box-shadow: inset 0 0 0 5px #263a37, 0 0 0 5px #ffffff30; } @keyframes ard-suona { 50% { transform: scale(1.07); } }
.ard-servo { width: 60px; height: 34px; border-radius: 60px 60px 6px 6px; background: #121a19; position: relative; overflow: hidden; } .ard-servo i { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 27px; margin-left: -2px; border-radius: 3px; background: #ffb04d; transform-origin: 50% 100%; transform: rotate(-90deg); transition: transform .12s; }
.ard-cursore { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; } .ard-cursore input { grid-column: 1 / -1; width: 100%; accent-color: #ffb04d; min-height: 32px; } .ard-cursore output { font-family: var(--mono); font-weight: 700; } .ard-suono { display: flex; align-items: center; gap: 8px; font-size: 13px; } .ard-suono input { width: 18px; height: 18px; accent-color: #ffb04d; }
.ard-terminale-testo { height: 190px; overflow-y: auto; padding: 10px 14px; font: 13.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; } .ard-terminale-testo .tu { color: #ffa24d; }
#ard-manda { display: flex; gap: 6px; padding: 10px; background: #241b16; } #ard-invio { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid #ffffff26; background: #15100d; color: #fff; font: 16px var(--mono); } #ard-manda button { min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 0; background: #ff7a1a; color: #1d0f04; font: 700 14px var(--tit); }
.ard-info { margin-top: 22px; } .ard-info ol { margin: 0 0 10px; padding-left: 20px; } .ard-info li { margin-bottom: 6px; }
.ard-idea { display: grid; gap: 14px; align-items: center; margin-top: 18px; padding: 22px; border-radius: 24px; background: #1d140d; color: #f7efe4; } @media (min-width: 800px) { .ard-idea { grid-template-columns: 1fr auto; } } .ard-idea .eti { color: #ffa24d; margin: 0 0 4px; } .ard-idea h2 { color: #fff !important; font-size: 26px; margin: 0 0 6px; } .ard-idea p { margin: 0; color: #dccdb8; font-size: 15px; } .ard-idea .bott { margin: 0; }
/* circuito della settimana e tabellone tempi */
body.mot-moto .solo-f1 { display: none; } .mot-circuito-box, .mot-tempi-box { margin-top: 16px; } .mot-tempi-box.in-corso { border-color: #e5392b; box-shadow: 0 8px 28px #e5392b33; margin-top: 0; margin-bottom: 16px; }
.mot-pista-nome { margin: 0 0 10px; display: grid; } .mot-pista-nome b { font-size: 19px; } .mot-pista-nome small { color: var(--muto); font-size: 13px; }
.mot-pista-scatola { border-radius: 18px; background: radial-gradient(ellipse at 30% 20%, #2a1f17, #120d0a); padding: 10px; } .mot-pista { display: block; width: 100%; height: auto; max-height: 440px; }
.mot-pista polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 12; } .mot-pista .ombra { stroke: #000; stroke-width: 26; opacity: .55; } .mot-pista .s1 { stroke: #ff4d3d; } .mot-pista .s2 { stroke: #39c6ff; } .mot-pista .s3 { stroke: #ffd12e; }
.mot-pista .via circle { fill: #fff; stroke: #120d0a; stroke-width: 5; } .mot-pista .via text { fill: #fff; font: 800 30px var(--mono); } .mot-pista .auto { fill: #ff7a1a; stroke: #fff; stroke-width: 5; }
.mot-pista-giro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 6px 4px; color: #e6dccd; font-size: 14px; } .mot-pista-giro .bott { margin: 0; min-height: 44px; } .mot-pista-giro b { font: 800 20px var(--mono); color: #fff; }
.mot-pista-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; font: 600 13px var(--tit); } .mot-pista-legenda span::before { content: ""; display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; background: currentColor; } .mot-pista-legenda span { color: var(--ink); } .mot-pista-legenda .s1::before { background: #ff4d3d; } .mot-pista-legenda .s2::before { background: #39c6ff; } .mot-pista-legenda .s3::before { background: #ffd12e; }
.mot-pista-numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 12px; } @media (min-width: 760px) { .mot-pista-numeri { grid-template-columns: repeat(4, 1fr); } } .mot-pista-numeri > div { padding: 10px 12px; border-radius: 12px; background: var(--velo); } .mot-pista-numeri dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muto); } .mot-pista-numeri dd { margin: 2px 0 0; font: 700 17px var(--mono); }
.mot-riquadro h2 small { font: 500 13.5px var(--tit); letter-spacing: 0; color: var(--muto); margin-left: 6px; } .mot-tempi-stato { font-size: 13px; color: var(--muto); } .mot-tempi-avviso { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #ffc24733; font-size: 14px; }
.mot-tempi-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mot-tempi-tab { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mot-tempi-tab th { padding: 6px 8px; text-align: left; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muto); white-space: nowrap; } .mot-tempi-tab td { padding: 7px 8px; border-top: 1px solid var(--linea); white-space: nowrap; }
.mot-tempi-tab .p { width: 34px; font: 700 14px var(--mono); border-left: 4px solid var(--t, #999); } .mot-tempi-tab .n b { font: 700 14px var(--mono); margin-right: 8px; } .mot-tempi-tab .n span { color: var(--muto); font-size: 13px; } .mot-tempi-tab .g { font-family: var(--mono); font-size: 13px; } .mot-tempi-tab .s, .mot-tempi-tab .l { font-family: var(--mono); text-align: center; } .mot-tempi-tab tr.fuori { opacity: .55; }
.mot-tempi-tab .t i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--g); background: #1d140d; color: #fff; font: 800 10.5px var(--mono); font-style: normal; } .mot-tempi-tab .t small { margin-left: 5px; color: var(--muto); font-family: var(--mono); }
@media (max-width: 560px) { .mot-tempi-tab .n span, .mot-tempi-tab th:nth-child(6), .mot-tempi-tab .l { display: none; } .mot-tempi-tab td, .mot-tempi-tab th { padding-inline: 5px; } }
.mot-meteo { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .mot-meteo span { padding: 6px 11px; border-radius: 999px; background: var(--velo); font-size: 13px; font-weight: 600; }
.mot-rivivi { margin-top: 10px; border-radius: 14px; background: var(--velo); } .mot-rivivi summary { cursor: pointer; padding: 12px 14px; font: 700 15px var(--tit); list-style: none; } .mot-rivivi summary::-webkit-details-marker { display: none; } .mot-rivivi summary::after { content: " +"; color: var(--muto); } .mot-rivivi[open] summary::after { content: " –"; } .mot-rivivi > div, .mot-rivivi > ul, .mot-rivivi > p { margin: 0; padding: 0 12px 12px; }
.mot-grafico { display: block; width: 100%; min-width: 620px; height: auto; background: #15100d; border-radius: 12px; } .mot-grafico path { fill: none; stroke-width: 3.5; stroke-linejoin: round; opacity: .92; } .mot-grafico .asse { fill: #8c7d6c; font: 600 13px var(--mono); } .mot-grafico .sigla { font: 700 14px var(--mono); }
.mot-direzione { list-style: none; display: grid; gap: 6px; } .mot-direzione li { display: grid; grid-template-columns: 30px 1fr; gap: 6px; font-size: 13.5px; line-height: 1.35; } .mot-direzione p { margin: 0; } .mot-direzione small { display: block; color: var(--muto); font-size: 11.5px; }
/* 4.61 · le auto da strada hanno una pagina loro */
.auto-capo { background: linear-gradient(160deg, #10201d, #0c3a35 60%, #0f4b43); color: #eafffb; padding-bottom: 26px; } .auto-capo .eti { color: #7ee0d2; } .auto-capo h1 { color: #fff !important; } .auto-capo .sotto { color: #c6e6e0; }
.auto-vai-corse { margin: 16px 0 0; } .auto-vai-corse .bott, .auto-vai-corse .bott:hover, .auto-vai-corse .bott:focus, .auto-vai-corse .bott:active { margin: 0; background: #ff7a1a !important; color: #1d0f04 !important; box-shadow: none !important; } .auto-vai-corse .bott:hover { background: #ffa24d !important; }
.mot-vai-auto { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0 8px; padding: 9px 16px; min-height: 42px; border-radius: 999px; color: #f7efe4; text-decoration: none; font: 700 14.5px var(--tit); box-shadow: inset 0 0 0 1px #ffffff40; white-space: nowrap; vertical-align: top; } .mot-vai-auto:hover { background: #ffffff1c; } .mot-vai-auto i { font-style: normal; }
@media (max-width: 520px) { .mot-vai-auto { margin-left: 0; margin-top: 8px; } }
.auto-modi { margin-bottom: 18px; } #auto-notizie[hidden] { display: none; }
/* 4.63 · la colonnina del computer: stesse sezioni del telefono, più leggibile su ogni sfondo */
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .scia-pc { background: #fffaf3; border: 1px solid #1d140d2e; box-shadow: 0 12px 34px #1d140d38; gap: 2px; padding: 6px; }
  .scia-pc a, .scia-pc button { width: 42px; height: 40px; font-size: 20px; } .scia-pc span { filter: saturate(1.25) contrast(1.1); line-height: 1; }
  .scia-pc a[aria-current] { background: #ff7a1a; box-shadow: 0 4px 12px #ff7a1a55; } .scia-pc a[aria-current]:hover { background: #ff7a1a; }
  .scia-pc hr { width: 24px; height: 1px; margin: 3px auto; border: 0; background: #1d140d26; }
  .scia-pc button[data-fa="su"] span { font-weight: 800; font-size: 18px; }
}
@media (max-width: 420px) { .barra-sezioni a { font-size: 9.8px !important; } .barra-sezioni span { font-size: 20px; } }
/* 4.64 · Formula 1, MotoGP e Garage: tre pulsanti uguali, nella stessa riga */
.mot-serie { display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 100%; } .mot-serie button, .mot-serie a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; min-height: 44px; border-radius: 999px; border: 0; background: transparent; color: #f7efe4; font: 700 14.5px/1.1 var(--tit); white-space: nowrap; text-decoration: none; }
.mot-serie button.qui, .mot-serie a.qui { background: #ff7a1a; color: #1d0f04; } .mot-serie a:not(.qui):hover, .mot-serie button:not(.qui):hover { background: #ffffff1f; }
@media (max-width: 420px) { .mot-serie { display: grid; width: 100%; } .mot-serie button, .mot-serie a { padding-inline: 6px; font-size: 13.5px; } }
.auto-capo .mot-serie { margin-top: 16px; }
/* 4.65 · il questionario delle auto dà sempre una risposta, dichiarando i compromessi */
.auto-compromesso-nota { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #ffc24733; border: 1px solid #ffc24799; font-size: 14.5px; line-height: 1.45; }
.auto-comp { margin: 0; padding: 8px 10px 8px 28px; border-radius: 12px; background: #ffc2472e; font-size: 13.5px; line-height: 1.4; font-weight: 600; } .auto-comp li { margin-bottom: 2px; } .auto-comp::before { content: "Compromesso"; display: block; margin-left: -18px; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8a5a00; }
.auto-pct.quasi { background: #8a5a00; }
/* 4.66 · una riga che spiega cosa c'è in ogni parte */
.mot-serie button, .mot-serie a { flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: 22px; min-height: 56px; } .mot-serie { border-radius: 26px; } .mot-serie b { font-weight: 700; } .mot-serie small { font: 500 11.5px/1.2 var(--tit); opacity: .8; white-space: normal; text-align: center; }
@media (max-width: 520px) { .mot-serie { display: grid; width: 100%; } .mot-serie small { font-size: 10.5px; } .mot-serie button, .mot-serie a { padding-inline: 4px; } .mot-serie b { font-size: 13.5px; } }
.auto-modo-descr { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--ar); border-radius: 4px 12px 12px 4px; background: var(--velo); font-size: 15px; line-height: 1.45; color: var(--ink2); max-width: 78ch; } .auto-modo-descr:empty { display: none; }
/* 4.70 · le notizie dal mondo in fondo a ogni sezione */
.sf-notizie-sez { border-top: 1px solid var(--linea); } .sf-notizie-eti { margin: 0 0 8px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--eti); }
.sf-notizie .mot-notizie { min-height: 0; } .sf-notizie-lista { margin-bottom: 12px; } .sf-notizie-tutte { margin: 0; } .sf-notizie-tutte[hidden] { display: none; }
.sf-notizie-filtri { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 2px 20px 6px; } .sf-notizie-filtri::-webkit-scrollbar { display: none; } .sf-notizie-filtri button { flex: none; white-space: nowrap; }
@media (min-width: 760px) { .sf-notizie-filtri { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0 0 6px; } }
.cielo .sf-notizie-sez, .sf-notizie-sez.cielo { color: var(--ink); }
/* 4.71 · "Dimmi la tua": il sondaggio sui progetti, e le figure del racconto di SF Dress */
.dress-figura { margin: 22px 0; } .dress-figura img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--riga); box-shadow: 0 10px 28px #1d140d14; } .dress-figura.stretta img { max-width: 460px; } .dress-figura figcaption { margin-top: 8px; font-size: 14px; color: var(--muto); line-height: 1.4; }
.parere { margin: 34px 0 10px; padding: 22px; border-radius: 26px; background: #1d140d; color: #f7efe4; scroll-margin-top: 90px; } .parere .eti { color: #ffa24d; margin: 0 0 4px; } .parere h2 { color: #fff !important; font-size: clamp(24px, 4vw, 32px); margin: 0 0 6px; } .parere-sotto { margin: 0 0 18px; color: #dccdb8; font-size: 15.5px; line-height: 1.5; }
.parere-domanda { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; display: grid; gap: 8px; } .parere-domanda legend { padding: 0; margin-bottom: 8px; font: 700 16.5px var(--tit); color: #fff; }
.parere-domanda button { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff0d; color: #fff; font: 500 15.5px/1.3 var(--tit); text-align: left; }
.parere-domanda button b { position: relative; font-weight: 600; } .parere-domanda button em { position: relative; font: 700 14px var(--mono); font-style: normal; color: #ffd97a; flex: none; } .parere-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffffff1f; transition: width .5s ease; }
.parere-domanda button[aria-pressed="true"] { border-color: #ff7a1a; box-shadow: inset 0 0 0 1px #ff7a1a; } .parere-domanda button[aria-pressed="true"] .parere-barra { background: #ff7a1a66; } @media (hover: hover) { .parere-domanda button:hover { border-color: #ffa24d; } }
.parere-conta { margin: 0 0 18px; min-height: 1.4em; font-size: 14px; color: #ffd97a; }
.parere-scrivi { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid #ffffff26; } .parere-scrivi label { font: 700 16px var(--tit); color: #fff; } .parere-scrivi textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid #ffffff33; background: #ffffff12; color: #fff; font: 16px/1.45 var(--tit); resize: vertical; } .parere-scrivi textarea::placeholder { color: #b3a391; }
.parere-scrivi > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .parere-scrivi span { font-size: 12.5px; color: #b3a391; } .parere-scrivi .bott { margin: 0; } .parere-esito { margin: 0; min-height: 1.3em; font-size: 14px; font-weight: 600; color: #7dffa0; }
.parere-testi { margin-top: 16px; padding: 14px; border-radius: 14px; background: #ffffff12; } .parere-testi[hidden] { display: none; } .parere-testi p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; } .parere-testi small { color: #b3a391; }
/* 4.73 · la scheda interattiva dei piloti */
.mot-pilota { cursor: pointer; transition: transform .15s, box-shadow .15s; } @media (hover: hover) { .mot-pilota:hover { transform: translateY(-3px); box-shadow: 0 12px 26px #1d140d1f; } }
.mot-apri-scheda { border: 0; background: none; padding: 4px 0; font: 700 13px var(--tit); color: var(--eti); } .mot-apri-scheda i { font-style: normal; }
.mot-lista li[data-pil] { cursor: pointer; } .mot-lista li[data-pil]:hover { background: #ff7a1a1c; }
html.msp-aperta { overflow: hidden; }
.mot-scheda-pilota { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: #0b0806b8; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .mot-scheda-pilota[hidden] { display: none; }
.msp-scatola { position: relative; width: min(700px, 100%); max-height: min(92vh, 940px); overflow-y: auto; overscroll-behavior: contain; border-radius: 26px; background: var(--bg); border-top: 8px solid var(--t, var(--ar)); box-shadow: 0 30px 80px #000a; animation: fr-entra .25s both; }
@media (max-width: 600px) { .mot-scheda-pilota { padding: 0; place-items: end center; } .msp-scatola { width: 100%; max-height: 94vh; border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom); } }
.msp-chiudi { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--riga); background: var(--pan); font-size: 18px; }
.msp-corpo { padding: 20px; } .msp-testa { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.msp-foto { flex: none; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--t, var(--ar)); box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--t, var(--ar)); } .msp-foto span { font: 800 34px var(--tit); color: #fff; mix-blend-mode: difference; } .msp-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; } @media (max-width: 420px) { .msp-foto { width: 84px; height: 84px; } }
.msp-chi { min-width: 0; padding-right: 40px; } .msp-testa h2 { font-size: clamp(23px, 5vw, 34px); margin: 0; } .msp-squadra { margin: 0; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--eti); } .msp-sotto { margin: 4px 0 0; font-size: 14.5px; color: var(--muto); } .msp-sotto b { font: italic 800 17px var(--mono); color: var(--ink); }
.msp-bio p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; } .msp-bio .msp-fonte { font-size: 12px; color: var(--muto); margin-bottom: 14px; } .msp-bio:empty { display: none; }
.msp-numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; } @media (min-width: 520px) { .msp-numeri { grid-template-columns: repeat(3, minmax(0, 1fr)); } .msp-numeri.primo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.msp-numeri > div { padding: 10px 12px; border-radius: 14px; background: var(--pan); border: 1px solid var(--riga); min-width: 0; } .msp-numeri.primo > div { background: #1d140d; border-color: #1d140d; color: #fff; } .msp-numeri dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muto); } .msp-numeri.primo dt { color: #cdbfae; } .msp-numeri dd { margin: 2px 0 0; font: 800 22px/1.1 var(--mono); overflow-wrap: anywhere; } .msp-numeri small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muto); } .msp-numeri.primo small { color: #ffd97a; }
.msp-blocco { margin-top: 18px; } .msp-blocco h3 { margin: 0 0 10px; font-size: 19px; } .msp-guida { margin: 4px 0 6px; font-size: 13px; color: var(--muto); }
.msp-grafico { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 8px; border-radius: 14px; background: #15100d; overflow-x: auto; }
.msp-grafico button { flex: 1 0 18px; min-width: 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; padding: 0; border: 0; background: none; color: #cdbfae; } .msp-grafico span { display: block; border-radius: 5px 5px 2px 2px; background: var(--t, #ff7a1a); opacity: .75; min-height: 4px; } .msp-grafico b { font: 700 11px var(--mono); text-align: center; }
.msp-grafico .oro span { background: #ffd12e; opacity: 1; } .msp-grafico .podio span { opacity: 1; } .msp-grafico .fuori span { background: #5a4a3e; } .msp-grafico .fuori b { color: #ff9c8f; } .msp-grafico button.qui span { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; } .msp-grafico button.qui b { color: #fff; }
.msp-gara { margin: 8px 0 0; min-height: 2.9em; padding: 10px 12px; border-radius: 12px; background: var(--velo); font-size: 14.5px; line-height: 1.4; } .msp-esito { margin: 8px 0 0; font-size: 14.5px; color: var(--ink2); }
.msp-contro { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 17px; } .msp-contro span { font-size: 12px; color: var(--muto); }
.msp-duello { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 15px var(--mono); } .msp-duello > span:last-child { text-align: right; } .msp-duello b { display: block; text-align: center; font: 600 11.5px var(--tit); text-transform: uppercase; letter-spacing: .04em; color: var(--muto); margin-bottom: 3px; } .msp-duello i { display: flex; height: 10px; border-radius: 10px; overflow: hidden; background: var(--velo); gap: 2px; } .msp-duello u { display: block; height: 100%; }
#msp-scegli { width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--riga); background: #fff; color: var(--ink); font: 500 16px var(--tit); margin-bottom: 10px; }
/* 4.74 · i titoli mondiali */
.mot-coppe { margin: -4px 0 8px; font-size: 13px; font-weight: 600; } .mot-coppe b { font: 800 15px var(--mono); } .mot-coppe em { font-style: normal; color: var(--eti); }
.mot-coppa { text-decoration: none; font: 700 12px var(--mono); padding: 1px 6px; border-radius: 999px; background: #ffd97a66; margin-left: 4px; cursor: help; white-space: nowrap; }
.msp-mondiali { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--velo); } .msp-mondiali > span { font-size: 30px; line-height: 1; filter: grayscale(1); opacity: .45; } .msp-mondiali b { display: block; font-size: 17px; } .msp-mondiali small { display: block; font-size: 13px; color: var(--muto); line-height: 1.4; }
.msp-mondiali.si { background: linear-gradient(120deg, #ffd12e, #ffb300); color: #2a1a00; box-shadow: 0 8px 22px #ffb30040; } .msp-mondiali.si > span { filter: none; opacity: 1; font-size: 38px; } .msp-mondiali.si b { font-size: 22px; } .msp-mondiali.si small { color: #4a3200; font: 700 13.5px var(--mono); }
/* 4.75 · Corse e Garage come due mondi, pulsanti grandi, supercar */
.mot-mondi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.mot-mondi a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: #f7efe4; background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff2e; transition: background .15s, transform .15s; }
.mot-mondi a > span { grid-row: 1 / 3; font-size: 34px; line-height: 1; } .mot-mondi b { font-size: 21px; letter-spacing: -.01em; } .mot-mondi small { font-size: 13px; line-height: 1.35; opacity: .82; }
.mot-mondi a.qui { background: #ff7a1a; color: #1d0f04; box-shadow: 0 10px 26px #ff7a1a40; } @media (hover: hover) { .mot-mondi a:not(.qui):hover { background: #ffffff24; transform: translateY(-2px); } }
@media (max-width: 600px) { .mot-mondi a { grid-template-columns: 1fr; row-gap: 2px; padding: 12px; } .mot-mondi a > span { grid-row: auto; font-size: 28px; } .mot-mondi b { font-size: 18px; } .mot-mondi small { font-size: 12px; } }
.mot-serie.due { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 620px; margin-top: 12px; padding: 5px; border-radius: 22px; } .mot-serie.due button { min-height: 64px; border-radius: 18px; } .mot-serie.due b { font-size: 17px; } .mot-serie.due small { font-size: 12.5px; }
.auto-modi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } @media (min-width: 700px) { .auto-modi { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1040px) { .auto-modi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.auto-modi button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 14px; min-height: 96px; align-content: start; border-radius: 18px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); font: inherit; box-shadow: 0 6px 18px #1d140d0d; } .auto-modi button > span { font-size: 26px; line-height: 1.1; } .auto-modi b { font-size: 16px; line-height: 1.2; } .auto-modi small { font-size: 12.5px; line-height: 1.3; color: var(--muto); }
.auto-modi button.qui { background: var(--scuro); border-color: var(--scuro); color: #fff; } .auto-modi button.qui small { color: #cdbfae; } 
#auto-supercar[hidden] { display: none; }
.sc-griglia { display: grid; gap: 12px; margin-bottom: 8px; } @media (min-width: 620px) { .sc-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .sc-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-carta { display: grid; padding: 0; border: 1px solid var(--riga); border-radius: 22px; overflow: hidden; background: var(--pan); color: var(--ink); font: inherit; text-align: left; box-shadow: 0 8px 22px #1d140d12; transition: transform .15s, box-shadow .15s; } @media (hover: hover) { .sc-carta:hover { transform: translateY(-4px); box-shadow: 0 16px 34px #1d140d26; } }
.sc-foto { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(140deg, #2a1f17, #120d0a); overflow: hidden; } .sc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-posto, .sc-dato { position: absolute; top: 10px; font-style: normal; padding: 4px 10px; border-radius: 999px; font: 800 13px var(--mono); } .sc-posto { left: 10px; background: #1d140dd9; color: #fff; } .sc-dato { right: 10px; background: #ff7a1a; color: #1d0f04; }
.sc-testo { display: grid; gap: 4px; padding: 14px 16px 16px; } .sc-testo > small { font: 600 11.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--eti); } .sc-testo > b { font-size: 20px; line-height: 1.15; } .sc-testo em { font: 700 13px var(--tit); font-style: normal; color: var(--eti); margin-top: 4px; }
.sc-numeri { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muto); } .sc-numeri b { font: 800 15px var(--mono); color: var(--ink); }
.sc-scheda .msp-scatola { width: min(860px, 100%); border-top-color: var(--ar); } .sc-titolo { font-size: clamp(26px, 5vw, 40px); margin: 0 44px 12px 0; }
.sc-grande { position: relative; border-radius: 18px; overflow: hidden; background: #120d0a; aspect-ratio: 16 / 10; display: grid; place-items: center; } .sc-grande img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sc-avanti, .sc-indietro { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: #1d140dcc; color: #fff; font-size: 28px; line-height: 1; } .sc-avanti { right: 8px; } .sc-indietro { left: 8px; } .sc-conta { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #1d140dcc; color: #fff; font: 700 12px var(--mono); }
.sc-credito { margin: 6px 0 8px; font-size: 12px; color: var(--muto); min-height: 1.4em; } .sc-quali { margin: 0 0 8px; } .sc-quali button { min-height: 38px !important; padding: 6px 12px; font-size: 13px; }
.sc-miniature { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; } .sc-miniature button { flex: none; width: 92px; height: 60px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #120d0a; opacity: .7; } .sc-miniature button.qui { border-color: var(--ar); opacity: 1; } .sc-miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piccolo-dd { font-size: 16px !important; } .sc-vnota { margin: 0 0 4px; font-size: 13.5px; color: var(--muto); } .sc-comefatta { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
.sc-tecnica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } .sc-tecnica > div { padding: 10px 12px; border-radius: 12px; background: var(--velo); } .sc-tecnica dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muto); } .sc-tecnica dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sc-barra { margin-bottom: 12px; } .sc-barra p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 14.5px; } .sc-barra p span { font: 700 14.5px var(--mono); } .sc-barra i { display: block; height: 12px; border-radius: 12px; background: var(--velo); overflow: hidden; } .sc-barra u { display: block; height: 100%; border-radius: 12px; background: linear-gradient(90deg, #ffb04d, #ff7a1a); } .sc-barra small { font-size: 12px; color: var(--muto); }
/* 4.76 · il Museo Ferrari nel Garage */
#auto-museo[hidden] { display: none; } .museo-testa h2 { font-size: clamp(26px, 4.4vw, 40px); margin: 0 0 8px; } .museo-testa .mot-gara-azioni { margin: 14px 0 20px; }
.museo-galleria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px; margin-bottom: 8px; } @media (min-width: 700px) { .museo-galleria { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1040px) { .museo-galleria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.museo-galleria button { padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #120d0a; aspect-ratio: 3 / 4; cursor: zoom-in; } .museo-galleria button.larga { grid-column: span 2; aspect-ratio: 8 / 3; } @media (max-width: 699px) { .museo-galleria button.larga { aspect-ratio: 16 / 9; } }
.museo-galleria img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } @media (hover: hover) { .museo-galleria button:hover img { transform: scale(1.04); } }
.museo-racconto { margin: 22px 0; padding: 20px; border-radius: 22px; background: #fff7ea; border: 1px solid var(--riga); max-width: 78ch; } .museo-racconto .mot-h { margin-top: 0; } .museo-racconto p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; } .museo-racconto p:last-child { margin: 0; }
.museo-due { display: grid; gap: 4px 28px; } @media (min-width: 860px) { .museo-due { grid-template-columns: 1fr 1fr; } } .museo-due p { margin: 0 0 10px; line-height: 1.6; }
.museo-passi { margin: 0 0 6px; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 8px; } @media (min-width: 860px) { .museo-passi { grid-template-columns: 1fr 1fr; } } .museo-passi li { counter-increment: passo; position: relative; padding: 12px 14px 12px 52px; border-radius: 14px; background: var(--pan); border: 1px solid var(--riga); line-height: 1.5; font-size: 15.5px; } .museo-passi li::before { content: counter(passo); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e8002d; color: #fff; font: 800 14px var(--mono); }
.museo-intorno { margin-bottom: 14px; } .museo-idea { margin: 0 0 8px; padding: 14px 16px; border-left: 4px solid #e8002d; border-radius: 4px 14px 14px 4px; background: var(--velo); line-height: 1.55; max-width: 80ch; }
.museo-visore { position: fixed; inset: 0; z-index: 210; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 12px; background: #0b0806f2; } .museo-visore[hidden] { display: none; } .museo-visore img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 10px; } .museo-visore p { margin: 8px 0 0; color: #f7efe4; font-size: 14px; text-align: center; max-width: 70ch; } .museo-visore .msp-chiudi { position: absolute; top: 12px; right: 12px; margin: 0; float: none; }
/* 4.77 · lo spazio riservato Cavalli */
.cavalli-scorciatoia { position: fixed; left: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 60; padding: 10px 14px; border-radius: 999px; background: #2f4a2c; color: #fff; text-decoration: none; font: 700 13.5px var(--tit); box-shadow: 0 8px 22px #1d140d40; } @media (min-width: 1181px) { .cavalli-scorciatoia { bottom: 18px; } } @media print { .cavalli-scorciatoia { display: none; } }
.cav-capo { background: linear-gradient(160deg, #1f2a1c, #2f4a2c 60%, #4a6a3c); color: #f3f7ee; padding-bottom: 28px; } .cav-capo .eti { color: #c9e3a8; } .cav-capo h1 { color: #fff !important; } .cav-capo .sotto { color: #dbe8cf; }
.cav-scheda[hidden] { display: none; } .cav-corpo .sf-notizie-sez { border-top: 0; }
.cav-cerca input, .cav-annunci input, .cav-annunci select, .cav-strumento input, .cav-strumento select, .cav-modulo input, .cav-modulo select, .cav-costi input, .cav-cerca-tutto input, .cav-admin input[type="email"], .cav-admin input[type="text"] { width: 100%; min-height: 46px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--riga); background: #fff; color: var(--ink); font: 500 16px var(--tit); } .cav-cerca { margin-bottom: 10px; }
.cav-salto { padding: 10px !important; } #cav-tela { display: block; width: 100%; max-width: 480px; height: auto; aspect-ratio: 360 / 300; border-radius: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.cav-admin { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: #fff7ea; border: 1px solid var(--riga); margin: 12px 0; max-width: 560px; } .cav-admin .eti { margin: 0; } .cav-admin .bott { margin: 0; justify-self: start; } .cav-admin-esito { margin: 0; font-size: 14px; font-weight: 600; } .cav-spunta { display: flex !important; align-items: flex-start; gap: 8px; font-size: 14px !important; color: var(--ink) !important; } .cav-spunta input { width: 20px; height: 20px; flex: none; accent-color: var(--ar); }
.cav-admin-note { max-width: 560px; padding-left: 20px; font-size: 14.5px; line-height: 1.5; } .cav-admin-sopra { padding-top: 10px; } .cav-admin-sopra summary { cursor: pointer; font: 600 13.5px var(--tit); color: var(--muto); padding: 6px 0; }
/* 4.78 · Cavalli rifatto: ricerca, oggi, video nel sito, gare, razze con foto, programmi della scuderia, impara, quattro giochi */
.cav-capo .bott, .cav-capo .bott.due, .cav-capo .bott:hover, .cav-capo .bott.due:hover { background: #ffffff24; color: #fff; box-shadow: inset 0 0 0 1px #ffffff55; } .cav-capo .bott:hover, .cav-capo .bott.due:hover { background: #ffffff3d; }
.cav-cerca-tutto { position: relative; margin-top: 18px; max-width: 640px; } .cav-cerca-tutto input { min-height: 52px; border-radius: 16px; border-color: transparent; box-shadow: 0 10px 30px #0004; }
.cav-tutto-esiti { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 18px 50px #0006; max-height: min(60vh, 420px); overflow-y: auto; } .cav-tutto-esiti[hidden] { display: none; } .cav-tutto-esiti p { margin: 0; padding: 12px; font-size: 15px; color: var(--muto); }
.cav-tutto-esiti button { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; min-height: 48px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; cursor: pointer; } .cav-tutto-esiti button:hover, .cav-tutto-esiti button:focus-visible { background: #2f4a2c1a; } .cav-tutto-esiti span { grid-row: span 2; font-size: 22px; text-align: center; } .cav-tutto-esiti b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cav-tutto-esiti small { font-size: 12.5px; color: var(--muto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cav-diretta-ora { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; margin-bottom: 12px; border-radius: 18px; background: #1d140d; color: #fff; } .cav-diretta-ora[hidden] { display: none; } .cav-diretta-ora p { margin: 0; flex: 1 1 200px; font-size: 15px; } .cav-diretta-ora .bott { margin: 0; }
.cav-nastro { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; margin-bottom: 14px; border-radius: 999px; background: var(--pan); border: 1px solid var(--riga); min-height: 50px; } .cav-nastro-eti { flex: none; font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #c2260d; }
.cav-nastro button { flex: 1; min-width: 0; min-height: 34px; padding: 0 8px; border: 0; background: none; color: var(--ink); font: 500 14.5px/1.3 var(--tit); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cav-nastro button.entra { animation: cav-entra .45s both; } .cav-nastro button b { color: #2f4a2c; margin-right: 4px; } .cav-nastro button small { color: var(--muto); margin-left: 4px; } @keyframes cav-entra { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 600px) { .cav-nastro { border-radius: 18px; align-items: flex-start; padding: 10px 12px; flex-direction: column; gap: 2px; } .cav-nastro button { white-space: normal; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width: 100%; } }
.cav-oggi { display: grid; gap: 12px; margin-bottom: 8px; } @media (min-width: 900px) { .cav-oggi { grid-template-columns: 1fr 1.25fr; } }
.cav-oggi-carta { padding: 16px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); } .cav-oggi-carta:empty { display: none; } .cav-oggi-carta h3 { margin: 2px 0 2px; font-size: 21px; } .cav-oggi-carta p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; } .cav-oggi-carta .eti { margin: 0; } .cav-oggi-carta .bott { margin: 4px 0 0; } .cav-dove { color: var(--muto); }
#cav-cavallo-giorno { display: grid; gap: 12px; align-items: start; } #cav-cavallo-giorno img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: #e9dfcf; } @media (min-width: 560px) { #cav-cavallo-giorno:has(img) { grid-template-columns: 42% 1fr; } #cav-cavallo-giorno img { aspect-ratio: 1; height: 100%; max-height: 240px; } }
.cav-porte, .cav-programmi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (min-width: 760px) { .cav-porte, .cav-programmi { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
.cav-porte button, .cav-programmi button, .cav-disciplina { display: grid; gap: 2px; align-content: start; text-align: left; padding: 14px; border-radius: 18px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; } .cav-porte span, .cav-programmi span, .cav-disciplina span { font-size: 28px; line-height: 1.1; } .cav-porte b, .cav-programmi b, .cav-disciplina b { font-size: 16px; } .cav-porte small, .cav-programmi small, .cav-disciplina small { font-size: 12.5px; line-height: 1.35; color: var(--muto); }
@media (hover: hover) { .cav-porte button:hover, .cav-programmi button:hover, .cav-disciplina:hover, .cav-razza:hover, .cav-canali button:hover { transform: translateY(-2px); border-color: #4a6a3c; } }
.cav-programmi button.qui { background: #2f4a2c; border-color: #2f4a2c; color: #fff; } .cav-programmi button.qui small { color: #dbe8cf; }
.cav-canali { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (min-width: 900px) { .cav-canali { grid-template-columns: repeat(4, 1fr); } }
.cav-canali button { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; } .cav-canali b { font-size: 15px; } .cav-canali em { font: 700 10px var(--mono); font-style: normal; padding: 2px 5px; border-radius: 6px; background: var(--velo); vertical-align: middle; } .cav-canali small { font-size: 12.5px; line-height: 1.35; color: var(--muto); } .cav-canali i { font: 700 11px var(--mono); font-style: normal; color: #c2260d; } .cav-canali i.no { color: #2f4a2c; }
.cav-canali button.diretta { border-color: #e5392b; box-shadow: 0 0 0 2px #e5392b33; } .cav-canali button.qui { background: #2f4a2c; border-color: #2f4a2c; color: #fff; } .cav-canali button.qui small, .cav-canali button.qui i.no { color: #dbe8cf; } .cav-canali button.qui em { background: #ffffff26; } .cav-canali button.qui i { color: #ffb4a8; }
@media (max-width: 600px) { .cav-canali small { display: none; } }
.cav-schermo { aspect-ratio: 16 / 9; max-width: 980px; margin: 14px auto 8px; border-radius: 18px; overflow: hidden; background: #0f0b09; } .cav-schermo iframe { display: block; width: 100%; height: 100%; border: 0; } .cav-schermo-vuoto { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: #cdbfae; text-align: center; padding: 16px; } .cav-schermo-vuoto span { font-size: 54px; } .cav-schermo-vuoto p { margin: 0; }
.cav-schermo-nota { max-width: 980px; margin: 0 auto 14px; font-size: 14.5px; line-height: 1.5; } .cav-schermo-nota:empty { display: none; } .cav-chiudi-video, .cav-vai-prog { border: 1px solid var(--riga); background: var(--pan); border-radius: 999px; min-height: 34px; padding: 4px 12px; font: 600 13px var(--tit); color: var(--ink); cursor: pointer; }
.cav-sotto { margin-bottom: 14px; }
.cav-eventi { display: grid; gap: 10px; align-items: start; } @media (min-width: 900px) { .cav-eventi { grid-template-columns: 1fr 1fr; } }
.cav-evento { border-radius: 18px; background: var(--pan); border: 1px solid var(--riga); overflow: hidden; } .cav-evento.ora { border-color: #4a6a3c; box-shadow: 0 8px 22px #4a6a3c33; } .cav-evento summary { display: grid; grid-template-columns: 58px 1fr 18px; gap: 12px; align-items: center; padding: 12px 14px; list-style: none; cursor: pointer; } .cav-evento summary::-webkit-details-marker { display: none; } .cav-evento summary::after { content: "＋"; color: var(--muto); font-weight: 700; } .cav-evento[open] summary::after { content: "－"; }
.cav-mese { display: grid; place-items: center; min-height: 58px; border-radius: 14px; background: #2f4a2c; color: #fff; font: 800 14px/1.1 var(--mono); text-transform: uppercase; text-align: center; padding: 4px; } .cav-ev-testa { display: grid; gap: 2px; min-width: 0; } .cav-ev-testa b { font-size: 17px; line-height: 1.25; } .cav-ev-testa small { font-size: 13.5px; color: var(--muto); }
.cav-evento > div { padding: 0 14px 14px; } .cav-evento > div p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; } .cav-ev-piu { padding: 10px 12px; border-radius: 12px; background: #2f4a2c12; }
.cav-disc { font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #2f4a2c; } .cav-disc.d-galoppo { color: #b84c08; } .cav-disc.d-trotto { color: #1e56c8; } .cav-disc.d-tradizione { color: #a3122b; } .cav-disc.d-completo { color: #6a3f9c; }
.cav-discipline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (min-width: 760px) { .cav-discipline { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .cav-discipline { grid-template-columns: repeat(4, 1fr); } } .cav-disciplina i { font: 700 12.5px var(--tit); font-style: normal; color: var(--eti); margin-top: 4px; }
.cav-finestra .msp-scatola { border-top-color: #2f4a2c; } .cav-finestra h3 { margin: 16px 0 4px; font-size: 17px; } .cav-finestra .msp-corpo > p { margin: 0 0 10px; line-height: 1.5; } .cav-ant-titolo { font-size: clamp(22px, 4.6vw, 32px); line-height: 1.15; margin: 4px 48px 10px 0; } .cav-ant-testo { font-size: 16.5px; } .cav-ant-testo.vuota { color: var(--muto); } .cav-disc-simbolo { font-size: 48px; line-height: 1; margin: 0 0 6px !important; }
.cav-rz-foto { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 16px; margin-bottom: 12px; background: #e9dfcf; } .cav-finestra .msp-numeri dd.piccolo-dd { margin: 2px 0 0; font: 600 15px/1.35 var(--tit); } .cav-finestra .msp-numeri dd small { font-weight: 500; color: var(--muto); } .cav-stella { font-size: .7em; }
.cav-annunci { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); margin-bottom: 12px; } @media (min-width: 760px) { .cav-annunci { grid-template-columns: 1fr 1.3fr 1fr; } .cav-annunci-vai { grid-column: 1 / -1; } } .cav-annunci label, .cav-strumento label, .cav-admin label, .cav-costi label { display: grid; gap: 4px; font: 600 12.5px var(--tit); color: var(--muto); } .cav-an-frase { margin: 4px 0 10px; font-size: 15px; } .cav-annunci-vai .mot-link { margin: 0; }
.cav-razze { display: grid; gap: 10px; } @media (min-width: 560px) { .cav-razze { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .cav-razze { grid-template-columns: repeat(3, 1fr); } }
.cav-razza { display: grid; align-content: start; padding: 0; overflow: hidden; text-align: left; border-radius: 18px; background: var(--pan); border: 1px solid var(--riga); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.cav-rz-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: #e9dfcf; overflow: hidden; } .cav-rz-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .cav-rz-img i { font-size: 46px; font-style: normal; opacity: .5; } .cav-rz-img em { position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 999px; background: #ffc247; color: #1d0f04; font: 700 11.5px var(--tit); font-style: normal; box-shadow: 0 2px 8px #0004; }
.cav-rz-testo { display: grid; gap: 6px; padding: 12px 14px 14px; } .cav-rz-testo > b { font-size: 18px; } .cav-rz-testo > small { font-size: 13.5px; line-height: 1.4; color: var(--muto); } .cav-chip { display: flex; flex-wrap: wrap; gap: 5px; } .cav-chip span { padding: 3px 9px; border-radius: 999px; background: var(--velo); font-size: 12px; font-weight: 600; } .cav-chip .uso { background: #2f4a2c; color: #fff; }
.cav-programma { margin: 14px 0; padding: 16px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); } .cav-prog-testa { padding: 12px 14px; border-radius: 14px; background: #2f4a2c12; margin-bottom: 14px; } .cav-prog-testa h3 { margin: 0 0 6px; font-size: 20px; } .cav-prog-testa p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; }
.cav-modulo { display: grid; gap: 8px; } @media (min-width: 700px) { .cav-modulo { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; } } .cav-modulo .bott { margin: 0; min-height: 46px; justify-content: center; }
.cav-elenco { display: grid; gap: 6px; margin-top: 12px; } .cav-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--velo); } .cav-riga p { margin: 0; font-size: 15px; flex: 1 1 200px; min-width: 0; } .cav-riga small { display: block; font-size: 12.5px; color: var(--muto); } .cav-riga > span { font: 700 13px var(--mono); white-space: nowrap; } .cav-riga button { border: 1px solid var(--riga); background: var(--pan); border-radius: 999px; min-height: 38px; min-width: 38px; padding: 5px 11px; font: 600 12.5px var(--tit); color: var(--ink); cursor: pointer; }
.cav-riga.vicina { background: #ffc24740; } .cav-riga.scaduta { background: #e5392b26; } .cav-riga.scaduta > span { color: #a3122b; } .cav-serve { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #ffc24740; font-size: 14.5px; }
.cav-totali { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 12px; } .cav-totali > div, .cav-conto > div { padding: 12px 14px; border-radius: 14px; background: #2f4a2c; color: #fff; } .cav-totali b, .cav-totali span, .cav-totali small, .cav-conto small, .cav-conto b { display: block; } .cav-totali span { font: 700 15px var(--mono); margin: 2px 0; } .cav-totali small, .cav-conto small { font-size: 12px; color: #dbe8cf; }
.cav-settimana { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; } .cav-settimana li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--velo); font-size: 14.5px; line-height: 1.4; } .cav-settimana li.riposo { background: #2f4a2c14; color: var(--ink2); }
.cav-due { display: grid; gap: 12px; margin-bottom: 12px; } @media (min-width: 760px) { .cav-due { grid-template-columns: 1fr 1fr; } }
.cav-strumento { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 18px; background: var(--bg); border: 1px solid var(--riga); } .cav-strumento h4, .cav-lista-gruppo { margin: 0; font-size: 17px; } .cav-strumento p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink2); } .cav-esito { margin: 0; padding: 10px 12px; border-radius: 12px; background: #2f4a2c14; font-size: 15px !important; line-height: 1.45; color: var(--ink) !important; } .cav-esito b { font-size: 17px; }
.cav-costi { display: grid; gap: 8px; } @media (min-width: 760px) { .cav-costi { grid-template-columns: 1fr 1fr; column-gap: 20px; } } .cav-costi label { grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); } .cav-costi label span { display: flex; align-items: center; gap: 6px; font-weight: 700; } .cav-costi input { width: 104px; text-align: right; }
.cav-conto { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 14px; } .cav-conto b { font-size: 24px; } .cav-conto .tot { background: #1d140d; }
.cav-lista-conta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: 16px; } .cav-lista-conta .bott { margin: 0; } .cav-lista-gruppo { margin: 16px 0 6px; } .cav-lista { display: grid; gap: 6px; } @media (min-width: 700px) { .cav-lista { grid-template-columns: 1fr 1fr; } }
.cav-lista label { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 12px; background: var(--velo); font-size: 15px; cursor: pointer; } .cav-lista input { width: 22px; height: 22px; flex: none; accent-color: #2f4a2c; } .cav-lista input:checked + span { text-decoration: line-through; color: var(--muto); } .cav-file { cursor: pointer; }
.cav-corpo-due { display: grid; gap: 14px; align-items: start; } @media (min-width: 900px) { .cav-corpo-due { grid-template-columns: 1.25fr 1fr; } }
.cav-disegno { display: block; width: 100%; height: auto; border-radius: 18px; background: #e6eedb; } .cav-disegno .sagoma { fill: #7a4a23; } .cav-punto { cursor: pointer; outline: none; } .cav-punto circle { fill: #fff; stroke: #2f4a2c; stroke-width: 2; transition: fill .15s; } .cav-punto text { font: 700 11px var(--mono); text-anchor: middle; fill: #1d140d; pointer-events: none; } .cav-punto.qui circle, .cav-punto:focus-visible circle { fill: #ff7a1a; } .cav-punto:hover circle { fill: #ffc247; }
.cav-parte { min-height: 76px; margin-bottom: 10px !important; } .cav-parti { display: flex; flex-wrap: wrap; gap: 6px; } .cav-parti button { border: 1px solid var(--riga); background: var(--pan); border-radius: 999px; min-height: 38px; padding: 5px 12px; font: 600 13px var(--tit); color: var(--ink); cursor: pointer; } .cav-parti button.qui { background: #2f4a2c; border-color: #2f4a2c; color: #fff; }
.cav-andatura { display: grid; gap: 16px; align-items: center; padding: 16px; border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); } @media (min-width: 700px) { .cav-andatura { grid-template-columns: 280px 1fr; } } .cav-andatura h3 { margin: 0 0 6px; font-size: 24px; } .cav-andatura p { margin: 0 0 10px; line-height: 1.5; } .cav-andatura .eti { margin: 0; }
.cav-zoccoli { position: relative; display: grid; grid-template-rows: 1fr 1fr; grid-auto-flow: column; gap: 18px 70px; justify-content: center; width: min(280px, 100%); margin: 0 auto; padding: 30px 20px 22px; border-radius: 18px; background: #d9b98a; } .cav-zoccoli span { position: absolute; top: 8px; font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #5a3f24; } .cav-zoccoli span:nth-of-type(1) { left: 20px; } .cav-zoccoli span:nth-of-type(2) { right: 20px; }
.cav-zoccolo { width: 50px; height: 44px; border-radius: 40% 60% 60% 40% / 50%; background: #1d140d2e; transition: background .06s, transform .06s; } .cav-zoccolo.giu { background: #1d140d; transform: scale(1.14); box-shadow: 0 0 0 5px #ff7a1a66; }
.cav-mantelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } @media (min-width: 700px) { .cav-mantelli { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1040px) { .cav-mantelli { grid-template-columns: repeat(9, 1fr); } }
.cav-mantelli button { display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 16px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); font: inherit; cursor: pointer; } .cav-mantelli button > span { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; box-shadow: inset 0 0 0 1px #1d140d26; overflow: hidden; } .cav-mantelli i { position: absolute; top: 0; left: 14%; width: 24%; height: 52%; border-radius: 0 0 10px 10px; box-shadow: 0 0 0 1px #1d140d1f; } .cav-mantelli b { font-size: 13.5px; } .cav-mantelli button.qui { border-color: #2f4a2c; box-shadow: 0 0 0 2px #2f4a2c; }
.cav-segni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (min-width: 860px) { .cav-segni { grid-template-columns: repeat(4, 1fr); } } .cav-segni > div, .cav-parole > div { padding: 12px 14px; border-radius: 16px; background: var(--pan); border: 1px solid var(--riga); } .cav-segni b { display: block; } .cav-segni span { font-size: 14px; line-height: 1.4; color: var(--ink2); }
.cav-guida-foto { float: right; width: 40%; max-width: 260px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin: 0 0 10px 14px; background: #e9dfcf; } @media (max-width: 560px) { .cav-guida-foto { float: none; width: 100%; max-width: none; margin: 0 0 10px; aspect-ratio: 16 / 9; } } .cav-guida > div::after { content: ""; display: block; clear: both; }
.cav-parole { display: grid; gap: 8px; margin: 0; } @media (min-width: 760px) { .cav-parole { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .cav-parole { grid-template-columns: repeat(3, 1fr); } } .cav-parole dt { font-weight: 700; font-size: 16px; } .cav-parole dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink2); }
.cav-giochi-scelta { max-width: 760px; } .cav-salto { flex-direction: column; gap: 10px !important; }
.cav-spingi { width: 100%; max-width: 480px; min-height: 64px; border: 0; border-radius: 16px; background: #ff7a1a; color: #1d0f04; font: 800 17px var(--tit); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .cav-spingi.giu { background: #ffc247; transform: scale(.98); }
.cav-gioco-and .cav-spunta, .cav-gioco-and .cav-spunta * { color: #fff !important; } .cav-gioco-and .cav-spunta { justify-content: center; align-items: center; } .mot-quiz-r.cav-tre { grid-template-columns: repeat(3, 1fr); width: 100%; } .mot-quiz-r.cav-tre button { text-align: center; }
/* 4.79 · Stampa 3D, la guida completa: due mondi, quale stampante, filamenti con le bobine, piatti, programmi, modelli, problemi, gioco */
.s3d-scheda[hidden] { display: none; } .s3d-scheda { animation: fr-entra .3s both; } @media (prefers-reduced-motion: reduce) { .s3d-scheda { animation: none; } } .s3d-su { margin-top: 38px; } .s3d-corpo [hidden] { display: none !important; }
.s3d-passi { margin-bottom: 8px; } .s3d-corpo .guida-testo { max-width: 76ch; }
.s3d-duello { display: grid; gap: 12px; align-items: stretch; margin-bottom: 16px; } @media (min-width: 860px) { .s3d-duello { grid-template-columns: 1fr auto 1fr; } }
.s3d-mondo { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 24px; background: var(--pan); border: 1px solid var(--riga); } .s3d-mondo.a { border: 2px solid var(--ar); box-shadow: 0 14px 34px #ff7a1a26; } .s3d-mondo.b { background: #1d140d; color: #f7efe4; border-color: #1d140d; } .s3d-mondo h3 { margin: 0; font-size: 26px; } .s3d-mondo.b h3 { color: #fff; } .s3d-mondo .eti { margin: 0; } .s3d-mondo.b .eti { color: #ffa24d; } .s3d-mondo p { margin: 0; font-size: 15.5px; line-height: 1.5; } .s3d-mondo ul { margin: 4px 0 8px; padding-left: 20px; font-size: 15px; line-height: 1.6; } .s3d-mondo .bott { margin: auto 0 0; align-self: flex-start; } .s3d-mondo.b .guida-tag { background: #ffffff1f; color: #f7efe4; }
.s3d-mondo.b .bott.due, .s3d-mondo.b .bott.due:hover { background: #ffffff1f; color: #fff; box-shadow: inset 0 0 0 1px #ffffff55; } .s3d-mondo.b .bott.due:hover { background: #ffffff38; }
.s3d-vs { display: grid; place-items: center; align-self: center; justify-self: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ar); color: #1d0f04; font: 800 16px var(--mono); }
.s3d-tabella { border-radius: 20px; overflow: hidden; border: 1px solid var(--riga); background: var(--pan); margin-bottom: 18px; } .s3d-riga { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--riga); font-size: 14.5px; line-height: 1.45; } .s3d-riga:first-child { border-top: 0; } .s3d-riga.s3d-intesta { display: none; } .s3d-riga b { font-size: 15.5px; } .s3d-riga span[data-chi]::before { content: attr(data-chi) ": "; font-weight: 700; color: var(--eti); }
@media (min-width: 760px) { .s3d-riga { grid-template-columns: 190px 1fr 1fr; gap: 16px; } .s3d-riga.s3d-intesta { display: grid; background: #1d140d; color: #fff; font: 700 13px var(--mono); letter-spacing: .05em; text-transform: uppercase; } .s3d-riga span[data-chi]::before { content: none; } }
.s3d-racconto { max-width: 82ch; }
.s3d-scegli { display: grid; gap: 14px; } .s3d-scegli fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .s3d-scegli legend { padding: 0; margin-bottom: 8px; font: 700 16px var(--tit); }
.s3d-opzioni { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; } @media (min-width: 860px) { .s3d-opzioni { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.s3d-opzioni label { position: relative; display: block; cursor: pointer; } .s3d-opzioni input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .s3d-opzioni span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--riga); background: var(--pan); font: 600 14.5px/1.3 var(--tit); transition: border-color .15s, background .15s; } .s3d-opzioni small { font-size: 12.5px; font-weight: 500; color: var(--muto); }
.s3d-opzioni input:checked + span { background: #1d140d; border-color: #1d140d; color: #fff; } .s3d-opzioni input:checked + span small { color: #cdbfae; } .s3d-opzioni input:focus-visible + span { outline: 3px solid var(--ar); outline-offset: 2px; }
.s3d-esito { display: grid; gap: 12px; margin-top: 16px; } @media (min-width: 900px) { .s3d-esito { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.s3d-vince { padding: 20px; border-radius: 24px; background: var(--pan); border: 2px solid var(--ar); box-shadow: 0 14px 34px #ff7a1a26; } .s3d-vince .eti { margin: 0; } .s3d-vince h3 { margin: 2px 0 6px; font-size: clamp(24px, 4.5vw, 32px); } .s3d-vince p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; } .s3d-pieno { font-weight: 600; color: #14532d; }
.s3d-altre { display: grid; gap: 8px; } .s3d-altre .eti { margin: 0; } .s3d-altre button { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--riga); background: var(--pan); color: var(--ink); font: inherit; cursor: pointer; } .s3d-altre button:hover { border-color: var(--ar); } .s3d-altre b { font-size: 16px; } .s3d-altre b small { font: 700 12px var(--mono); color: var(--eti); } .s3d-altre span { font-size: 13.5px; line-height: 1.4; color: var(--muto); }
.s3d-stampante.lampo { animation: s3d-lampo 1.6s; } @keyframes s3d-lampo { 0%, 60% { box-shadow: 0 0 0 4px var(--ar); } 100% { box-shadow: 0 0 0 4px #ff7a1a00; } } @media (min-width: 560px) and (max-width: 859px) { .s3d-stampanti, .s3d-piatti, .s3d-marche { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .s3d-stampanti { grid-template-columns: repeat(4, 1fr); } }
.s3d-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0; } .s3d-dati > div { padding: 8px 10px; border-radius: 12px; background: var(--velo); min-width: 0; } .s3d-dati dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muto); } .s3d-dati dd { margin: 2px 0 0; font: 700 14px/1.25 var(--tit); }
.s3d-pallini { display: inline-flex; gap: 3px; vertical-align: middle; } .s3d-pallini i { width: 9px; height: 9px; border-radius: 50%; background: #1d140d26; } .s3d-pallini i.si { background: var(--ar); }
.s3d-pro, .s3d-contro { font-size: 14.5px !important; line-height: 1.45 !important; } .s3d-contro { color: var(--muto) !important; }
.s3d-solo { margin: -4px 0 10px; }
.s3d-filamenti { display: grid; gap: 10px; align-items: start; } @media (min-width: 700px) { .s3d-filamenti { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .s3d-filamenti { grid-template-columns: repeat(3, 1fr); } }
.s3d-filo { border-radius: 20px; background: var(--pan); border: 1px solid var(--riga); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .s3d-filo[open] { border-color: var(--ar); box-shadow: 0 12px 30px #ff7a1a22; } @media (min-width: 700px) { .s3d-filo[open] { grid-column: 1 / -1; } }
.s3d-filo summary { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 14px; list-style: none; cursor: pointer; } .s3d-filo summary::-webkit-details-marker { display: none; }
.s3d-bobina { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px #1d140d33); transition: transform .5s; } @media (hover: hover) { .s3d-filo summary:hover .s3d-bobina { transform: rotate(40deg); } } .s3d-filo[open] .s3d-bobina { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .s3d-bobina { transition: none; } }
.s3d-filo-testa { display: grid; gap: 2px; min-width: 0; } .s3d-filo-testa > small { font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--eti); } .s3d-filo-testa > b { font-size: 19px; line-height: 1.2; } .s3d-filo-testa > em { font-style: normal; font-size: 13.5px; color: var(--muto); } .s3d-filo-diff { font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.s3d-filo-dentro { padding: 0 16px 16px; max-width: 86ch; } .s3d-filo-dentro p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; } @media (min-width: 700px) { .s3d-filo-dentro .s3d-dati { grid-template-columns: repeat(4, 1fr); } }
.s3d-segni { display: flex; flex-wrap: wrap; gap: 6px; } .s3d-segni span { padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--velo); } .s3d-segni .si { background: #14532d1f; color: #14532d; } .s3d-segni .att { background: #ffc24755; color: #5a3c00; } .s3d-segni .no { background: #e5392b22; color: #8a1a10; }
.s3d-etichetta { display: grid; gap: 16px; align-items: center; padding: 18px; border-radius: 22px; background: var(--pan); border: 1px solid var(--riga); } .s3d-etichetta .s3d-bobina { max-width: 180px; margin: 0 auto; } @media (min-width: 760px) { .s3d-etichetta { grid-template-columns: 200px 1fr; } } .s3d-etichetta dl { display: grid; gap: 8px; margin: 0; } .s3d-etichetta dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; } .s3d-etichetta dt { font: 700 14px var(--mono); color: var(--eti); } .s3d-etichetta dd { margin: 0; font-size: 14.5px; line-height: 1.45; }
.s3d-asciuga { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; } @media (min-width: 620px) { .s3d-asciuga { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .s3d-asciuga { grid-template-columns: repeat(6, 1fr); } } .s3d-asciuga > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--pan); border: 1px solid var(--riga); } .s3d-asciuga span { font: 700 18px var(--mono); color: var(--eti); } .s3d-asciuga small { font-size: 12.5px; color: var(--muto); }
.s3d-piatto-simbolo { font-size: 34px; line-height: 1; }
.s3d-griglia-scorri { overflow-x: auto; border-radius: 18px; border: 1px solid var(--riga); background: var(--pan); margin-bottom: 10px; } .s3d-griglia { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; } .s3d-griglia th, .s3d-griglia td { padding: 11px 12px; text-align: center; border-top: 1px solid var(--riga); } .s3d-griglia thead th { border-top: 0; background: #1d140d; color: #fff; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; } .s3d-griglia tbody th { text-align: left; font-weight: 700; } .s3d-griglia td { font-weight: 600; } .s3d-griglia td.si { background: #14532d14; color: #14532d; } .s3d-griglia td.att { background: #ffc24733; color: #5a3c00; } .s3d-griglia td.no { background: #e5392b14; color: #8a1a10; }
.s3d-prova-strati { display: grid; gap: 16px; padding: 18px; border-radius: 22px; background: var(--pan); border: 1px solid var(--riga); } @media (min-width: 820px) { .s3d-prova-strati { grid-template-columns: 1fr 1fr; align-items: center; } } .s3d-strati-disegno { border-radius: 16px; background: #1d140d; padding: 10px; } .s3d-strati-disegno svg { display: block; width: 100%; height: auto; }
.s3d-prova-strati label { display: block; font: 600 15px var(--tit); margin: 0 0 4px; } .s3d-prova-strati input[type="range"] { width: 100%; min-height: 40px; accent-color: var(--ar); margin-bottom: 6px; } .s3d-prova-strati .cav-esito { margin-bottom: 16px; background: var(--velo); } .s3d-riemp-disegno { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; } .s3d-riemp-disegno svg { width: 100%; height: auto; } .s3d-riemp-disegno .cav-esito { margin: 0; }
.s3d-impostazioni .mot-lezione summary span, .s3d-impostazioni .mot-lezione summary > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ar); color: #1d0f04; font: 800 15px var(--mono); } .s3d-impostazioni summary small { font-weight: 500; color: var(--muto); font-size: 13px; } .s3d-problemi ol { margin: 0 0 8px; padding-left: 22px; } .s3d-problemi li { margin-bottom: 6px; }
@media (min-width: 900px) { .s3d-sapere, .s3d-impostazioni, .s3d-problemi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; } .s3d-sapere .mot-lezione, .s3d-impostazioni .mot-lezione, .s3d-problemi .mot-lezione { margin: 0; } }
.s3d-cerca-modelli { margin-bottom: 18px; } .s3d-cerca-modelli input { width: 100%; min-height: 52px; padding: 10px 16px; border-radius: 16px; border: 1px solid var(--riga); background: #fff; color: var(--ink); font: 500 16px var(--tit); } .s3d-cerca-vai { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .s3d-cerca-vai:empty { display: none; } .s3d-cerca-vai p { margin: 0; flex: 1 1 100%; font-size: 14.5px; } .s3d-cerca-vai .bott { margin: 0; }
.s3d-archivi em { font: 700 10.5px var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--eti); }
.s3d-gioco .s3d-area { min-height: 420px; justify-content: space-between; gap: 14px; padding: 14px; } .s3d-g-su { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: center; width: 100%; } .s3d-g-vaso { width: 100%; max-height: 250px; }
.s3d-g-chiede { display: grid; gap: 6px; justify-items: center; text-align: center; color: #fff; } .s3d-g-chiede small { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #cdbfae; } .s3d-g-chiede b { font-size: clamp(22px, 6vw, 32px); line-height: 1.1; } .s3d-g-chiede i { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 4px #ffffff33, 0 0 26px var(--c, #fff6); }
.s3d-g-barra { width: 100%; max-width: 180px; height: 10px; border-radius: 999px; background: #ffffff24; overflow: hidden; margin-top: 6px; } .s3d-g-barra span { display: block; height: 100%; width: 100%; background: #7dffa0; border-radius: 999px; } .s3d-g-barra span.poco { background: #ff6b5a; }
.s3d-g-bobine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; } .s3d-g-bobine.n5 { grid-template-columns: repeat(5, 1fr); } .s3d-g-bobine.n6 { grid-template-columns: repeat(6, 1fr); gap: 5px; } .s3d-g-bobine button { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; touch-action: manipulation; transition: transform .1s; -webkit-tap-highlight-color: transparent; } .s3d-g-bobine button:active { transform: scale(.9); } .s3d-g-bobine svg { display: block; width: 100%; height: auto; } .s3d-g-bobine button:disabled { opacity: .5; }
.cav-prog-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } .cav-prog-azioni .bott { margin: 0; } .cav-pdf-nota { font-size: 14px; font-weight: 600; color: #2f4a2c; } .cav-anagrafe details { grid-column: 1 / -1; border-radius: 14px; background: var(--velo); padding: 0 12px; } .cav-anagrafe summary { cursor: pointer; padding: 12px 0; font: 600 14.5px var(--tit); } .cav-anagrafe details .cav-modulo { padding-bottom: 12px; } .cav-anagrafe .cav-serve { grid-column: 1 / -1; margin: 0; }
.cav-stime { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 14.5px; } .cav-stime span { flex: 1 1 100%; } .cav-stime button { border: 1px solid var(--riga); background: var(--bg); border-radius: 999px; min-height: 40px; padding: 6px 14px; font: 600 13.5px var(--tit); color: var(--ink); cursor: pointer; } .cav-stime button:hover { border-color: #4a6a3c; }
.cav-costi label.larga { grid-column: 1 / -1; grid-template-columns: 1fr; } .cav-costi label.larga b { color: #2f4a2c; } .cav-costi input[type="range"] { width: 100%; min-height: 36px; padding: 0; border: 0; background: none; accent-color: #2f4a2c; }
.cav-fette { display: grid; gap: 6px; margin: 16px 0 10px; } .cav-fette:empty { display: none; } .cav-fette h4 { margin: 0 0 4px; font-size: 16px; } .cav-fette > div { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; gap: 10px; align-items: center; font-size: 14px; } .cav-fette i { height: 12px; border-radius: 999px; background: var(--velo); overflow: hidden; } .cav-fette u { display: block; height: 100%; border-radius: 999px; background: #4a6a3c; } .cav-fette .extra u { background: #ffc247; } .cav-fette b { font: 700 13.5px var(--mono); white-space: nowrap; } .cav-fette b small { color: var(--muto); font-weight: 500; }
@media (max-width: 520px) { .cav-fette > div { grid-template-columns: 1fr auto; } .cav-fette i { grid-column: 1 / -1; grid-row: 2; } }
.s3d-corpo .sf-notizie-sez { border-top: 0; }