/* ============================================================
   Tortuga · Corso Barman 2026
   La pagina del corso vive nella notte del locale: il colore
   scende dal blu del banco all'ambra dell'etichetta.
   Tutti i valori modificabili sono qui sotto.
   ============================================================ */
.corso {
  /* --- colori --- */
  --oro: #d4a24c;
  --ambra: #e8a33c;
  --linea: color-mix(in srgb, currentColor 16%, transparent);
  --linea-forte: color-mix(in srgb, currentColor 30%, transparent);
  --vetro: color-mix(in srgb, #fbe9d7 6%, transparent);

  /* --- favo (le placche del guscio) ---
     la placca si ricava dalle colonne: col placche + mezza di sfalsamento devono stare nel wrap.
     Si misura in vw perché una percentuale, dentro la griglia, si risolverebbe sulla colonna.
     I 16px sono il margine di sicurezza per la barra di scorrimento. */
  --col: 5;            /* placche per riga */
  --gp: 12px;          /* spazio fra le placche */
  --p: calc((100vw - 2 * var(--margine) - 16px - (var(--col) + .5) * var(--gp)) / (var(--col) + .5));

  /* --- movimento --- */
  --t-rapido: 120ms;
  --t-medio: 320ms;
  --t-lento: 620ms;
  --molla: cubic-bezier(.23, 1, .32, 1);

  /* --- ritmo verticale --- */
  --sez: clamp(5rem, 13vh, 9rem);

}

/* il colore della pagina vive su :root perche lo scroll lo anima li (corso.css si carica solo qui) */
:root { --cielo: #0d121c; --testo: #fbe9d7; --logo: #d4a24c; }

/* ---------- elementi comuni della pagina ---------- */
.occhiello {
  margin: 0 0 1.2rem; font: 600 .82rem/1.2 var(--ff-testo);
  letter-spacing: .2em; text-transform: uppercase; color: var(--oro);
}
.btn--oro { background: var(--oro); color: #171f2b; }
.corso .barra__marchio { height: 100%; width: auto; }
.corso .nav a[aria-current="page"] { color: var(--oro); }
.corso .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ============ LOCANDINA ============ */
.loc { padding: calc(var(--h) + clamp(2rem, 7vh, 5rem)) 0 var(--sez); position: relative; overflow: hidden; }
.loc::before { /* la luce bassa del banco */
  content: ''; position: absolute; inset: -30% -10% auto; height: 90%; pointer-events: none;
  background: radial-gradient(60% 55% at 62% 40%, color-mix(in srgb, var(--ambra) 22%, transparent), transparent 70%);
}
.loc__griglia { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.loc__titolo { margin: 0 0 1.6rem; font-family: var(--ff-display); }
.loc__riga {
  --wdth: 76; display: block; font-variation-settings: 'wdth' var(--wdth);
  font-weight: 850; font-size: clamp(3.6rem, 11.5vw, 10rem); line-height: .84;
  letter-spacing: -.03em; text-transform: uppercase;
}
.loc__riga--vuota { color: transparent; -webkit-text-stroke: 1.5px var(--oro); }
.loc__claim { margin: 0 0 2.2rem; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.35; max-width: 26ch; }
.loc__azioni { display: flex; flex-wrap: wrap; gap: .8rem; }

.loc__scena { position: relative; display: grid; justify-items: center; }
.loc__foto { width: min(100%, 360px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.versata { /* la colata d'oro che scende nel bicchiere */
  position: absolute; top: calc(-1 * clamp(2rem, 7vh, 5rem)); left: 50%; width: 2px; height: clamp(2rem, 7vh, 5rem);
  overflow: hidden; transform: translateX(-50%);
}
.versata i { display: block; height: 100%; background: linear-gradient(to bottom, transparent, var(--ambra)); transform-origin: top; }

.biglietto {
  margin-top: -2.4rem; padding: 1.4rem 2rem 1.2rem; text-align: center; border-radius: 4px;
  background: color-mix(in srgb, #0b1018 82%, transparent); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--linea-forte), 0 18px 40px -22px rgba(0, 0, 0, .9);
}
.biglietto__da { margin: 0; font: 600 .72rem/1 var(--ff-testo); letter-spacing: .24em; text-transform: uppercase; opacity: .65; }
.biglietto__data { margin: .25rem 0 .6rem; font: 850 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--ff-display); font-variation-settings: 'wdth' 82; text-transform: uppercase; }
.biglietto__anno { margin: .4rem 0 0; font: 850 clamp(2.4rem, 4.6vw, 3.4rem)/1 var(--ff-display); font-variation-settings: 'wdth' 60; color: var(--oro); letter-spacing: .04em; }
.biglietto__manca { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linea); font: 600 .85rem/1.3 var(--ff-testo); opacity: .85; }
.biglietto__manca:empty { display: none; }

@media (max-width: 860px) {
  .loc__griglia { grid-template-columns: 1fr; }
  .loc__scena { margin-top: 1rem; }
  .loc__foto { width: min(72vw, 320px); }
}

/* ============ I NUMERI ============ */
.numeri { padding: var(--sez) 0; }
.numeri__riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.numero { background: var(--cielo); padding: 1.8rem clamp(1rem, 2vw, 1.8rem); display: grid; gap: .5rem; align-content: start; transition: background-color var(--t-medio) var(--molla); }
.numero b {
  font: 850 clamp(2.2rem, 4vw, 3.4rem)/.9 var(--ff-display); font-variation-settings: 'wdth' 76;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--oro); font-variant-numeric: tabular-nums;
}
.numero span { font-size: .96rem; line-height: 1.35; opacity: .8; }

/* ============ IL GUSCIO ============ */
.guscio { padding: var(--sez) 0; }
.guscio__testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.guscio__guida p { margin: 0 0 1.4rem; font-size: 1.1rem; max-width: 34ch; }
.guscio__guida b { color: var(--oro); font-weight: 600; }
.legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.legenda li { display: flex; align-items: center; gap: .5rem; font: 600 .82rem/1 var(--ff-testo); letter-spacing: .04em; opacity: .85; }
.legenda li::before { content: ''; width: 10px; height: 11.5px; background: var(--pl); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
@media (max-width: 860px) { .guscio__testa { grid-template-columns: 1fr; align-items: start; } }

/* il favo prende tutta la larghezza; la scheda sta sopra e resta agganciata mentre si scorre.
   `order` cambia solo l'ordine visivo: nel documento restano prima le placche, poi le schede. */
.guscio__griglia { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.scheda-l__scatola { order: -1; position: sticky; top: calc(var(--hc) + .75rem); z-index: 5; }

/* --- il favo --- */
.favo {
  display: grid; grid-template-columns: repeat(var(--col), var(--p)); column-gap: var(--gp);
  justify-content: start; padding-bottom: calc(var(--p) * .29);
}
.placca {
  position: relative; width: var(--p); aspect-ratio: .866; padding: 13% 12% 15%;
  display: grid; align-content: center; justify-items: center; gap: .3em; text-align: center;
  border: 0; background: none; color: inherit; cursor: pointer;
  margin-bottom: calc(var(--p) * -.2887 + var(--gp) * .866);
  transition: transform var(--t-rapido) ease-out;
}
/* entrata: `scale` e `opacity` con ritardo crescente dal centro (--i lo scrive corso.js);
   `transform` non viene toccato, così il passaggio del mouse risponde subito */
html.js .favo .placca {
  opacity: 0; scale: .72;
  transition: opacity .45s var(--molla), scale .6s var(--molla), transform var(--t-rapido) ease-out;
  transition-delay: calc(var(--i, 0) * 26ms), calc(var(--i, 0) * 26ms), 0s;
}
html.js .favo.is-posato .placca { opacity: 1; scale: 1; }
.placca::before { /* la placca vera e propria */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--pl) 13%, transparent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background-color var(--t-medio) var(--molla);
}
.placca::after { /* il bordo, disegnato come un secondo esagono più piccolo */
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pl);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%,
                     1.5px 25.8%, 1.5px 74.2%, 50% 98.3%, calc(100% - 1.5px) 74.2%, calc(100% - 1.5px) 25.8%, 50% 1.7%);
  opacity: .45; transition: opacity var(--t-medio) var(--molla);
}
.placca__n { font: 850 clamp(1.5rem, 2.1vw, 2.3rem)/1 var(--ff-display); font-variation-settings: 'wdth' 70; color: var(--pl); font-variant-numeric: tabular-nums; transition: color var(--t-medio) var(--molla); }
.placca__t { font: 600 clamp(.8rem, 1vw, .98rem)/1.25 var(--ff-testo); letter-spacing: .005em; text-wrap: balance; opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .placca:hover { transform: translateY(-4px); }
  .placca:hover::before { background: color-mix(in srgb, var(--pl) 26%, transparent); }
  .placca:hover::after { opacity: .85; }
}
.placca:active { transform: scale(.96); }
.placca[aria-selected="true"] { transform: none; }
.placca[aria-selected="true"]::before { background: var(--pl); }
.placca[aria-selected="true"]::after { opacity: 1; }
.placca[aria-selected="true"] .placca__n,
.placca[aria-selected="true"] .placca__t { color: #171f2b; opacity: 1; }
.placca:focus-visible::after { opacity: 1; }   /* l'anello di messa a fuoco resta quello del sito */

/* --- la scheda della lezione: una fascia sopra il favo --- */
.scheda-l {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.6rem, 3vw, 2.4rem); border-radius: 6px;
  background: color-mix(in srgb, #0b1018 78%, transparent);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--linea-forte), 0 24px 60px -30px rgba(0, 0, 0, .9);
  border-top: 3px solid var(--pl);
}
.scheda-l[hidden] { display: none; }
html:not(.js) .scheda-l + .scheda-l { margin-top: 1rem; }  /* senza JS: l'elenco completo, leggibile */
.scheda-l__cap { grid-column: 1; margin: 0 0 .6rem; font: 600 .78rem/1 var(--ff-testo); letter-spacing: .18em; text-transform: uppercase; color: var(--pl); }
.scheda-l h3 {
  grid-column: 1; margin: 0; font-family: var(--ff-display); font-variation-settings: 'wdth' 80;
  font-weight: 850; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: .95; text-transform: uppercase; letter-spacing: -.015em;
}
.scheda-l__testo { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; opacity: .88; }

@media (max-width: 1099px) { .corso { --col: 4; } }
@media (max-width: 699px) {
  .corso { --col: 3; --gp: 6px; }
  .placca { padding: 10%; }
  .placca__n { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  .placca__t { display: none; }   /* sul telefono la placca è il numero: il titolo sta nella scheda */
  .scheda-l { grid-template-columns: 1fr; row-gap: .8rem; }
  .scheda-l__cap, .scheda-l h3, .scheda-l__testo { grid-column: 1; grid-row: auto; }
}

/* lo sfalsamento delle righe dispari cambia con il numero di colonne */
@media (min-width: 1100px) {
  .placca:nth-child(n+6):nth-child(-n+10),
  .placca:nth-child(n+16):nth-child(-n+20) { left: calc((var(--p) + var(--gp)) / 2); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .placca:nth-child(n+5):nth-child(-n+8),
  .placca:nth-child(n+13):nth-child(-n+16) { left: calc((var(--p) + var(--gp)) / 2); }
}
@media (max-width: 699px) {
  .placca:nth-child(n+4):nth-child(-n+6),
  .placca:nth-child(n+10):nth-child(-n+12),
  .placca:nth-child(n+16):nth-child(-n+18) { left: calc((var(--p) + var(--gp)) / 2); }
}

/* ============ LA PROVA FINALE ============ */
.prova { padding: var(--sez) 0; }
.prova__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.prova__testo { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.45; max-width: 30ch; }
.prova__testo b { color: var(--oro); font-weight: 600; }
.prova__dati { margin: 0; display: grid; gap: 0; }
.prova__dati div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--linea); align-items: baseline; }
.prova__dati div:last-child { border-bottom: 1px solid var(--linea); }
.prova__dati dt { font: 600 .8rem/1.2 var(--ff-testo); letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.prova__dati dd { margin: 0; font: 700 clamp(1.1rem, 1.9vw, 1.45rem)/1.25 var(--ff-display); font-variation-settings: 'wdth' 88; }
@media (max-width: 860px) { .prova__griglia { grid-template-columns: 1fr; } }

/* ============ LE DUE PARTI ============ */
.parti { padding: var(--sez) 0; }
.parti__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 1rem; }
.parte {
  position: relative; padding: clamp(1.8rem, 3.5vw, 2.8rem); border-radius: 6px;
  background: color-mix(in srgb, #fbe9d7 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--linea-forte);
  display: grid; gap: .5rem; align-content: start;
}
.parte__n { margin: 0; font: 600 .8rem/1 var(--ff-testo); letter-spacing: .2em; color: var(--ambra); }
.parte h3 { margin: .2rem 0 .6rem; font: 850 clamp(1.8rem, 3.2vw, 2.6rem)/.95 var(--ff-display); font-variation-settings: 'wdth' 80; text-transform: uppercase; letter-spacing: -.015em; }
.parte__prezzo { margin: 0; font: 850 clamp(3.4rem, 7vw, 5.4rem)/.85 var(--ff-display); font-variation-settings: 'wdth' 70; color: var(--ambra); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.parte__prezzo span { font-size: .38em; vertical-align: .9em; margin-right: .15em; opacity: .8; }
.parte__nota { margin: .6rem 0 0; font-size: 1rem; line-height: 1.5; opacity: .8; max-width: 34ch; }
.parti__incluso { margin: 1.6rem 0 0; font-size: 1rem; opacity: .8; }

/* ============ ISCRIZIONI ============ */
.iscriviti { padding: var(--sez) 0; }
.iscriviti__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.iscriviti__testo { margin: 0; font-size: 1.1rem; line-height: 1.5; max-width: 34ch; opacity: .88; }
.recapiti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.recapito {
  background: var(--cielo); padding: 1.5rem; display: grid; gap: .45rem; align-content: start;
  text-decoration: none; transition: background-color var(--t-rapido) ease-out;
}
.recapito__et { font: 600 .74rem/1 var(--ff-testo); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.recapito__val { font: 850 clamp(1.3rem, 2.2vw, 1.75rem)/1.1 var(--ff-display); font-variation-settings: 'wdth' 80; color: var(--oro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recapito__val--piccolo { font-size: clamp(.88rem, 1.2vw, 1rem); font-variation-settings: 'wdth' 95; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .recapito:hover { background: color-mix(in srgb, var(--oro) 12%, var(--cielo)); } }
.recapito:active { background: color-mix(in srgb, var(--oro) 18%, var(--cielo)); }
@media (max-width: 860px) { .iscriviti__griglia { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .recapiti { grid-template-columns: 1fr; } }

/* ============ accessibilità: meno movimento, meno trasparenza, più contrasto ============ */
@media (prefers-reduced-transparency: reduce) {
  .biglietto, .scheda-l { background: #0b1018; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .corso { --linea: color-mix(in srgb, currentColor 45%, transparent); --linea-forte: currentColor; }
  .placca::after { opacity: 1; }
  .scheda-l, .biglietto { background: #05080d; }
}
@media (prefers-reduced-motion: reduce) {
  .corso *, .corso *::before, .corso *::after { transition-duration: 1ms !important; animation: none !important; }
  .placca:hover { transform: none; }
}

/* ---------- Testo d'apertura dei numeri ---------- */
.numeri__intro { margin: 0 auto clamp(2rem, 4vh, 3rem); max-width: min(62ch, var(--wrap)); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; opacity: .9; }
.numeri__intro b { color: var(--oro); font-weight: 600; }

/* ---------- Domande frequenti ---------- */
.faq { padding: var(--sez) 0; }
.faq__griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__lista { margin: 0; display: grid; }
.faq__lista div { padding: 1.3rem 0; border-top: 1px solid var(--linea); }
.faq__lista div:last-child { border-bottom: 1px solid var(--linea); }
.faq__lista dt { margin: 0 0 .5rem; font: 700 clamp(1.05rem, 1.7vw, 1.3rem)/1.25 var(--ff-display); font-variation-settings: 'wdth' 90; color: var(--oro); }
.faq__lista dd { margin: 0; font-size: 1.02rem; line-height: 1.55; opacity: .88; }
.faq__lista a { color: inherit; font-weight: 600; }
@media (max-width: 860px) { .faq__griglia { grid-template-columns: 1fr; } }