/* MARCA_80925_TESTATA_CON_FOTO — le pagine dei mestieri con la foto in cima (consegna 80925, 24/9/2026).
   «le pagine landing seo ognuna per ogni settore abbia una grafica carina con foto che attirino
   soprattuto la prima come hai fatto per la vendita delle foto online» (Giovanni).
   Testata: un misto di due componenti di 21st.dev approvati da Giovanni (hero-01: titolo che entra,
   pulsanti, riga di fiducia, nastro; sidebar: tessere dei numeri e ultime cose fatte come anteprima del
   programma), rifatti in CSS semplice. Niente stelle ne' recensioni: la riga di fiducia sono le foto dei
   mestieri, l'anteprima dice «Esempio con dati di fantasia».
   Lo carica SOLO una pagina costruita da strumenti/genera-pagine-mestiere.py che ha le sue foto:
   le altre pagine del sito non lo vedono. Solo token di temi.css: chiaro e scuro vanno da soli.
   Per toglierlo: consegna 80926. */

/* 1. la vetrina in cima: testo a sinistra, la foto del mestiere a destra con il bollino e l'anteprima */
.mv-vetrina{
  position:relative;overflow:hidden;
  padding-top:clamp(18px,2.6vw,40px);
  background:
    radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 60%),
    linear-gradient(165deg,var(--surface) 0%,var(--ground) 60%,var(--surface-2) 100%);
  border-bottom:1px solid var(--line-soft);
}
.mv-griglia{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:start}
/* il titolo sta in alto, non a meta' altezza (Giovanni, 24/9: «il titolo a sinistra e' troppo basso») */
.mv-testo{min-width:0;padding-top:clamp(0px,1.2vw,18px)}
.mv-testo .briciole{margin-bottom:16px}
.mv-vetrina h1{position:relative;margin:0;padding-bottom:18px;font-size:clamp(31px,4.1vw,54px);line-height:1.07;
  letter-spacing:-.02em;color:var(--ink-strong);max-width:none;text-wrap:balance}
.mv-vetrina h1::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:5px;border-radius:999px;background:var(--logo-gradient)}
.mv-frase{margin:16px 0 0;font-size:clamp(16.5px,1.45vw,19px);line-height:1.55;color:var(--ink-2);max-width:62ch}
.mv-vetrina .gruppo-bottoni{margin-top:26px}
/* la riga di fiducia: le foto di cinque mestieri, niente stelle */
.mv-fiducia{display:flex;align-items:center;gap:14px;margin-top:24px}
.mv-tondi{display:flex;flex:0 0 auto}
.mv-tondi img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);background:var(--surface-2);box-shadow:var(--shadow-sm)}
.mv-tondi img + img{margin-left:-12px}
.mv-fiducia p{margin:0;max-width:34ch;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink)}

.mv-palco{position:relative;min-width:0;padding:6px 0 30px}
.mv-palco::before{content:"";position:absolute;inset:0 0 9% 22%;border-radius:32px;background:var(--logo-gradient);opacity:.15;transform:rotate(-4deg)}
.mv-foto{position:relative;display:block;width:100%;max-width:430px;height:auto;margin-left:auto;aspect-ratio:4/5;
  object-fit:cover;border-radius:26px;border:6px solid var(--surface);background:var(--surface-2);
  box-shadow:0 32px 64px -30px rgba(43,35,32,.6);transform:rotate(1.4deg)}
.mv-bollo{position:absolute;z-index:3;left:0;top:7%;display:flex;align-items:center;gap:11px;padding:11px 16px 11px 12px;
  border-radius:16px;background:var(--surface);color:var(--ink-strong);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);max-width:260px}
.mv-bollo p{margin:0;max-width:none}
.mv-bollo-titolo{font-size:14px;font-weight:700;line-height:1.25}
.mv-bollo-sotto{margin-top:3px !important;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.mv-bollo-icona{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.mv-bollo-icona svg{width:18px;height:18px}
/* l'anteprima del programma: tessere dei numeri e ultime cose fatte (dati di fantasia) */
.mv-anteprima{position:absolute;z-index:2;left:0;bottom:0;width:min(318px,64%);padding:14px;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.mv-ant-testa{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.mv-ant-testa p{margin:0;max-width:none}
.mv-ant-titolo{font-size:13.5px;font-weight:800;color:var(--ink-strong)}
.mv-ant-nota{font-size:11px;color:var(--ink-3);text-align:right}
.mv-tessere{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.mv-tessere li{margin:0;padding:9px 9px 8px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-soft);max-width:none;min-width:0}
.mv-tessere p{margin:0;max-width:none}
.mv-t-valore{font-size:18px;font-weight:800;line-height:1.1;color:var(--ink-strong);white-space:nowrap;letter-spacing:-.01em}
.mv-t-nome{margin-top:3px !important;font-size:11.5px;line-height:1.25;color:var(--ink-2)}
.mv-t-sotto{display:flex;align-items:center;gap:4px;margin-top:5px !important;font-size:10.5px;line-height:1.2;color:var(--ok);font-weight:600}
.mv-t-sotto svg{width:11px;height:11px;flex:0 0 11px}
.mv-fatti{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.mv-fatti li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;margin:0;padding:6px 2px;
  border-top:1px solid var(--line-soft);max-width:none}
.mv-fatti p{margin:0;max-width:none}
.mv-f-icona{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.mv-f-icona svg{width:14px;height:14px}
.mv-f-testo{font-size:12.5px;line-height:1.3;color:var(--ink)}
.mv-f-quando{font-size:11px;color:var(--ink-3);white-space:nowrap}
/* il nastro in fondo alla testata: le righe con la spunta che scorrono */
.mv-nastro{position:relative;display:flex;overflow:hidden;margin-top:clamp(26px,3vw,44px);padding-block:14px;
  border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface) 70%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mv-nastro-fila{list-style:none;margin:0;padding:0 0 0 36px;display:flex;flex:0 0 auto;gap:36px;min-width:max-content}
.mv-nastro-fila li{display:flex;align-items:center;gap:9px;margin:0;max-width:none;white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--ink)}
.mv-nastro-fila svg{width:17px;height:17px;flex:0 0 17px;color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .mv-vetrina h1,.mv-frase,.mv-vetrina .gruppo-bottoni,.mv-fiducia{animation:mv-entra .6s cubic-bezier(.2,.7,.2,1) both}
  .mv-frase{animation-delay:.08s}
  .mv-vetrina .gruppo-bottoni{animation-delay:.16s}
  .mv-fiducia{animation-delay:.24s}
  .mv-vetrina h1::after{transform-origin:left;animation:mv-riga .9s .35s cubic-bezier(.2,.7,.2,1) both}
  .mv-bollo,.mv-anteprima{animation:mv-entra .7s .3s cubic-bezier(.2,.7,.2,1) both}
  .mv-anteprima{animation-delay:.5s}
  .mv-nastro-fila{animation:mv-scorre 46s linear infinite}
  .mv-nastro:hover .mv-nastro-fila{animation-play-state:paused}
  @keyframes mv-entra{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
  @keyframes mv-riga{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes mv-scorre{from{transform:translateX(0)}to{transform:translateX(-100%)}}
}
@media (prefers-reduced-motion:reduce){
  .mv-nastro{-webkit-mask-image:none;mask-image:none}
  .mv-nastro-fila{flex-wrap:wrap;min-width:0;flex:1 1 auto;gap:10px 28px;padding-inline:20px}
  .mv-nastro-fila[aria-hidden="true"]{display:none}
}

/* 2. il sommario sotto i quattro passi: occhiello e testo in alto a sinistra, la seconda foto a destra */
.mv-breve.vetrina-giro{padding-block:clamp(34px,4.4vw,64px) clamp(38px,4.6vw,68px)}
.mv-breve-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start}
.mv-breve-testo{min-width:0;text-align:left}
.mv-breve .occhiello{margin:0}
.mv-breve .sommario{margin:16px 0 0;max-width:62ch;font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.62;color:var(--ink-2);text-align:left}
.mv-breve-foto{position:relative;margin:0;min-width:0}
.mv-breve-foto::before{content:"";position:absolute;inset:14% -3% -5% 10%;border-radius:26px;background:var(--accent-soft)}
.mv-breve-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)}

/* 3. le sezioni piu' vive: il numero sopra ogni titolo, le schede con il filo di colore, la chiusura */
main:has(> .mv-vetrina){counter-reset:mv-sezione}
.mv-vetrina ~ section.mestiere-centro:not(.mv-breve) > .contenitore > .testa-sezione::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:12px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent);font:800 13px/1 var(--font-sans);letter-spacing:.1em}
.mv-vetrina ~ section .scheda,.mv-vetrina ~ section .riquadro{border-top:3px solid var(--accent)}
.mv-vetrina ~ section .passo{border-top:3px solid var(--accent)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mv-vetrina ~ section .scheda{transition:transform var(--tr),box-shadow var(--tr)}
  .mv-vetrina ~ section .scheda:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
}
.mv-vetrina ~ section .richiamo{position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
             linear-gradient(160deg,var(--surface),var(--surface-2))}
.mv-vetrina ~ section .richiamo::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}

/* 4. il richiamo a meta' pagina, con le colonne che scorrono (css/colonne-3d.css) */
.mv-richiamo-meta{position:relative;overflow:hidden;border-block:1px solid var(--line-soft);
  background:radial-gradient(90% 120% at 0% 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%),
             linear-gradient(160deg,var(--surface),var(--surface-2))}
.mv-rm-griglia{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.mv-rm-testo{min-width:0}
.mv-rm-testo h2{margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;color:var(--ink-strong);text-wrap:balance}
.mv-rm-testo p{margin:14px 0 0;font-size:clamp(16px,1.35vw,18px);line-height:1.55;color:var(--ink-2);max-width:48ch}
.mv-rm-colonne{min-width:0}
.mv-rm-colonne .c3d{--c3d-altezza:440px}
.mv-c3d-icona{display:grid;place-items:center;width:30px;height:30px;margin-bottom:10px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.mv-c3d-icona svg{width:16px;height:16px}
.c3d-schermata img{object-fit:cover}

/* 5. schermi medi e telefono */
@media (max-width:939px){
  .mv-griglia,.mv-breve-griglia,.mv-rm-griglia{grid-template-columns:minmax(0,1fr)}
  .mv-palco{max-width:520px;width:100%;margin-inline:auto}
  .mv-foto{margin-inline:auto}
}
@media (max-width:699px){
  .mv-palco{padding:4px 0 0}
  .mv-palco::before{inset:0 2% 30% 8%}
  .mv-foto{aspect-ratio:5/5.2;border-width:4px;border-radius:20px;transform:none}
  .mv-bollo{top:14px;left:10px;max-width:230px;padding:9px 12px 9px 10px;gap:9px}
  .mv-bollo-titolo{font-size:13px}
  .mv-bollo-sotto{font-size:12px}
  .mv-bollo-icona{width:30px;height:30px;flex-basis:30px}
  .mv-anteprima{position:relative;left:auto;bottom:auto;width:auto;margin:-54px 12px 0}
  .mv-fiducia{align-items:flex-start}
  .mv-nastro-fila li{font-size:13.5px}
  .mv-breve-foto img{border-width:4px;border-radius:18px}
  .mv-rm-colonne .c3d{--c3d-altezza-telefono:360px}
}
/* MARCA_80925_TESTATA_CON_FOTO:fine */

/* MARCA_80929_HOME_FOTO — la home, sotto «Tipologia di lavoro» (consegna 80929, 24/9/2026): «il titolo a sinistra
   e' troppo basso e la foto sotto non e' accattivante» (Giovanni). Il titolo sale in alto, la foto
   dell'artigiano con il bollino e l'anteprima prende il posto del ritaglio. Per toglierlo: 80930. */
.vetrina-col-giro:has(> .mv-palco-home){align-items:start}
.vetrina-col-giro:has(> .mv-palco-home) > .vetrina-parola{padding-top:clamp(0px,1.4vw,20px)}
.mv-palco-home{width:100%;max-width:560px;justify-self:end}
@media (max-width:940px){
  .mv-palco-home{justify-self:center}
  .vetrina-col-giro:has(> .mv-palco-home) > *{order:3}
  .vetrina-col-giro:has(> .mv-palco-home) > .vetrina-parola{order:1}
  .vetrina-col-giro:has(> .mv-palco-home) > .mv-palco-home{order:2}
}
@media (max-width:700px){
  .vetrina-col-giro > .vetrina-schermo.mv-palco-home{display:block}
}
/* MARCA_80929_HOME_FOTO:fine */