/* =============================================================================
   VETRINA DEI PERCORSI (homepage dell'Area) — le card sono quelle del sito
   (static/sito/css: carte.css, lastra.css, lastra-sentiero.css, percorsi-vivi.css,
   copiate senza modifiche). Qui SOLO le differenze dell'Area:
   - prezzo e pulsante della cassa sulla faccia della card;
   - le card non si girano da sole;
   - il Bootcamp Studio si divide nei suoi due moduli (decisione di Andrea, 10/10/2026):
     a riposo sembra una card unica; col mouse al centro compare la spaccatura; «Dividi in
     due» la spacca: le due meta' si aprono e poi girano come le card del sito, e sul retro
     di ognuna c'e' un modulo. Su ogni schermo le meta' restano al loro posto, affiancate;
     da telefono la spaccatura non compare mai (catalogo.js tiene il tempo).
   ============================================================================= */

/* il sito azzera i margini di tutto; l'Area no: dentro la vetrina si fa come il sito */
.catalogo p, .catalogo h1, .catalogo h2, .catalogo h3 { margin: 0; }
.catalogo > .kicker { margin-bottom: 8px; }
.catalogo > h1 { margin-bottom: 6px; }
.catalogo > .sub { margin-bottom: 0; }

.paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 36px 0 64px; }
.flip-card { height: 440px; cursor: default; }        /* un po' piu' alta del sito: in piu' ci sono prezzo e pulsante */
.flip-kicker { margin-bottom: 10px !important; }
.flip-title { margin-bottom: 12px !important; }
.flip-sub { margin-bottom: 18px !important; }
.lastra-testi { padding: 30px 28px 28px; }

/* ---- il prezzo ---- */
.prezzo { display: flex; align-items: flex-start; gap: 2px; line-height: 1; font-weight: 700; letter-spacing: -.01em; }
.prezzo__cur { font-size: 1rem; font-weight: 600; margin-top: 5px; color: var(--carta-acc, var(--accent)); }
.prezzo__int { font-size: 2.3rem; color: var(--text); }
.prezzo__dec { font-size: 1rem; color: var(--muted); margin-top: 5px; }
.prezzo__nota { font-size: .74rem; color: var(--muted); letter-spacing: .02em; margin-top: 4px !important; }

/* ---- i pulsanti, col colore della card (smeraldo lo Studio, oro il Live) ---- */
.carta-studio, .carta-meta { --carta-acc: #34d399; --carta-btn: linear-gradient(135deg, #34d399, #12a06a); --carta-btn-t: #04160f; --carta-glow: 16, 185, 129; }
.carta-live { --carta-acc: #fbbf24; --carta-btn: linear-gradient(135deg, #fbbf24, #e0a21f); --carta-btn-t: #1a1206; --carta-glow: 251, 191, 36; }
.carta-azioni { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.btn.btn--acc { margin-top: 0; background: var(--carta-btn); color: var(--carta-btn-t);
  box-shadow: 0 6px 22px rgba(var(--carta-glow), .22); }
.btn.btn--acc:hover { color: var(--carta-btn-t); box-shadow: 0 10px 30px rgba(var(--carta-glow), .36); }

/* «oppure» e «Dividi in due»: un pulsante di vetro con le due meta' che si scostano */
.carta-oppure { font-size: .76rem; color: var(--muted); letter-spacing: .04em; }
.dividi {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; cursor: pointer;
  font: inherit; font-family: 'Montserrat', system-ui, sans-serif; font-size: .9rem; font-weight: 600; letter-spacing: .01em; color: var(--text);
  border-radius: var(--r); border: 1px solid rgba(52, 211, 153, .38); background: rgba(16, 185, 129, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); white-space: nowrap;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.dividi__ic { position: relative; width: 20px; height: 16px; flex: none; }
.dividi__ic i { position: absolute; top: 0; bottom: 0; width: 9px; border-radius: 2.5px; border: 1.5px solid #34d399;
  transition: transform .32s cubic-bezier(.3, .7, .2, 1); }
.dividi__ic i:first-child { left: 0; border-right-width: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; }
.dividi__ic i:last-child { right: 0; border-left-width: 1px; border-top-left-radius: 1px; border-bottom-left-radius: 1px; }
.dividi:hover, .dividi:focus-visible { border-color: rgba(52, 211, 153, .75); background: rgba(16, 185, 129, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 26px -10px rgba(16, 185, 129, .7); }
.dividi:hover .dividi__ic i:first-child, .dividi:focus-visible .dividi__ic i:first-child { transform: translateX(-2.5px); }
.dividi:hover .dividi__ic i:last-child, .dividi:focus-visible .dividi__ic i:last-child { transform: translateX(2.5px); }
.dividi:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }

/* ===== LA SPACCATURA: a riposo una card unica =====
   La foto in fondo alla lastra e' fatta di due meta' (pseudo-tele) che a riposo combaciano;
   la foto vera resta (la legge l'onda di luce) ma non si dipinge. Solo col mouse al centro
   (.al-centro, catalogo.js) le meta' si scostano appena e la cucitura si accende. */
.prereg { position: relative; }
.carta-studio .lastra-foto { background-size: 0 0; }
.carta-studio .lastra-foto::before,
.carta-studio .lastra-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: inherit; background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform .45s cubic-bezier(.3, .7, .2, 1), clip-path .45s cubic-bezier(.3, .7, .2, 1);
}
.carta-studio .lastra-foto::before { clip-path: inset(0 50% 0 0); }
.carta-studio .lastra-foto::after  { clip-path: inset(0 0 0 50%); }
.carta-studio .lastra-sentiero { z-index: 1; }      /* l'onda di luce sopra le due meta' */
.prereg--intero .carta-studio .lastra-foto { background-size: cover; }
.prereg--intero .carta-studio .lastra-foto::before, .prereg--intero .carta-studio .lastra-foto::after { content: none; }

.cover__seam {
  position: absolute; left: 50%; top: 18%; bottom: 18%; width: 2px; transform: translateX(-1px); z-index: 2;
  background: linear-gradient(to bottom, transparent, #5eead4, transparent);
  box-shadow: 0 0 12px rgba(52, 211, 153, .85);
  opacity: 0; transition: opacity .3s ease, top .35s ease, bottom .35s ease; pointer-events: none;
}
.prereg--intero .cover__seam { display: none; }
.prereg.al-centro .carta-studio .lastra-foto::before { clip-path: inset(0 calc(50% + 5px) 0 0); transform: translateX(-4px); }
.prereg.al-centro .carta-studio .lastra-foto::after  { clip-path: inset(0 0 0 calc(50% + 5px)); transform: translateX(4px); }
.prereg.al-centro .cover__seam { opacity: .95; top: 4%; bottom: 4%; }

/* ===== LA DIVISIONE =====
   .is-uscita: i testi dello Studio svaniscono · .is-diviso: al posto della card ci sono le due
   meta' (combaciano: stessa foto, stesso punto) · .is-aperto: le meta' si aprono · poi girano
   (is-flipped sulle due lastre, il giro lo fa lastra.js) · .is-open: tutto fermo, si compra. */
.carta-studio .lastra-testi { transition: opacity .16s ease; }
.prereg.is-uscita .carta-studio .lastra-testi { opacity: 0; }
.prereg.is-diviso .carta-studio { opacity: 0; pointer-events: none; }

.pair {
  /* le due meta' hanno sempre la stessa misura (lastra.js ci costruisce sopra lo spessore del vetro):
     il contenitore sborda di G/2 per lato, cosi' ogni meta' e' larga esattamente meta' card; per
     combaciare si spostano di G/2 verso il centro, per aprirsi tornano al loro posto */
  --G: 12px;
  position: absolute; top: 0; bottom: 0; left: calc(var(--G) / -2); right: calc(var(--G) / -2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--G);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.prereg.is-diviso .pair { opacity: 1; visibility: visible; }
.prereg.is-open .pair { pointer-events: auto; }

.carta-meta { min-width: 0; }
.carta-meta .flip-card { height: 100%; }
.carta-meta--l { translate: calc(var(--G) / 2) 0; }
.carta-meta--r { translate: calc(var(--G) / -2) 0; }
.prereg.is-aperto .carta-meta { translate: 0 0; }
.prereg.is-aperto .carta-meta--l { animation: apriL .42s cubic-bezier(.25, .8, .25, 1) both; }
.prereg.is-aperto .carta-meta--r { animation: apriR .42s cubic-bezier(.25, .8, .25, 1) both; }
.prereg.is-chiude .carta-meta { transition: translate .26s cubic-bezier(.5, 0, .3, 1); }
@keyframes apriL { 0% { translate: calc(var(--G) / 2) 0; } 60% { translate: calc(var(--G) / -2.5) 0; } 100% { translate: 0 0; } }
@keyframes apriR { 0% { translate: calc(var(--G) / -2) 0; } 60% { translate: calc(var(--G) / 2.5) 0; } 100% { translate: 0 0; } }

/* davanti: la propria meta' della foto dello Studio, alla stessa scala e nello stesso punto */
.carta-meta .lastra-foto { right: auto; width: calc(var(--pw, 200%) + 24px); }
.carta-meta--r .lastra-foto { left: auto; right: -12px; }
/* il taglio: un filo di luce sul lato interno, acceso nell'istante in cui la card si spacca */
.carta-meta .flip-front::after { content: ""; position: absolute; top: 3%; bottom: 3%; width: 2px; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, transparent, #5eead4 30%, #5eead4 70%, transparent); box-shadow: 0 0 14px rgba(52, 211, 153, .9);
  opacity: 0; transition: opacity .45s ease; }
.carta-meta--l .flip-front::after { right: 0; }
.carta-meta--r .flip-front::after { left: 0; }
.prereg.is-diviso:not(.is-open) .carta-meta .flip-front::after { opacity: 1; transition-duration: .08s; }

/* dietro: il modulo (in basso, come i testi della card intera: i due «Acquista» alla stessa altezza) */
.carta-meta .flip-back .lastra-testi.modulo-carta { justify-content: flex-end; padding: 26px 22px 24px; container-type: inline-size; }
/* il titolo si adatta alla meta': «FONDAMENTALE» resta sempre una parola intera, anche sul Fold chiuso */
.modulo-carta__titolo { font-size: min(1.15rem, 100cqi / 9.6); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; margin-bottom: 10px !important; }
.modulo-carta .flip-sub { font-size: .86rem; line-height: 1.55; }
.modulo-carta .prezzo__int { font-size: 1.9rem; }
.modulo-carta .btn { margin-top: 16px; align-self: stretch; }

/* sotto i moduli: il conto del completo e "richiudi" */
.pair__foot { position: absolute; left: 0; right: 0; bottom: -40px; text-align: center;
  font-size: .82rem; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.prereg.is-open .pair__foot { opacity: 1; pointer-events: auto; }
.pair__foot b { color: var(--text); }
.linkish { margin-left: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 13px; color: var(--text); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600;
  transition: border-color .2s ease, background .2s ease; }
.linkish:hover, .linkish:focus-visible { border-color: var(--accent); background: rgba(34, 211, 238, .10); }

/* senza mouse la spaccatura non compare mai */
@media (hover: none), (pointer: coarse) {
  .cover__seam { display: none; }
}

/* ---- schermi piu' stretti ---- */
@media (max-width: 860px) {
  .paths__grid { grid-template-columns: 1fr; gap: 22px; max-width: 560px; margin-inline: auto; }
  .flip-wrap--featured, .flip-wrap--featured:hover { transform: none; }
  /* una card sotto l'altra: aperta, sotto lo Studio serve lo spazio per «Presi insieme… richiudi» */
  .prereg { transition: margin-bottom .3s ease; }
  .prereg.is-open { margin-bottom: 52px; }
}
@media (max-width: 560px) {
  .flip-card { height: 460px; }
  .lastra-testi { padding: 26px 22px 22px; }
  .carta-azioni { flex-direction: column; align-items: stretch; gap: 8px; }
  .carta-azioni .btn, .dividi { justify-content: center; }
  .carta-oppure { text-align: center; }
  .cover__seam { display: none; }
  /* da telefono le meta' restano affiancate, al loro posto: il modulo sul retro si fa compatto */
  .pair { --G: 10px; }
  .carta-meta .flip-back .lastra-testi.modulo-carta { padding: 18px 14px 16px; }
  .modulo-carta .flip-kicker { font-size: .62rem; margin-bottom: 8px !important; }
  .modulo-carta__titolo { font-size: min(.95rem, 100cqi / 9.4); letter-spacing: 0; margin-bottom: 8px !important; }
  .modulo-carta .flip-sub { font-size: .76rem; line-height: 1.45; margin-bottom: 14px !important;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .modulo-carta .prezzo__int { font-size: 1.55rem; }
  .modulo-carta .prezzo__cur, .modulo-carta .prezzo__dec { font-size: .82rem; margin-top: 3px; }
  .modulo-carta .prezzo__nota { font-size: .66rem; }
  .modulo-carta .btn { margin-top: 12px; padding: 10px 8px; font-size: .86rem; }
  .pair__foot { bottom: -46px; padding-inline: 8px; }
}
@media (max-width: 340px) {
  .modulo-carta .flip-sub { -webkit-line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .carta-studio .lastra-testi, .carta-studio .lastra-foto::before, .carta-studio .lastra-foto::after,
  .cover__seam, .pair__foot, .prereg, .carta-meta { transition: none; }
  .prereg.is-aperto .carta-meta { animation: none; }
}