/* CASTE Strategy — i quattro punti di Pensiamo, Testiamo, Realizziamo (home) diventano schede di vetro
   (richiesta di Andrea, mercoledì 4 novembre 2026: "più wow, non una lista messa lì").
   Computer: quattro lastre di vetro affiancate, il numero grande pieno con la luce gialla, la lastra si alza al passaggio.
   Telefono: le lastre si impilano mentre scorri, una sopra l'altra, come carte. Proporzioni auree (13/21/34/55/89). */

.capitolo__punti { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 21px; border: 0 !important; margin-top: 34px; }
.capitolo__punto {
  --vetro-fondo: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 62%), rgba(20,20,18,.55);
  --vetro-bordo: rgba(255,255,255,.12);
  --num: var(--signal);
  position: relative; isolation: isolate; overflow: hidden;
  padding: 34px 21px !important; min-height: 233px;
  border: 1px solid var(--vetro-bordo) !important; border-radius: 34px;
  background: var(--vetro-fondo);
  -webkit-backdrop-filter: blur(21px) saturate(150%); backdrop-filter: blur(21px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 34px 55px -34px rgba(0,0,0,.85);
  transition: translate .6s cubic-bezier(.34,1.56,.64,1), box-shadow .5s cubic-bezier(.23,1,.32,1);
}
.sez--carta .capitolo__punto {
  --vetro-fondo: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.62) 62%, rgba(255,255,255,.8));
  --vetro-bordo: rgba(11,11,11,.07);
  --num: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 34px 55px -34px rgba(40,40,10,.32), 0 2px 8px rgba(11,11,11,.04);
}
/* bagliore giallo dietro il numero */
.capitolo__punto::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 233px; height: 233px; left: -55px; top: -89px; border-radius: 50%;
  background: radial-gradient(circle, rgba(223,255,0,.42), rgba(223,255,0,0) 62%);
  opacity: .55; transition: opacity .5s ease, transform .8s cubic-bezier(.23,1,.32,1);
}
.sez--carta .capitolo__punto::after { background: radial-gradient(circle, rgba(223,255,0,.85), rgba(223,255,0,0) 62%); opacity: .7; }
/* il filo giallo in alto: resta, dentro la lastra */
.capitolo__punto::before { position: absolute; left: 21px; right: 21px; top: 0; margin: 0 !important; height: 2px !important; border-radius: 2px; }
.sez--carta .capitolo__punto::before { background: var(--signal) !important; }
/* numero grande, pieno, con un riflesso.
   89px: gradino della serie aurea (55 · 89), scelto al posto di 68 o 110 della scala dei testi perché è un numero-segno,
   non un testo da leggere: 110 schiaccia le quattro colonne a 1024px, 68 si confonde con i titoli. */
.capitolo__punto .capitolo__pn {
  font-size: 89px !important; line-height: .9 !important; letter-spacing: -.06em; margin: 0 0 34px !important;
  color: var(--num) !important; -webkit-text-stroke: 0 !important;
}
/* il riflesso solo dove il browser conosce color-mix: altrove il numero resta pieno, mai trasparente */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .capitolo__punto .capitolo__pn {
    background: linear-gradient(180deg, var(--num) 30%, color-mix(in srgb, var(--num) 55%, transparent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
/* titoli: 21px nelle colonne strette (gradino aureo 13 · 21 · 34), fino a 26px della scala dei testi; sotto 21 "Riposizionarla" non sta a 1024px */
.capitolo__punto h3 { font-size: clamp(21px, 1.6vw, 26px) !important; line-height: 1.15; letter-spacing: -.01em; }
.capitolo__punto p { font-size: 16px !important; line-height: 1.5; margin-top: 13px !important; }

@media (hover: hover) and (pointer: fine) {
  .capitolo__punto:hover { translate: 0 -8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 55px 89px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(223,255,0,.18); }
  .sez--carta .capitolo__punto:hover { box-shadow: inset 0 1px 0 #fff, 0 55px 89px -34px rgba(40,40,10,.38), 0 0 0 1px rgba(160,190,0,.25); }
  .capitolo__punto:hover::after { opacity: 1; transform: scale(1.25); }
}

@media (max-width: 1000px) and (min-width: 761px) {
  .capitolo__punti { grid-template-columns: 1fr 1fr; }
}

/* telefono: le lastre si impilano mentre scorri */
@media (max-width: 760px) {
  .capitolo__punti { display: block; margin-top: 21px; padding-bottom: 13px; }
  .capitolo__punto {
    position: sticky; top: calc(89px + var(--i, 0) * 13px);
    min-height: 233px; margin-bottom: 21px; padding: 34px 21px !important;
    border-bottom: 1px solid var(--vetro-bordo) !important;
    -webkit-backdrop-filter: blur(21px) saturate(160%); backdrop-filter: blur(21px) saturate(160%);
  }
  /* sul telefono il vetro è più pieno, così la lastra sotto non disturba la lettura */
  .capitolo__punto { --vetro-fondo: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 62%), rgba(22,22,20,.9); }
  .sez--carta .capitolo__punto { --vetro-fondo: linear-gradient(160deg, #fff, rgba(255,255,255,.94) 62%, rgba(250,250,244,.96)); }
  .capitolo__punto:last-child { margin-bottom: 0; }
  .capitolo__punto .capitolo__pn { font-size: 68px !important; margin-bottom: 21px !important; }
  /* dove il browser lo sa fare, le lastre coperte si rimpiccioliscono un poco (dall'alto, così il bordo che spunta resta al suo posto)
     mentre le successive salgono: ogni lastra segue la linea di scorrimento della lastra dopo di lei (timeline-scope).
     377 e 128 sono tarati su Chrome, che per le lastre sticky allunga la linea: su Chrome il rimpicciolimento parte quando
     la terza lastra sale e finisce quando la quarta arriva al suo posto; l'ultima lastra resta sempre intera. */
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    .capitolo__punti { timeline-scope: --lastra-2, --lastra-3, --lastra-4; }
    .capitolo__punto:nth-child(2) { view-timeline: --lastra-2 block; }
    .capitolo__punto:nth-child(3) { view-timeline: --lastra-3 block; }
    .capitolo__punto:nth-child(4) { view-timeline: --lastra-4 block; }
    .capitolo__punto:not(:last-child) {
      transform-origin: 50% 0;
      animation-name: lastra-sotto; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-range: contain calc(100% - 377px) contain calc(100% - 128px);
    }
    .capitolo__punto:nth-child(1) { animation-timeline: --lastra-2; }
    .capitolo__punto:nth-child(2) { animation-timeline: --lastra-3; }
    .capitolo__punto:nth-child(3) { animation-timeline: --lastra-4; }
    @keyframes lastra-sotto { to { scale: .94; filter: brightness(.94); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .capitolo__punto { transition: none !important; animation: none !important; }
  .capitolo__punto:hover { translate: none; }
}
/* movimento ridotto sul telefono: niente lastre che si impilano, restano una sotto l'altra */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .capitolo__punto { position: relative; top: auto; }
}