/* MARCA_81531_PAGINA_ATTERRAGGIO — la pagina di un mestiere come «mini sito» (consegna 81531, 24/9/2026).
   «considera che è una pagina di atterraggio e la home non si vede, deve essere un mini sito completo»;
   «negli step sotto usa le card animate che ti avevo dato prima con il link»; «gli altri blocchi di testo
   con foto e testo dx e sinistra alternati»; «mostra qualche foto del gestionale»; «i titoli con doppio
   colore animato e i testi evidenziati come già avevi per la home» (Giovanni, 24/9).
   Lo carica SOLO una pagina accesa in strumenti/atterraggio-mestieri.txt (oggi la pilota degli educatori
   cinofili). Solo token di temi.css: chiaro e scuro vanno da soli. Con «riduci movimento» niente si muove.
   Le schede 3D sono il componente «animated 3d card» di 21st.dev rifatto in CSS semplice: si inclinano
   sotto il mouse, il numero e il collegamento vengono avanti, una luce morbida segue il puntatore; entrano
   con un piccolo movimento quando arrivano sullo schermo (js/mestieri-atterraggio.js). Per toglierlo: 81532. */

/* 0. i titoli a due colori: la parte colorata e' la .evidenzia della home e la parte che gira usa le
      classi .parole della home (css/sito.css). Qui solo: la frase piu' corta parte da sinistra, senza
      il buco davanti che lasciava nei titoli centrati. */
.parole-voce{text-align:left}
.gruppo-bottoni.ma-centro{justify-content:center}

/* 1. le schede 3D --------------------------------------------------------------------------------- */
.ma-carte{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.ma-carta{position:relative;margin:0;max-width:none;flex:1 1 300px;display:flex;perspective:1100px}
.ma-carte-3 > .ma-carta{flex:0 1 calc((100% - 36px) / 3)}
.ma-carte-funzioni > .ma-carta{flex:0 1 calc((100% - 72px) / 5)}
.ma-carta-dentro{
  position:relative;display:flex;flex-direction:column;gap:10px;width:100%;
  padding:22px 22px 18px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  box-shadow:var(--shadow-sm);transform-style:preserve-3d;
}
.ma-carta-dentro h3{margin:0;font-size:18px;line-height:1.25;color:var(--ink-strong)}
.ma-carta-dentro p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:none}
.ma-carta-dentro p + p{margin-top:2px}
.ma-carta-dentro .mestiere-in-regiapro{font-size:14.5px}
.ma-carta-segno{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent);font:800 18px/1 var(--font-display);
}
.ma-segno-icona svg{width:22px;height:22px}
.ma-carta-link{
  margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:14.5px;font-weight:800;color:var(--accent);text-decoration:none;
}
.ma-carta-link svg{width:17px;height:17px;flex:0 0 17px;transition:transform var(--tr)}
/* tutta la scheda si tocca; i collegamenti dentro al testo restano sopra e si toccano da soli */
.ma-carta-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.ma-carta-dentro p a,.ma-carta-dentro li a{position:relative;z-index:2}
.ma-carta-dentro:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.ma-carta-link:focus-visible{outline:none}
.ma-carta-dentro:hover .ma-carta-link svg{transform:translateX(4px)}
.ma-carta-dentro:hover{border-color:var(--accent)}
/* la luce che segue il mouse */
.ma-carta-dentro::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--ma-lx,50%) var(--ma-ly,0%),color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%);
  transition:opacity .3s;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ma-carta-dentro{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow var(--tr),border-color var(--tr)}
  .ma-carta-segno,.ma-carta-link,.ma-carta-dentro h3{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .ma-carta.ma-viva .ma-carta-dentro{
    transform:rotateX(var(--ma-rx,0deg)) rotateY(var(--ma-ry,0deg)) translateY(-4px);
    transition:transform .12s linear,box-shadow var(--tr),border-color var(--tr);
    box-shadow:var(--shadow-lg);
  }
  .ma-carta.ma-viva .ma-carta-dentro::before{opacity:1}
  .ma-carta.ma-viva .ma-carta-segno{transform:translateZ(40px)}
  .ma-carta.ma-viva .ma-carta-dentro h3{transform:translateZ(22px)}
  .ma-carta.ma-viva .ma-carta-link{transform:translateZ(30px)}
}
/* l'ingresso: parte solo per le schede ancora sotto lo schermo (le mette in attesa il programma).
   Si nascondono SOLO quando la pagina ha la classe ma-ingresso-vivo, cioe' dopo che il browser ha dimostrato
   di rispondere (primo segnale dell'osservatore): se il browser non disegna o non risponde, tutto resta visibile. */
@media (prefers-reduced-motion:no-preference){
  .ma-ingresso-vivo .ma-carta.ma-attesa .ma-carta-dentro{opacity:0;transform:translateY(34px) rotateX(16deg)}
  .ma-carta.ma-entra .ma-carta-dentro{
    transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms);
  }
  .ma-ingresso-vivo .ma-alterna-media.ma-attesa{opacity:0;transform:translateY(30px)}
  .ma-alterna-media.ma-entra{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
}

/* 2. «Cosa trovi dentro»: le schede piu' strette, cinque per riga sui computer --------------------- */
.ma-carte-funzioni .ma-carta-dentro{padding:20px 18px 14px}
.ma-carte-funzioni .ma-carta-dentro h3{font-size:17px}
.ma-carte-funzioni .ma-carta-dentro p{font-size:14.5px}

/* 3. «da vicino»: le schermate vere nelle linguette ------------------------------------------------ */
.ma-linguette{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 22px}
.ma-linguette[hidden]{display:none}
.ma-linguette button{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px 9px 10px;cursor:pointer;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:700 14.5px/1.2 var(--font-sans);transition:background var(--tr),border-color var(--tr),color var(--tr);
}
.ma-linguette button:hover{border-color:var(--accent)}
.ma-linguette button[aria-selected="true"]{background:var(--logo-gradient);border-color:transparent;color:var(--su-accento)}
.ma-linguette button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ma-l-numero{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:800}
.ma-linguette button[aria-selected="true"] .ma-l-numero{background:color-mix(in srgb,var(--surface) 22%,transparent);color:inherit}
.ma-pannelli{display:grid;gap:34px;max-width:1080px;margin-inline:auto}
.ma-linguette-accese .ma-pannelli{gap:0}
.ma-pannello{margin:0}
.ma-pannello[hidden]{display:none}
.ma-pannello figcaption{margin:14px auto 0;max-width:70ch;text-align:center;font-size:15px;line-height:1.5;color:var(--ink-2)}
.ma-pannello figcaption b{color:var(--ink-strong)}
/* la finestra del browser intorno alla schermata */
.ma-finestra{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-lg)}
.ma-finestra-barra{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.ma-finestra-barra span{width:11px;height:11px;border-radius:50%;background:var(--line)}
.ma-finestra-barra em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.ma-finestra .schermata{border:0;border-radius:0;box-shadow:none}
.ma-finestra img{width:100%;height:auto;display:block}
/* il tema scuro mostra la schermata scura, quando c'e' */
.ma-scuro{display:none !important}
[data-theme="dark"] .ma-scuro{display:block !important}
[data-theme="dark"] .ma-chiaro{display:none !important}

/* 4. i blocchi alternati: testo da una parte, foto o schermata dall'altra -------------------------- */
.ma-alterna-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.ma-media-sinistra .ma-alterna-media{order:-1}
.ma-alterna-testo{min-width:0}
.ma-testa h2{margin:0;font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;color:var(--ink-strong);text-wrap:balance}
.ma-testa p{margin:16px 0 0;font-size:clamp(16px,1.3vw,17.5px);line-height:1.6;color:var(--ink-2);max-width:62ch}
/* il numero sopra il titolo, come nelle altre sezioni (css/mestieri-vetrina.css) */
.mv-vetrina ~ section .ma-testa::before{
  counter-increment:mv-sezione;
  content:counter(mv-sezione,decimal-leading-zero);
  content:counter(mv-sezione,decimal-leading-zero) / "";
  display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:30px;padding:0 12px;margin-bottom:14px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent);font:800 13px/1 var(--font-sans);letter-spacing:.1em}
.ma-punti{margin-top:26px;display:grid;gap:0;border-top:1px solid var(--line-soft)}
.ma-punto{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.ma-punto-segno{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.ma-punto-segno svg{width:17px;height:17px}
.ma-punto-testo{min-width:0}
.ma-punto-testo h3{margin:4px 0 6px;font-size:18px;line-height:1.3;color:var(--ink-strong)}
.ma-punto-testo p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:none}
.ma-punto-testo p + p{margin-top:8px}
.ma-alterna-media{position:relative;margin:0;min-width:0}
@media (min-width:940px){ .ma-alterna-media{position:sticky;top:110px} }
.ma-alterna-media figcaption{margin-top:14px;font-size:13.5px;line-height:1.45;color:var(--ink-3);text-align:center}
.ma-foto::before{content:"";position:absolute;inset:12% -3% -4% 9%;border-radius:26px;background:var(--accent-soft)}
.ma-media-sinistra .ma-foto::before{inset:12% 9% -4% -3%}
.ma-foto img{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:22px;border:6px solid var(--surface);background:var(--surface-2);box-shadow:var(--shadow-lg)}
.ma-foto img[height="1000"]{aspect-ratio:4/5;max-height:640px}
.ma-schermata .ma-finestra{max-width:640px;margin-inline:auto}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ma-schermata .ma-finestra{transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .ma-media-sinistra .ma-schermata .ma-finestra{transform:perspective(1400px) rotateY(7deg) rotateX(2deg)}
  .ma-schermata:hover .ma-finestra{transform:none}
}
/* il telefono */
.ma-telefono{display:flex;flex-direction:column;align-items:center}
.ma-telefono::before{content:"";position:absolute;inset:8% 6% 10%;border-radius:40px;background:var(--accent-soft)}
.ma-telefono-cornice.schermata{position:relative;width:min(290px,78%);border-radius:38px;border:10px solid var(--ink-strong);
  background:var(--ink-strong);box-shadow:var(--shadow-lg);overflow:hidden}
.ma-telefono-cornice img{border-radius:28px}
.ma-telefono figcaption{position:relative}

/* 5. il caso e il conto dei passi ------------------------------------------------------------------- */
.ma-caso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;max-width:900px;margin:0 auto 26px;padding:24px 26px;
  border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.ma-caso h3,.ma-conto h3{margin:2px 0 8px;font-size:19px;color:var(--ink-strong)}
.ma-caso p,.ma-conto p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:none}
.ma-caso-icona{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--logo-gradient);color:var(--su-accento);font:800 20px/1 var(--font-display)}
.ma-caso-icona svg{width:22px;height:22px}
.ma-conto-riga{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:18px;margin-top:26px;align-items:start}
.ma-conto{padding:22px 24px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);box-shadow:var(--shadow-sm)}
.ma-conto .ma-caso-icona{margin-bottom:12px}
.ma-conto .elenco-punti li{font-size:15px}
.ma-conto-riga .riquadro.ma-tabella{margin:0}

/* 6. come si comincia, perche' fidarsi, pagine vicine ---------------------------------------------- */
.ma-comincia .ma-carta-segno{background:var(--logo-gradient);color:var(--su-accento)}
.ma-fiducia-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ma-fiducia-griglia li{margin:0;max-width:none;padding:22px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.ma-fiducia-griglia h3{margin:14px 0 6px;font-size:17px;color:var(--ink-strong)}
.ma-fiducia-griglia p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:none}
.ma-fiducia-icona{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.ma-fiducia-icona svg{width:20px;height:20px}
.ma-vicini-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ma-vicini-griglia li{margin:0;max-width:none}
.ma-vicini-griglia a{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;min-height:44px;padding:18px 48px 18px 18px;
  border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.ma-vicini-griglia a:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.ma-vicini-griglia a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ma-v-titolo{font-weight:800;font-size:16px;color:var(--ink-strong)}
.ma-v-riga{font-size:14px;line-height:1.45;color:var(--ink-2)}
.ma-vicini-griglia svg{position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--accent);transition:transform var(--tr)}
@media (prefers-reduced-motion:no-preference){ .ma-vicini-griglia a:hover svg{transform:translateX(4px)} }
.ma-vicini{padding-block:calc(var(--passo) * .7)}

/* 7. schermi medi e telefono ------------------------------------------------------------------------ */
@media (max-width:1279px){
  .ma-carte-funzioni > .ma-carta{flex-basis:calc((100% - 36px) / 3)}
}
@media (max-width:1099px){
  .ma-fiducia-griglia,.ma-vicini-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:939px){
  .ma-carte-3 > .ma-carta,.ma-carte-funzioni > .ma-carta{flex-basis:calc((100% - 18px) / 2)}
  .ma-alterna-griglia{grid-template-columns:minmax(0,1fr);gap:30px}
  .ma-alterna-media,.ma-media-sinistra .ma-alterna-media{order:-1;max-width:560px;width:100%;margin-inline:auto}
  .ma-conto-riga{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639px){
  .ma-carte{gap:12px}
  .ma-carte-3 > .ma-carta,.ma-carte-funzioni > .ma-carta{flex-basis:100%}
  .ma-carte-funzioni .ma-carta-dentro{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px}
  .ma-carte-funzioni .ma-carta-segno{grid-row:1 / span 3}
  .ma-carte-funzioni .ma-carta-link{padding-top:2px;min-height:40px}
  .ma-fiducia-griglia,.ma-vicini-griglia{grid-template-columns:minmax(0,1fr)}
  .ma-caso{grid-template-columns:minmax(0,1fr);padding:20px}
  .ma-linguette{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:2px 20px 6px;scrollbar-width:none}
  .ma-linguette::-webkit-scrollbar{display:none}
  .ma-linguette button{flex:0 0 auto}
  .ma-finestra-barra{padding:8px 10px}
  .ma-finestra-barra em{font-size:11px}
  .ma-foto img{border-width:4px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .ma-carta-dentro,.ma-carta-link svg,.ma-vicini-griglia svg{transition:none !important}
}
/* MARCA_81531_PAGINA_ATTERRAGGIO:fine */

/* MARCA_85303_TUTTE_LE_PAGINE_DEI_MESTIERI: il numero sopra i titoli lo scrive il generatore (data-n). Il conteggio
   del browser (css/mestieri-vetrina.css) sul telefono diceva «01» a tutte le sezioni: quelle sotto la piega si
   disegnano solo quando ci si arriva (84738) e ognuna ricominciava a contare da capo. */
.mv-vetrina ~ section.mestiere-centro:not(.mv-breve) > .contenitore > .testa-sezione[data-n]::before,
.mv-vetrina ~ section .ma-testa[data-n]::before{
  counter-increment:none;
  content:attr(data-n);
  content:attr(data-n) / "";
}
/* MARCA_85303: quando nella riga c'e' solo la tabella (nessun «conto» accanto), la tabella prende tutta la larghezza */
.ma-conto-riga > :only-child{grid-column:1 / -1}