/* TOSCA — VARIANTE PUNK (bozza del 03/10/2026)
   ==========================================================================
   Caricato DOPO stile.css e riassetto.css: non li tocca, li ridipinge sopra.
   Va in coppia con l'index.html di questa cartella, che ha in piu' i segni a
   bomboletta, la firma, i nastri, la spilla e il filtro #spray: senza questo
   foglio quei pezzi comparirebbero nudi.

   L'idea: la casa resta sartoriale (avorio, cipria, Cormorant, filetti) e
   qualcuno ci passa sopra con la bomboletta. Riferimenti veri, non inventati:
   - Louis Vuitton x Stephen Sprouse (2001): graffiti fluo scritti a mano
     sopra il monogramma — da qui la firma "Tosca!" e i segni a spruzzo;
   - Off-White / Virgil Abloh: segnaletica industriale fatta lusso — da qui
     le etichette nere da etichettatrice e il nastro "Attenzione!" a strisce;
   - Gucci x GucciGhost (2016): il marchio scarabocchiato dall'artista e
     adottato dalla maison — da qui il "Tosca!" gigante dietro il manifesto;
   - Vivienne Westwood / Jamie Reid: la spilla da balia — sul "Il più scelto".

   REGOLA DI DOSAGGIO: il punk sta nei dettagli, mai nei testi lunghi. Tre
   colori in piu' e basta: nero, rosa fluo (parente del cipria del marchio)
   e verde acido (solo su fondo nero, dove si legge).
   ========================================================================== */

/* ---- Caratteri: ospitati qui accanto, nessuna chiamata a server esterni.
   Sedgwick Ave Display: calligrafia da tag, disegnata da un writer (OFL).
   Space Mono 700: le lettere dell'etichettatrice (OFL). Solo il sottoinsieme
   latino: per l'italiano basta (accenti compresi). */
@font-face {
    font-family: 'Sedgwick Ave Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(font/sedgwick-ave-display-latin.woff2) format('woff2');
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(font/space-mono-700-latin.woff2) format('woff2');
}

:root {
    --nero:      #0B0A0D;
    --fluo:      #FF2E93;
    --acido:     #D7FF3A;

    --graffito:  'Sedgwick Ave Display', 'Segoe Print', cursive;
    --etichetta: 'Space Mono', ui-monospace, 'Courier New', monospace;

    /* Grana da fotocopia per i fondi neri: rumore bianco al 14%, a piastrelle. */
    --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .075 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection { background: var(--fluo); color: var(--nero); }
::-webkit-scrollbar-thumb { background: var(--nero); }
::-webkit-scrollbar-thumb:hover { background: var(--fluo); }


/* ==========================================================================
   1. L'ETICHETTA NERA — il segno che si ripete
   Ogni occhiello diventa un pezzo di nastro da etichettatrice: fondo nero,
   lettere fluo, un filo storto. Sui fondi neri si rovescia (fluo su nero
   diventa nero su fluo), se no sparirebbe.
   ========================================================================== */
.occhiello,
.nastrino,
.didascalia-occhiello {
    display: inline-block;
    width: fit-content;
    padding: .55em .9em .48em;
    font-family: var(--etichetta);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--fluo);
    background: var(--nero);
    border-radius: 1px;
    transform: rotate(-1.4deg);
    box-shadow: 0 2px 0 rgba(11, 10, 13, .18);
}
.macro .occhiello { display: block; }
.macro-griglia .macro:nth-child(even) .occhiello { transform: rotate(1.2deg); }
.testata .occhiello { transform: rotate(-2deg); }

@media (min-width: 761px) {
    .macro-griglia .macro:nth-child(2) .occhiello,
    .macro-griglia .macro:nth-child(3) .occhiello { color: var(--nero); background: var(--fluo); }
}
@media (max-width: 760px) {
    .macro-griglia .macro:nth-child(2) .occhiello,
    .macro-griglia .macro:nth-child(4) .occhiello { color: var(--nero); background: var(--fluo); }
}

/* Nel filmato d'apertura l'etichetta sta nella didascalia: piu' piccola. */
.didascalia-occhiello { font-size: .64rem; padding: .5em .8em .42em; }


/* ==========================================================================
   2. I SEGNI A BOMBOLETTA
   SVG in linea con pathLength=1: il tratto si disegna da sé quando il blocco
   entra nello schermo (pagina.js mette .visibile sulle .rivela). Senza
   JavaScript, o con il movimento ridotto, il segno c'e' subito e fermo.
   ========================================================================== */
.spray {
    position: absolute;
    overflow: visible;
    pointer-events: none;
    filter: url(#spray);
}
.spray path {
    fill: none;
    stroke: var(--fluo);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
}
.js .rivela .spray path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .75s cubic-bezier(.65, 0, .35, 1) .55s;
}
.js .rivela .spray path + path { transition-delay: 1.05s; }
.js .rivela.visibile .spray path { stroke-dashoffset: 0; }

/* La firma a mano: rosa fluo con l'alone della vernice nebulizzata. */
.tag-graffito {
    font-family: var(--graffito);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--fluo);
    text-shadow: 0 0 .1em rgba(255, 46, 147, .5), 0 0 .02em rgba(255, 46, 147, .9);
    pointer-events: none;
    user-select: none;
}


/* ==========================================================================
   3. TESTATA E BOTTONI
   Il bottone pieno diventa nero con le lettere fluo; al passaggio si accende
   e alza un'ombra dura, senza sfumatura — come un adesivo che si stacca.
   ========================================================================== */
.nav a::after { height: 2px; background: var(--fluo); }

.btn--pieno {
    background: var(--nero);
    border-color: var(--nero);
    color: var(--fluo);
    font-weight: 600;
}
.btn--pieno:hover {
    background: var(--fluo);
    border-color: var(--nero);
    color: var(--nero);
    box-shadow: 5px 5px 0 var(--nero);
    transform: translate(-3px, -3px);
}
.btn--filo:hover { background: var(--nero); border-color: var(--nero); color: var(--fluo); }

.btn--chiaro {
    background: var(--fluo);
    border-color: var(--fluo);
    color: var(--nero);
    font-weight: 600;
}
.btn--chiaro:hover {
    background: var(--acido);
    border-color: var(--acido);
    color: var(--nero);
    box-shadow: 5px 5px 0 var(--fluo);
    transform: translate(-3px, -3px);
}

.link-freccia {
    color: var(--inchiostro);
    border-bottom: 2px solid var(--fluo);
    padding: 4px 6px 5px 0;
    background: linear-gradient(var(--fluo), var(--fluo)) no-repeat left bottom / 0 100%;
    transition: background-size .35s cubic-bezier(.2, .7, .3, 1), color .2s ease, padding .35s ease;
}
.link-freccia:hover {
    color: var(--nero);
    border-color: var(--fluo);
    background-size: 100% 100%;
    padding-left: 6px;
}


/* ==========================================================================
   4. APERTURA
   ========================================================================== */
.titolone .e-rosa { color: var(--fluo); }
.titolone .cong { color: var(--fluo); }

/* Il logo al posto della parola "Tosca". Non e' il PNG della testata: e'
   logo-tosca-scritta-scura.svg, ricalcato da logo-scuro.py sull'originale ad
   alta definizione, con le lettere O S C A nel colore dei titoli (#2E2A38).
   Vettoriale, perche' accanto ai titoli (font, quindi vettoriali) un PNG
   ridimensionato usciva morbido sugli schermi con lo zoom al 125-150%.
   Fondo trasparente: niente multiply.
   Stessa tela del PNG della testata: intorno alle lettere c'e' aria (82px a
   sinistra e 66px sopra e sotto, su 906x252) e i margini negativi la
   tolgono, cosi' la T sta a filo con la G di "GEstionale".
   --logo e' la larghezza del file; le lettere ne occupano l'82%. */
.parolone-logo { display: block; --logo: clamp(250px, 31vw, 450px); }
.parolone-logo img {
    width: var(--logo);
    height: auto;
    margin: calc(var(--logo) * -.0728) 0 calc(var(--logo) * -.0728) calc(var(--logo) * -.0905);
    filter: url(#nitido);
}

/* "facile" cerchiato a bomboletta */
.cerchiato { position: relative; display: inline-block; }
.segno-cerchio {
    left: -32%;
    top: -26%;
    width: 156%;
    height: 158%;
}
.segno-cerchio path { stroke-width: 3; }

.apertura-garanzie li::before { background: var(--fluo); border-radius: 0; transform: rotate(45deg); }

/* Il nastro sotto il filmato */
.nastrino--palco {
    position: absolute;
    z-index: 6;
    left: clamp(14px, 3vw, 30px);
    bottom: -15px;
    font-size: .74rem;
    transform: rotate(-2.6deg);
    box-shadow: 3px 4px 0 rgba(11, 10, 13, .16);
}


/* ==========================================================================
   5. I NASTRI INCROCIATI — fra apertura e manifesto
   Due nastri da cantiere che scorrono in versi opposti. Il contenitore non
   occupa spazio (margini negativi pari alla sua altezza): i nastri stanno a
   cavallo del confine, sopra l'avorio e sopra il nero.
   ========================================================================== */
.nastri {
    position: relative;
    z-index: 4;
    height: 150px;
    margin: -75px 0;
    overflow: hidden;
    pointer-events: none;
}
.nastro {
    position: absolute;
    left: -5%;
    width: 110%;
    top: 50%;
    padding: 13px 0 12px;
    overflow: hidden;
    font-family: var(--etichetta);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}
.nastro--fluo {
    background: var(--fluo);
    color: var(--nero);
    transform: translateY(-50%) rotate(2.2deg);
}
.nastro--nero {
    background: var(--nero);
    color: var(--fluo);
    transform: translateY(-50%) rotate(-1.6deg);
    box-shadow: 0 10px 24px rgba(11, 10, 13, .22);
}
.nastro--nero i { font-style: normal; color: var(--acido); }

.nastro-scorre {
    display: flex;
    width: max-content;
    animation: nastro-scorre 70s linear infinite;
}
.nastro--fluo .nastro-scorre { animation-duration: 90s; animation-direction: reverse; }
@keyframes nastro-scorre { to { transform: translateX(-50%); } }

/* Su uno schermo stretto gli stessi gradi spostano pochi pixel e i due
   nastri si coprivano: si piegano di piu'. */
@media (max-width: 640px) {
    .nastri { height: 130px; margin: -65px 0; }
    .nastro { font-size: .76rem; padding: 10px 0 9px; }
    .nastro--fluo { transform: translateY(-50%) rotate(7deg); }
    .nastro--nero { transform: translateY(-50%) rotate(-4.5deg); }
}


/* ==========================================================================
   6. MANIFESTO
   Nero vero con la grana, e dietro la firma gigante al 6%: il marchio
   scarabocchiato sopra il marchio, come GucciGhost.
   ========================================================================== */
.manifesto {
    position: relative;
    overflow: hidden;
    background: var(--grana), var(--nero);
    padding-top: clamp(96px, 11vw, 140px);
}
.manifesto::before {
    content: 'Tosca!';
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%) rotate(-8deg);
    font-family: var(--graffito);
    font-size: clamp(9rem, 30vw, 27rem);
    line-height: 1;
    white-space: nowrap;
    color: var(--fluo);
    opacity: .065;
    pointer-events: none;
}
.manifesto .contenitore { position: relative; z-index: 1; }
.manifesto h2 .corsivo { color: var(--fluo); }

/* "contabile" cancellato col verde acido */
.barrato { position: relative; display: inline-block; }
.segno-barra { left: -5%; top: 22%; width: 110%; height: 62%; }
.segno-barra path { stroke: var(--acido); stroke-width: 4.2; }

.manifesto-cifre { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.manifesto-cifra {
    background: var(--nero);
    transition: background .25s ease;
}
.manifesto-cifra b { color: var(--fluo); transition: color .25s ease; }
.manifesto-cifra span {
    font-family: var(--etichetta);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    transition: color .25s ease;
}
/* Al passaggio la casella si accende tutta: un po' di vita su un blocco
   che altrimenti e' un numero e basta. */
.manifesto-cifra:hover { background: var(--fluo); }
.manifesto-cifra:hover b,
.manifesto-cifra:hover span { color: var(--nero); }


/* ==========================================================================
   7. COSA FA — le quattro schede
   ========================================================================== */
.sottolineato { position: relative; display: inline-block; }
.segno-sotto { left: -3%; bottom: -.16em; width: 106%; height: .34em; }
.segno-sotto path { stroke-width: 4; }

.macro .aggiunta-segno { color: var(--fluo); }
.macro { transition: border-color .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s cubic-bezier(.2, .7, .3, 1); }
.macro:hover {
    border-color: var(--nero);
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--fluo);
}

@media (min-width: 761px) {
    .macro-griglia .macro:nth-child(2),
    .macro-griglia .macro:nth-child(3) { background: var(--grana), var(--nero); border-color: var(--nero); }
    .macro-griglia .macro:nth-child(2) .link-freccia,
    .macro-griglia .macro:nth-child(3) .link-freccia { color: var(--bianco); border-color: var(--fluo); }
    .macro-griglia .macro:nth-child(2):hover .link-freccia,
    .macro-griglia .macro:nth-child(3):hover .link-freccia { color: var(--bianco); border-color: var(--fluo); }
    .macro-griglia .macro:nth-child(2) .link-freccia:hover,
    .macro-griglia .macro:nth-child(3) .link-freccia:hover { color: var(--nero); }
}
@media (max-width: 760px) {
    .macro-griglia .macro:nth-child(2),
    .macro-griglia .macro:nth-child(4) { background: var(--grana), var(--nero); border-color: var(--nero); }
    .macro-griglia .macro:nth-child(2) .link-freccia,
    .macro-griglia .macro:nth-child(4) .link-freccia { color: var(--bianco); border-color: var(--fluo); }
}


/* ==========================================================================
   8. PER CHI — le etichette diventano adesivi
   Cinque adesivi attaccati di fretta, ognuno un po' storto e di un colore.
   ========================================================================== */
#per-chi .schede-nav { gap: 14px 12px; }
#per-chi .scheda-tab {
    font-family: var(--etichetta);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .1em;
    border: 2px solid var(--nero);
    background: var(--nero);
    color: var(--bianco);
    box-shadow: 3px 3px 0 rgba(11, 10, 13, .2);
}
#per-chi .scheda-tab .ic { color: var(--fluo); }
#per-chi .scheda-tab:nth-child(1) { transform: rotate(-2.2deg); }
#per-chi .scheda-tab:nth-child(2) { transform: rotate(1.6deg);  background: var(--fluo);  color: var(--nero); }
#per-chi .scheda-tab:nth-child(2) .ic { color: var(--nero); }
#per-chi .scheda-tab:nth-child(3) { transform: rotate(-.8deg);  background: var(--bianco); color: var(--nero); }
#per-chi .scheda-tab:nth-child(4) { transform: rotate(2.4deg);  background: var(--acido); color: var(--nero); }
#per-chi .scheda-tab:nth-child(4) .ic { color: var(--nero); }
#per-chi .scheda-tab:nth-child(5) { transform: rotate(-1.5deg); color: var(--fluo); }

/* stile.css li mette in colonna a tutta larghezza sotto i 560px: come
   adesivi restano della loro misura, sparsi su due o tre righe. */
@media (max-width: 560px) {
    #per-chi .schede-nav { flex-direction: row; justify-content: center; }
    #per-chi .scheda-tab { width: auto; padding: 11px 16px; }
}


/* ==========================================================================
   9. LISTINO
   ========================================================================== */
/* "Attenzione! Gratis..." e' gia' un cartello: diventa nastro di cantiere,
   con le strisce a 45 gradi alle due estremita'. */
.promo-gratis {
    position: relative;
    padding: 15px 62px 14px;
    background: var(--nero);
    color: var(--fluo);
    border-radius: 2px;
    font-family: var(--etichetta);
    font-size: clamp(.9rem, 1.9vw, 1.15rem);
    font-weight: 700;
    letter-spacing: .08em;
    transform: rotate(-1.6deg);
    box-shadow: 5px 5px 0 rgba(11, 10, 13, .16);
}
.promo-gratis::before,
.promo-gratis::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 38px;
    background: repeating-linear-gradient(-45deg, var(--acido) 0 9px, var(--nero) 9px 18px);
}
.promo-gratis::before { left: 0; }
.promo-gratis::after  { right: 0; }

@media (max-width: 560px) {
    .promo-gratis { padding: 12px 40px 11px; }
    .promo-gratis::before, .promo-gratis::after { width: 24px; }
}

/* 599 € scarabocchiato a bomboletta al posto della riga dritta */
.prezzo-barrato::after { display: none; }
.segno-scarabocchio { left: -8%; top: 4%; width: 116%; height: 84%; }
.segno-scarabocchio path { stroke-width: 3; }

.piano-voci li::before { color: var(--fluo); }

.piano--scelto {
    background: var(--grana), var(--nero);
    border-color: var(--nero);
}
.piano--scelto .piano-prezzo { color: var(--fluo); }
.piano--scelto .piano-voci li::before { color: var(--acido); }

/* "Il più scelto": un cartellino fluo appuntato con la spilla da balia */
.piano-etichetta {
    top: -17px;
    padding: 9px 18px 8px;
    background: var(--fluo);
    color: var(--nero);
    border-radius: 1px;
    font-family: var(--etichetta);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    transform: rotate(-4deg);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}
.spilla {
    position: absolute;
    width: 108px;
    height: auto;
    right: -96px;
    top: -10px;
    transform: rotate(-11deg);
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .45));
}


/* ==========================================================================
   10. CHI SIAMO — la foto attaccata col nastro, la frase evidenziata
   ========================================================================== */
.atelier-foto { position: relative; transform: rotate(1.6deg); }
.atelier-foto img {
    border: 10px solid var(--bianco);
    border-radius: 2px;
    box-shadow: 0 22px 44px rgba(11, 10, 13, .14), 0 2px 6px rgba(11, 10, 13, .08);
}
.nastro-adesivo {
    position: absolute;
    z-index: 2;
    top: -10px;
    width: 128px;
    height: 34px;
    background: rgba(11, 10, 13, .9);
    /* bordi strappati, non tagliati */
    clip-path: polygon(0 8%, 4% 0, 7% 12%, 10% 2%, 90% 0, 93% 10%, 96% 0, 100% 12%,
                       100% 90%, 96% 100%, 93% 88%, 90% 100%, 10% 100%, 7% 90%, 4% 100%, 0 88%);
}
.nastro-adesivo--dx { right: -34px; transform: rotate(31deg); }

/* A sinistra non un altro pezzo di nero (due barre nere uguali sembravano
   cerniere): un nastrino di carta rosa fluo, semitrasparente, che si vede
   sopra la foto e ne lascia intravedere l'angolo. Due nastri diversi fanno
   collage, non simmetria. */
.nastro-adesivo--sx {
    left: -30px;
    top: 6px;
    width: 146px;
    height: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 48%, rgba(11, 10, 13, .06)),
        rgba(255, 46, 147, .72);
    transform: rotate(-40deg);
}

/* Sul telefono la foto e' larga quanto lo schermo: il nastro di destra
   sbordava di 16px e faceva scorrere la pagina di lato. */
@media (max-width: 880px) {
    .nastro-adesivo { width: 96px; height: 28px; }
    .nastro-adesivo--sx { left: -12px; width: 110px; height: 26px; top: 2px; }
    .nastro-adesivo--dx { right: -12px; }
}

.atelier-foto .cornice-nota {
    margin-top: 18px;
    font-family: var(--graffito);
    font-size: 1.85rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fluo);
    transform: rotate(-3deg);
}

.evidenziatore {
    padding: 0 .18em;
    color: var(--nero);
    background: linear-gradient(var(--fluo), var(--fluo)) no-repeat left 55% / 100% 78%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.js .rivela .evidenziatore {
    background-size: 0 78%;
    transition: background-size .7s cubic-bezier(.65, 0, .35, 1) .5s;
}
.js .rivela.visibile .evidenziatore { background-size: 100% 78%; }


/* ==========================================================================
   11. INVITO FINALE — "provala!" con la freccia sul bottone
   La freccia e' una voce flessibile larga quanto il suo margine negativo:
   occupa zero spazio, quindi i bottoni restano centrati come prima, e lei
   si appoggia a sinistra del primo.
   ========================================================================== */
.invito .corsivo { color: var(--rosa-profondo); }

.freccia-graffito {
    position: relative;
    align-self: flex-start;
    width: 170px;
    height: 60px;
    margin: -52px -16px 0 -170px;
}
.tag-graffito--invito {
    position: absolute;
    left: -12px;
    top: -18px;
    font-size: 2.5rem;
    transform: rotate(-9deg);
}
.freccia-graffito .spray { left: 46px; top: 22px; width: 112px; height: 62px; }

@media (max-width: 760px) {
    .freccia-graffito { display: none; }
}


/* ==========================================================================
   12. PIEDE
   ========================================================================== */
.site-footer { background: var(--grana), var(--nero); }
.site-footer h4 { font-family: var(--etichetta); font-weight: 700; color: var(--fluo); }
.site-footer a:hover { color: var(--fluo); }


/* ==========================================================================
   MOVIMENTO RIDOTTO: niente nastri che scorrono, segni gia' disegnati.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .nastro-scorre { animation: none; }
    .js .rivela .spray path { stroke-dashoffset: 0; transition: none; }
    .js .rivela .evidenziatore { background-size: 100% 78%; transition: none; }
    .btn--pieno:hover, .btn--chiaro:hover, .macro:hover { transform: none; }
}