/* Proposta D · tutte insieme. L'ossatura del sito per i rivenditori con i pezzi di A (film, muro,
   firma), B (catalogo, cartolina) e C (provino, lentino, cerchio). Il bordeaux del logo regge la pagina:
   testata, copertine, frasi, passi, fasce e piede sono campi pieni; l'avorio fa respirare la merce. */
.pd {
  --fondo: var(--avorio); --testo: var(--nero); --tenue: rgba(16, 16, 16, .74); --filo: rgba(16, 16, 16, .16);
  --titoli: 'Familjen Grotesk', var(--sans); --sans: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sipario: var(--bordeaux); --sipario-segno: var(--blush);
  --fondo-testata: var(--bordeaux); --testo-testata: var(--blush);
  --fondo-piede: var(--bordeaux); --testo-piede: var(--blush);
  --matita: var(--bordeaux);
  --ph: min(calc(100svh - var(--testata) - 7rem), 60vw, 900px); --pw: calc(var(--ph) * .7056);
  --spazio: clamp(4.5rem, 10vw, 9rem);
}
/* i campi bordeaux: testo avorio rosato, azione avorio rosato */
.d-cop, .d-pagehead, .d-frase, .pd-home .a-muro, .d-passi, .d-band, .d-cartolina, .d-storia, .d-famiglia--b {
  background: var(--bordeaux); color: var(--blush);
  --testo: var(--blush); --tenue: color-mix(in srgb, var(--blush) 84%, var(--bordeaux)); --filo: color-mix(in srgb, var(--blush) 26%, transparent);
  --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio);
}
.d-cop ::selection, .d-pagehead ::selection { background: var(--blush); color: var(--bordeaux); }
.pd h2 em, .pd h1 em { font-style: normal; color: var(--avorio); }
.pd .d-libro h2 em { color: var(--bordeaux); }
.d-testo-sezione { display: grid; gap: 1.1rem; max-width: 46rem; }
.d-testo-sezione h2 { font-size: var(--t-4); }
.d-testo-sezione p { font-size: var(--t-1); color: var(--tenue); }
.d-todo { outline: 1px dashed currentColor; outline-offset: 4px; padding: .1rem .3rem; }

/* ---------- testata ---------- */
.d-testata { --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio); }
.d-testata nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.d-testata .testata__fine { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.d-testata__destra { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); }
.d-menu { display: none; position: relative; }
.d-menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.d-menu summary::-webkit-details-marker { display: none; }
.d-menu summary span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .35s var(--curva-uscita); }
.d-menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.d-menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.d-menu__foglio { position: fixed; left: 0; right: 0; top: var(--testata); bottom: 0; background: var(--bordeaux); color: var(--blush);
  display: grid; align-content: start; gap: .25rem; padding: 2rem var(--margine); overflow-y: auto; }
.d-menu__foglio a { font-family: var(--titoli); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.15; text-decoration: none; min-height: 44px; }
.d-menu__foglio p { margin-top: 2rem; font-size: var(--t--1); line-height: 2.2; }
.d-menu__foglio p a { font: inherit; font-size: var(--t-0); }
@media (max-width: 1180px) { .testata .d-testata__destra { display: none; } }
@media (max-width: 1180px) { .d-menu { display: block; } }
@media (max-width: 440px) { .d-testata .btn { display: none; } }

/* ---------- copertina (da A) ---------- */
.d-cop .a-cop__titolo .num { color: var(--blush); }

/* ---------- il nastro del motto ---------- */
.d-nastro { background: var(--nero); color: var(--blush); overflow: clip; padding: 1.4rem 0; }
.d-nastro__riga { display: flex; align-items: center; gap: 2.2rem; width: max-content; padding-left: var(--margine);
  font-family: var(--titoli); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 3rem); letter-spacing: -.02em; white-space: nowrap; will-change: transform; }
.d-nastro__riga svg { fill: currentColor; flex: none; }

/* ---------- la frase ---------- */
.d-frase { padding: var(--spazio) var(--margine); display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem 5rem; align-items: end; }
.d-frase__testo { font-family: var(--titoli); font-weight: 700; font-size: var(--t-3); line-height: 1.08; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; }
.d-frase__lato { display: grid; gap: 1rem; justify-items: start; font-size: var(--t-1); }
.d-frase--chiara { background: var(--avorio); color: var(--nero); --testo: var(--nero); --tenue: rgba(16, 16, 16, .74); }
.d-frase--chiara .d-frase__testo { color: var(--bordeaux); }
@media (max-width: 860px) { .d-frase { grid-template-columns: 1fr; } }

/* ---------- le famiglie: cinque porte ---------- */
.d-porte { padding: var(--spazio) var(--margine); display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.d-porte__fila { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.75rem, 1.4vw, 1.5rem); }
.d-porta { display: grid; gap: .6rem; text-decoration: none; }
.d-porta__foto { position: relative; display: block; overflow: hidden; background: var(--avorio-2); }
.d-porta__foto img { width: 100%; aspect-ratio: 4160 / 5750; object-fit: cover; }
.d-porta__due { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .6s var(--curva-uscita); }
.d-porta:hover .d-porta__due, .d-porta:focus-visible .d-porta__due { opacity: 1; }
.d-porta__nome { font-family: var(--titoli); font-weight: 700; font-size: var(--t-1); line-height: 1.15; }
.d-porta__nome::after { content: ' →'; color: var(--bordeaux); }
.d-porta__conta { font-size: var(--t--1); color: var(--tenue); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 960px) {
  .d-porte__fila { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62vw, 300px); overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--margine)); padding: 0 var(--margine) .5rem; scrollbar-width: none; }
  .d-porta { scroll-snap-align: start; }
}

/* ---------- il catalogo (da B) ---------- */
.d-libro { background: var(--avorio-2); }
.d-libro .b-libro__testo h2 { font-size: var(--t-4); letter-spacing: -.035em; }
@media (max-width: 900px) { .moto-attivo .d-libro .b-libro__testo h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); } }

/* ---------- il muro (da A), su bordeaux ---------- */
.pd-home .a-muro__foto figcaption { background: var(--blush); color: var(--bordeaux); }
.d-muro__fine { display: flex; justify-content: center; padding: clamp(2.5rem, 6vw, 4rem) var(--margine) var(--spazio); }

/* ---------- i dettagli: il lentino e otto tagli dagli originali ---------- */
.d-dettagli { background: var(--nero); color: var(--blush); --testo: var(--blush); --tenue: color-mix(in srgb, var(--blush) 80%, var(--nero));
  padding: var(--spazio) var(--margine); display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.d-dettagli__testa { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.d-dettagli__lente.c-cop__foto { height: auto; width: min(34vw, 520px); max-height: none; }
.d-dettagli__griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.2vw, 1.25rem); }
.d-dett img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.d-dett figcaption { margin-top: .6rem; font-size: var(--t--1); font-weight: 600; }
.d-dett figcaption span { color: var(--tenue); font-weight: 400; }
.d-dettagli--corta { background: var(--avorio-2); color: var(--nero); --testo: var(--nero); --tenue: rgba(16, 16, 16, .74); }
@media (max-width: 860px) {
  .d-dettagli__testa { grid-template-columns: 1fr; }
  .d-dettagli__lente.c-cop__foto { width: 100%; order: 0; }
  .d-dettagli__griglia { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- i passi ---------- */
.d-passi { padding: var(--spazio) var(--margine); display: grid; gap: clamp(2.5rem, 5vw, 4rem); justify-items: start; }
.d-passi--nero { background: var(--nero); }
.d-passi__fila { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 2px solid var(--blush); padding-top: 2rem; }
.d-passi__fila li { display: grid; gap: .6rem; align-content: start; }
.d-passi__n { font-family: var(--titoli); font-weight: 700; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--blush); }
.d-passi__fila h3 { font-size: var(--t-2); }
.d-passi__fila p { color: var(--tenue); }
@media (max-width: 760px) { .d-passi__fila { grid-template-columns: 1fr; } }

/* ---------- la casa ---------- */
.d-casa { padding: var(--spazio) var(--margine); display: grid; grid-template-columns: minmax(0, .9fr) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.d-casa__foto img { width: 100%; }
.d-casa__testo { display: grid; gap: 1.4rem; justify-items: start; }
.d-casa__testo h2 { font-size: var(--t-3); }
.d-casa__testo > p { font-size: var(--t-1); color: var(--tenue); }
.d-casa--inversa .d-casa__foto { order: 2; }
.d-fatti { width: 100%; display: grid; border-top: 2px solid var(--bordeaux); }
.d-fatti div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--filo); }
.d-fatti dt { font-size: var(--t--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bordeaux); }
@media (max-width: 860px) { .d-casa { grid-template-columns: 1fr; } .d-casa--inversa .d-casa__foto { order: 0; } .d-fatti div { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- fasce e testate delle pagine interne ---------- */
.d-band { padding: var(--spazio) var(--margine); display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: end; }
.d-band h2 { font-size: var(--t-4); }
.d-band > div { display: grid; gap: 1.4rem; justify-items: start; font-size: var(--t-1); }
.d-pagehead { padding: calc(var(--testata) + clamp(3rem, 8vw, 6rem)) var(--margine) clamp(3rem, 7vw, 5.5rem); display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem 4rem; align-items: end; }
.d-pagehead h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 6rem); letter-spacing: -.035em; }
.d-pagehead__lato { display: grid; gap: 1.4rem; justify-items: start; font-size: var(--t-1); }
.d-salti { display: flex; flex-wrap: wrap; gap: .5rem; }
.d-salti a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--filo); text-decoration: none; font-weight: 600; font-size: var(--t--1); }
.d-salti a:hover { background: var(--blush); color: var(--bordeaux); }
@media (max-width: 860px) { .d-band, .d-pagehead { grid-template-columns: 1fr; } }

/* ---------- collezione: una striscia di pellicola per famiglia (da C) ---------- */
.d-famiglia { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.d-famiglia__testa { padding: 0 var(--margine) 1.5rem; display: grid; grid-template-columns: 1fr 1.2fr auto auto; gap: 1rem 2.5rem; align-items: end; }
.d-famiglia__testa h2 { font-size: var(--t-3); }
.d-famiglia__testa p { color: var(--tenue); }
.d-famiglia__conta { font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.d-famiglia--b .d-freccia:hover { background: var(--blush); color: var(--bordeaux); }
.d-famiglia__frecce { display: flex; gap: .5rem; }
.d-freccia { width: 48px; height: 48px; border: 1px solid var(--filo); background: none; font-size: 1.6rem; cursor: pointer; }
.d-freccia:hover { background: var(--bordeaux); color: var(--blush); border-color: var(--bordeaux); }
.pd .d-striscia { width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; --fh: clamp(170px, 26vw, 330px); cursor: grab; }
.pd .d-striscia::-webkit-scrollbar { display: none; }
.pd .d-striscia .fot { scroll-snap-align: start; }
.pd .d-striscia.trascina { cursor: grabbing; scroll-snap-type: none; }
@media (max-width: 860px) { .d-famiglia__testa { grid-template-columns: 1fr; } .d-famiglia__frecce { display: none; } .pd .d-striscia { --fh: 200px; } }
.d-filmetto { background: var(--nero); color: var(--blush); --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio);
  padding: var(--spazio) var(--margine); display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.d-filmetto__video { height: min(78svh, 900px); aspect-ratio: 9 / 16; }
.d-filmetto h2, .d-storia h2 { font-size: var(--t-3); margin-bottom: 1rem; }
.d-filmetto p, .d-storia p { margin-bottom: 1.5rem; font-size: var(--t-1); }
@media (max-width: 760px) { .d-filmetto { grid-template-columns: 1fr; } .d-filmetto__video { height: auto; width: 100%; max-width: 420px; } }

/* ---------- rivenditori ---------- */
.d-chi { padding: var(--spazio) var(--margine); display: grid; grid-template-columns: minmax(0, .8fr) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.d-chi figure img { width: 100%; }
.d-chi h2 { font-size: var(--t-3); margin-bottom: 2rem; }
.d-chi__lista { display: grid; border-top: 2px solid var(--bordeaux); }
.d-chi__lista li { display: grid; grid-template-columns: 14rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--filo); }
.d-chi__lista b { font-family: var(--titoli); font-size: var(--t-1); color: var(--bordeaux); }
@media (max-width: 860px) { .d-chi { grid-template-columns: 1fr; } .d-chi__lista li { grid-template-columns: 1fr; gap: .2rem; } }

.d-richiesta { padding: var(--spazio) var(--margine); background: var(--avorio-2); display: grid; grid-template-columns: minmax(260px, .75fr) 1.25fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.d-richiesta__lato { position: sticky; top: calc(var(--testata) + 1.5rem); display: grid; gap: 1.5rem; }
.d-richiesta__lato h2 { font-size: var(--t-3); }
.d-richiesta__lato > p { font-size: var(--t-1); color: var(--tenue); }
.d-ricevi { display: grid; gap: .9rem; }
.d-ricevi li { display: grid; padding-left: 1.6rem; position: relative; }
.d-ricevi li::before { content: ''; position: absolute; left: 0; top: .45em; width: .7rem; height: .7rem; background: var(--bordeaux); }
.d-ricevi span { color: var(--tenue); font-size: var(--t--1); }
.d-avanza p { display: flex; justify-content: space-between; font-size: var(--t--1); font-weight: 600; max-width: none; margin-bottom: .5rem; }
.d-avanza__barra { height: 4px; background: rgba(16, 16, 16, .12); }
.d-avanza__barra i { display: block; height: 100%; width: var(--fatto, 0%); background: var(--bordeaux); transition: width .5s var(--curva-uscita); }
.d-scelti { padding: 1rem; background: var(--bordeaux); color: var(--blush); display: grid; gap: .75rem; }
.d-scelti ol { display: flex; flex-wrap: wrap; gap: .5rem; }
.d-scelti li { display: grid; justify-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; }
.d-scelti img { width: 48px; height: 66px; object-fit: cover; outline: 2px solid var(--blush); }
.d-richiesta__tel { font-size: var(--t--1); }
.d-modulo { display: grid; gap: 2rem; }
.d-modulo fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.d-modulo legend { font-family: var(--titoli); font-weight: 700; font-size: var(--t-2); margin-bottom: .6rem; padding: 0; }
.d-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.d-campo { display: grid; gap: .35rem; }
.d-campo label, .d-campo__etichetta { font-size: var(--t--1); font-weight: 600; }
.d-campo input, .d-campo textarea { min-height: 56px; padding: .8rem 1rem; border: 1px solid rgba(16, 16, 16, .3); background: #fff; font-size: 1rem; border-radius: 0; }
.d-campo input:focus-visible, .d-campo textarea:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 1px; border-color: var(--bordeaux); }
.d-campo input[aria-invalid="true"] { border-color: var(--bordeaux); box-shadow: inset 0 -3px 0 var(--bordeaux); }
.d-tessere { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.d-tessera { position: relative; }
.d-tessera input { position: absolute; opacity: 0; inset: 0; }
.d-tessera span { display: grid; place-items: center; text-align: center; min-height: 56px; padding: .5rem; border: 1px solid rgba(16, 16, 16, .3); background: #fff; font-weight: 600; font-size: var(--t--1); cursor: pointer; }
.d-tessera input:checked + span { background: var(--bordeaux); color: var(--blush); border-color: var(--bordeaux); }
.d-tessera input:focus-visible + span { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.d-consenso { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font-size: var(--t--1); }
.d-consenso { min-height: 44px; } .d-consenso input { width: 24px; height: 24px; margin: 0; }
.d-modulo__piede { display: grid; gap: 1rem; justify-items: start; }
.d-modulo__piede p { font-size: var(--t--1); color: var(--tenue); }
.d-fatto { padding: 2.5rem; background: var(--bordeaux); color: var(--blush); display: grid; gap: 1rem; justify-items: start; }
.d-fatto h3 { font-size: var(--t-3); }
@media (max-width: 960px) { .d-richiesta { grid-template-columns: 1fr; } .d-richiesta__lato { position: static; } }
@media (max-width: 600px) { .d-coppia { grid-template-columns: 1fr; } .d-tessere { grid-template-columns: 1fr 1fr; } }

.d-faq { padding: var(--spazio) var(--margine); display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem 5rem; align-items: start; }
.d-faq h2 { font-size: var(--t-3); }
.d-faq__lista { border-top: 2px solid var(--bordeaux); }
.d-faq__voce { border-bottom: 1px solid var(--filo); }
.d-faq__voce summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 700; font-size: var(--t-1); list-style: none; }
.d-faq__voce summary::-webkit-details-marker { display: none; }
.d-faq__voce summary::after { content: '+'; font-size: 1.6rem; color: var(--bordeaux); transition: transform .35s var(--curva-uscita); }
.d-faq__voce[open] summary::after { transform: rotate(45deg); }
.d-faq__voce p { padding: 0 0 1.25rem; color: var(--tenue); }
@media (max-width: 860px) { .d-faq { grid-template-columns: 1fr; } }

/* ---------- la casa, contatti ---------- */
.d-lastra { position: relative; }
.d-lastra__foto { height: 86svh; overflow: hidden; }
.d-lastra__foto img { width: 100%; height: 100%; object-fit: cover; }
.d-lastra--bassa .d-lastra__foto { height: 64svh; }
.d-lastra__testo { position: absolute; left: var(--margine); bottom: var(--margine); background: var(--bordeaux); color: var(--blush); padding: 1.2rem 1.6rem;
  font-family: var(--titoli); font-weight: 700; font-size: var(--t-3); line-height: 1; max-width: calc(100% - 2 * var(--margine)); }
.d-storia { padding: var(--spazio) var(--margine); display: grid; gap: clamp(3rem, 7vw, 6rem); }
.d-storia__todo { max-width: 46rem; }
.d-storia__film { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.d-storia__film figure { height: min(76svh, 860px); aspect-ratio: 9 / 16; }
@media (max-width: 760px) { .d-storia__film { grid-template-columns: 1fr; } .d-storia__film figure { height: auto; width: 100%; max-width: 420px; } }
.d-info { padding: clamp(3rem, 7vw, 5rem) var(--margine); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem; }
.d-info h2 { font-size: var(--t--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: .6rem; }
.d-info address { font-style: normal; }
.d-cartolina .b-cartolina__testo p { color: var(--tenue); }

/* ---------- piede ---------- */
.d-piede .logo { width: min(86vw, 900px); margin: 0 auto clamp(3rem, 7vw, 5rem); }
.d-piede .piede__griglia { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.d-piede a, .d-menu__foglio a { min-width: 44px; }
.d-motto { margin-top: 1rem; font-family: var(--titoli); font-weight: 700; font-size: var(--t-1); }
.pd [hidden] { display: none !important; }

/* ---------- giro di revisione mobile (12.10) ---------- */
/* il catalogo sul telefono: la pagina prende la larghezza, il testo si accorcia */
@media (max-width: 900px) {
  .pd { --ph: min(calc(100svh - var(--testata) - 9.5rem), calc((100vw - 2 * var(--margine)) * 1.417)); }
  .moto-attivo .d-libro .b-libro__testo p { display: none; }
  .moto-attivo .d-libro .b-fine { padding: 10% 9%; gap: .9rem; }
  .moto-attivo .d-libro .b-fine__testo { font-size: clamp(1rem, 4.4vw, 1.5rem); }
  .moto-attivo .d-libro .b-fine .btn { font-size: var(--t--1); padding: .7rem 1rem; }
}
/* le porte: il primo capo non si incolla al bordo quando lo scorrimento si aggancia */
.d-porte__fila { scroll-padding-inline: var(--margine); }
/* il lentino e i tagli dei dettagli: mai più alti dello schermo; tessere quante ne stanno */
.d-dettagli__griglia { grid-template-columns: repeat(auto-fill, minmax(min(44%, 200px), 1fr)); }
@media (max-width: 860px) { .d-dettagli__lente.c-cop__foto { width: min(100%, calc(82svh * .7235)); justify-self: center; } }
.d-casa__foto img, .d-chi figure img { max-height: 86svh; width: auto; max-width: 100%; margin-inline: auto; }
/* telefono in orizzontale: due colonne invece di una pila che non sta nello schermo */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .d-cop.a-cop { grid-template-columns: auto 1fr; padding: calc(var(--testata) + .5rem) var(--margine) 1rem; gap: 2rem; align-items: center; }
  .d-cop .a-cop__film { order: -1; height: calc(100svh - var(--testata) - 1.5rem); width: auto; aspect-ratio: 720 / 1280; grid-row: span 2; }
  .d-cop .a-cop__testo { padding: 0; }
  .d-cop .a-cop__titolo { font-size: clamp(2rem, 6vw, 3rem); }
  .d-cop .a-cop__scritta { order: 3; margin: 0; width: min(60%, 240px); }
  .pd { --ph: calc(100svh - var(--testata) - 3rem); }
  .moto-attivo .d-libro .b-libro__palco { grid-template-columns: 1fr auto; grid-template-rows: 1fr; align-items: center; gap: 2rem; padding-bottom: 1rem; }
  .moto-attivo .d-libro .b-libro__libro { margin: 0; }
  .moto-attivo .d-libro .b-libro__testo p { display: block; }
  .d-filmetto__video, .d-storia__film figure { height: calc(100svh - var(--testata) - 2rem); width: auto; }
  .d-filmetto, .d-storia__film { grid-template-columns: auto 1fr; }
  .d-lastra__foto { height: calc(100svh - var(--testata)); }
}
/* il vassoio non copre la fine della pagina */
.pd main { padding-bottom: 0; }
body.pd:has(.c-vassoio:not([hidden])) .piede { padding-bottom: 6rem; }
/* il menu del telefono: le regole della testata (nav in fila, voci piccole maiuscole) non devono arrivare al foglio */
.testata .d-menu__foglio { display: grid; gap: .1rem; }
.testata .d-menu__foglio > a { font-size: clamp(2rem, 9vw, 3rem); text-transform: none; letter-spacing: -.02em; font-weight: 700; }
.testata .d-menu__foglio p a { font-size: var(--t-0); text-transform: none; letter-spacing: 0; font-weight: 600; min-height: 44px; }
.testata .d-menu__foglio p { max-width: none; overflow-wrap: anywhere; }
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .d-cop .a-cop__scritta { display: none; }
  .d-cop .a-cop__film { height: calc(100svh - var(--testata) - 1.5rem) !important; grid-row: auto; }
  .d-menu__foglio { grid-template-columns: 1fr 1fr; align-content: center; }
  .testata .d-menu__foglio > a { font-size: 1.6rem; }
}

/* telefono in orizzontale: la farfalla di rotta copriva il bordo delle pagine */
@media (max-height: 520px) { .rotta { display: none; } }

/* ---------- conversione (13.10): il sito porta al rivenditore ---------- */
/* «Hai un negozio?»: la proposta ai rivenditori, a campo pieno, subito dopo le famiglie */
.d-riv { background: var(--bordeaux); color: var(--blush); --testo: var(--blush); --tenue: color-mix(in srgb, var(--blush) 84%, var(--bordeaux));
  --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio);
  padding: var(--spazio) var(--margine); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 6vw, 6rem); }
.d-riv__testa { display: grid; gap: 1.4rem; align-content: start; justify-items: start; }
.d-riv__testa h2 { font-size: var(--t-4); letter-spacing: -.035em; }
.d-riv__testa p { font-size: var(--t-1); color: var(--tenue); max-width: 40ch; }
.d-riv__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.d-riv__azioni .btn { min-height: 56px; padding: 1rem 1.6rem; font-size: var(--t-1); }
.d-riv__cosa { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; align-content: start; }
.d-riv__cosa li { display: grid; gap: .4rem; padding-top: 1rem; border-top: 2px solid var(--blush); }
.d-riv__cosa b { font-family: var(--titoli); font-size: var(--t-1); }
.d-riv__cosa span { color: var(--tenue); font-size: var(--t--1); line-height: 1.5; }
.d-riv__passi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; padding-top: 2rem; border-top: 1px solid var(--filo); counter-reset: n; }
.d-riv__passi li { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: baseline; }
.d-riv__passi .num { grid-row: span 2; font-family: var(--titoli); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--blush); }
.d-riv__passi b { font-size: var(--t-1); }
.d-riv__passi span:not(.num) { color: var(--tenue); font-size: var(--t--1); }
.d-riv__gia { grid-column: 1 / -1; font-size: var(--t--1); color: var(--tenue); }
.d-riv--corta { grid-template-columns: 1fr; padding-block: clamp(3rem, 7vw, 5rem); }
.d-riv--corta h2 { font-size: var(--t-3); }
@media (max-width: 860px) { .d-riv { grid-template-columns: 1fr; } .d-riv__passi { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .d-riv__cosa { grid-template-columns: 1fr; } }

/* l'invito in coda alle sezioni */
.d-dopo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.75rem; border-top: 1px solid var(--filo); max-width: none; }
.d-dopo span { font-family: var(--titoli); font-weight: 700; font-size: var(--t-1); }
.d-dettagli .d-dopo { --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio); }
.d-muro__fine { gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.pd-home .a-muro .d-muro__fine { --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio); }

/* in fondo a ogni striscia della collezione */
.d-fine-striscia { flex: none; height: var(--fh); width: calc(var(--fh) * .78); display: grid; align-content: center; gap: 1rem; padding: 1rem;
  background: var(--bordeaux); color: var(--blush); --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio); scroll-snap-align: end; }
.d-fine-striscia p { font-family: var(--titoli); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.4rem); line-height: 1.15; }
.d-fine-striscia .btn { font-size: var(--t--1); padding: .6rem .9rem; min-height: 44px; }
.d-famiglia--b .d-fine-striscia { background: var(--blush); color: var(--bordeaux); --azione: var(--bordeaux); --azione-testo: var(--blush); --azione-hover: var(--nero); }

/* il piede si apre con l'invito */
.d-piede__invito { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.5rem; margin-bottom: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid color-mix(in srgb, var(--blush) 35%, transparent); --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio); }
.d-piede__invito p { flex: 1 1 22rem; font-size: var(--t-1); max-width: none; }
.d-piede__invito .link { color: var(--blush); }

/* la richiesta in cima al menu del telefono */
.testata .d-menu__foglio > a.d-menu__cta { justify-self: start; margin-bottom: 1.25rem; padding: .7rem 1.1rem; background: var(--blush); color: var(--bordeaux); font-size: clamp(1.3rem, 6vw, 1.8rem); }
.d-tessere--due { grid-template-columns: repeat(2, minmax(0, 8rem)); }

/* la barra del telefono: «Diventa rivenditore» e «Chiama» sempre a un tocco */
.d-barra { display: none; }
@media (max-width: 760px) {
  .d-barra { display: grid; grid-template-columns: 1fr auto; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: .55rem var(--margine) calc(.55rem + env(safe-area-inset-bottom)); background: var(--bordeaux); box-shadow: 0 -10px 30px -12px rgba(16, 16, 16, .45);
    --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio); transition: transform .45s var(--curva-uscita); }
  .d-barra .btn { justify-content: center; min-height: 48px; }
  .d-barra__tel { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1rem; border: 1px solid var(--blush); color: var(--blush); text-decoration: none; font-weight: 700; font-size: var(--t--1); }
  .d-barra.via { transform: translateY(110%); }
  body.pd { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.pd:has(.c-vassoio:not([hidden])) .d-barra { transform: translateY(110%); }
  .c-vassoio { bottom: max(1rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) and (max-height: 520px) { .d-barra { padding-block: .35rem calc(.35rem + env(safe-area-inset-bottom)); } }
.d-lingua { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-weight: 700; font-size: var(--t--1); letter-spacing: .06em; text-decoration: none; }
.d-lingua:hover { text-decoration: underline; }
.d-piede a { min-width: 48px; }
/* da 761 px la testata si toglie scendendo: l'invito resta a portata in basso a destra finché lei non torna */
@media (min-width: 761px) {
  .d-barra { display: flex; gap: .5rem; position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 1000; padding: .45rem; background: var(--bordeaux);
    box-shadow: 0 18px 40px -16px rgba(16, 16, 16, .55); --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio);
    transform: translateY(160%); transition: transform .45s var(--curva-uscita); }
  .d-barra.su { transform: none; }
  .d-barra.via { transform: translateY(160%); }
  .d-barra__tel { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--blush); color: var(--blush); text-decoration: none; font-weight: 700; font-size: var(--t--1); }
  body.pd:has(.c-vassoio:not([hidden]):not(.via)) .d-barra { transform: translateY(160%); }
}
.pd .link, .pd .d-casa__testo .link { min-width: 48px; }