/* Sarta di Casa · ritocchi sopra l'impianto del preferito
   la headline col taglio «parola gigante», i libri in codice (guida e bonus), i prezzi dei bonus */

/* ── headline: «la sarta di casa» enorme, il resto sotto ── */
.hl-sarta { margin-top: 0; }
.hl-sarta .hs-1 { display: block; font: italic 700 clamp(30px, 8vw, 46px)/1 var(--titoli); color: var(--rosso); letter-spacing: -.01em; animation: entra-giu .6s .1s both; }
.hl-sarta .hs-2 { display: block; margin-top: 4px; font: 900 clamp(50px, 14.2vw, 104px)/.94 var(--titoli); letter-spacing: -.035em; color: var(--blu); font-variation-settings: "opsz" 144; animation: entra-pop .8s .3s both; }
.sott-g { position: relative; display: inline; }
.hl-sarta .sott-h { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .22em; overflow: visible; }
.hl-sarta .sott-h path { fill: none; stroke: var(--rosso); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia 1s 1.1s ease-out forwards; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
.hs-3 { margin-top: 18px; font: 600 clamp(22px, 5.8vw, 34px)/1.2 var(--titoli); color: var(--blu); letter-spacing: -.01em; text-wrap: balance; animation: entra-su .6s .7s both; }
.hs-3 em { font-style: italic; font-weight: 800; color: var(--rosso); }
@media (prefers-reduced-motion: reduce) { .hl-sarta .sott-h path { stroke-dashoffset: 0; animation: none; } }

/* ── i libri in codice: copertina in carta, filo rosso, ago ── */
.libro { position: relative; aspect-ratio: 3 / 4; background: linear-gradient(135deg, #FFF8F1, #F6E3D6); border-radius: 4px 12px 12px 4px; box-shadow: inset 8px 0 0 var(--blu), inset 10px 0 0 rgba(255,255,255,.4), 0 18px 34px rgba(58,26,44,.3); padding: 9% 9% 9% 15%; display: flex; flex-direction: column; overflow: hidden; color: var(--blu); }
.libro::after { content: ""; position: absolute; inset: 6% 6% 6% 12%; border: 1.5px dashed rgba(194,50,58,.45); border-radius: 6px; pointer-events: none; }
.lb-occhiello { font: 800 clamp(9px, 2.2vw, 12px)/1.2 var(--testo); letter-spacing: .14em; text-transform: uppercase; color: var(--rosso); }
.lb-titolo { margin-top: 8%; font: 900 clamp(26px, 7.4vw, 44px)/.92 var(--titoli); letter-spacing: -.03em; }
.lb-usp { margin-top: auto; font: 600 clamp(10px, 2.6vw, 13px)/1.3 var(--testo); color: #5A3A46; }
.lb-filo { position: absolute; left: 12%; right: -10%; top: 54%; height: 30px; background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath d='M0 20 C40 2 70 28 110 14 S170 4 200 16' fill='none' stroke='%23C2323A' stroke-width='2.4' stroke-dasharray='7 5'/%3E%3C/svg%3E"); }
.lb-ago { position: absolute; right: 9%; top: 9%; width: 9px; height: 46%; border-radius: 4px; background: linear-gradient(90deg, #8F969E, #E7EBEF 45%, #9AA0A8); transform: rotate(18deg); box-shadow: 0 4px 8px rgba(0,0,0,.18); }
.lb-ago::before { content: ""; position: absolute; left: 2.5px; top: 6px; width: 4px; height: 16px; border-radius: 2px; background: #F6E3D6; }
.ap-libro { position: absolute; left: -10%; bottom: 0; width: 52%; animation: entra-pop .9s .8s both, galleggia 6s 1.8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@media (max-width: 1023.98px) { .ap-libro { left: -4%; width: 46%; } }
@media (prefers-reduced-motion: reduce) { .ap-libro { animation: none; } }

/* il pacchetto: la guida davanti, i tre bonus a ventaglio dietro */
.bundle { position: relative; width: min(520px, 100%); aspect-ratio: 5 / 4; margin: 34px auto 0; }
.bundle .libro { position: absolute; width: 44%; bottom: 4%; }
.bundle .bl-main { left: 28%; width: 48%; bottom: 0; z-index: 4; }
.bundle .bl-b1 { left: 2%; rotate: -10deg; z-index: 1; background: linear-gradient(135deg, #F5D8CB, #EFA894); }
.bundle .bl-b2 { left: 28%; bottom: 14%; rotate: -2deg; z-index: 2; background: linear-gradient(135deg, #F4EBE1, #D4B08C); }
.bundle .bl-b3 { right: 0; rotate: 9deg; z-index: 3; background: linear-gradient(135deg, #E9C6B4, #C98571); }
.bundle .libro:not(.bl-main) .lb-titolo { font-size: clamp(17px, 4.6vw, 26px); }
.bundle .bl-main .lb-titolo { font-size: clamp(28px, 7.6vw, 46px); }

/* bonus: copertina grande, BONUS #, prezzo barrato e GRATIS */
.cartellino .copertina-bonus { grid-column: 1 / -1; width: 62%; margin: 0 auto 10px; }
.cartellino .copertina-bonus .lb-titolo { font-size: clamp(22px, 6vw, 30px); }
.cb-1 { background: linear-gradient(135deg, #F5D8CB, #EFA894); }
.cb-2 { background: linear-gradient(135deg, #F4EBE1, #D4B08C); }
.cb-3 { background: linear-gradient(135deg, #E9C6B4, #C98571); }
.b-num { display: block; font: 800 14px/1 var(--testo); letter-spacing: .14em; color: var(--rosso); margin-bottom: 6px; }
.b-prezzo { display: block; margin-top: 10px; font: 700 18px/1 var(--testo); }
.b-prezzo s { color: var(--grigio); font-weight: 600; }
.b-prezzo b { display: inline-block; background: var(--rosso); color: #fff; font: 900 20px/1 var(--titoli); padding: 6px 10px 5px; border-radius: 8px; rotate: -2deg; margin: 0 4px; }
@media (min-width: 720px) { .cartellini { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cartellino .copertina-bonus { width: 80%; } }

/* prima/dopo coi segnaposto */
.pd-foto { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.pd-prima { background: linear-gradient(160deg, #E9C6B4, #B97A66 60%, #5E2836); }

/* strappo: la frase sul foglio */
#s04b .mo-detto, #s04b .mo-titolo { font-family: var(--titoli); }
#s04b .mo-detto { font-family: var(--mano); }
#s04b .mo-cappello { font-family: var(--testo); font-size: 16px; }
#s04b .mo-chi { font-size: 17px; }

/* piede */
.logo-testo { font: 900 italic 26px/1 var(--titoli); color: #fff; margin-bottom: 14px; }
.piede { font-size: 16px; }

/* segnaposto: finché la foto vera non c'è, l'etichetta piccola resta in un angolo */
.foto-seg.seg::after, .fondo-seg.seg::after { display: block; z-index: 2; }
.foto-seg.quadra.seg::after { display: none; }
.pd-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* lo strappo: il titolo sulla foto più giù, con l'aria al computer */
@media (min-width: 720px) { #s04b .mo-testo { top: calc(15vh + env(safe-area-inset-top, 0px)); } }
.busta-tot b { white-space: nowrap; }

/* il pacchetto, a ventaglio senza coprire i titoli */
.bundle .libro { width: 37%; bottom: 3%; }
.bundle .bl-main { left: 30%; width: 40%; bottom: 0; }
.bundle .bl-b1 { left: 0; rotate: -8deg; }
.bundle .bl-b3 { left: auto; right: 0; rotate: 8deg; text-align: right; padding: 9% 9% 9% 30%; }
.bundle .bl-b2 { left: 31.5%; bottom: 38%; rotate: 0deg; }
.bundle .libro:not(.bl-main) .lb-titolo { font-size: clamp(14px, 3.8vw, 22px); margin-top: 6%; }
.bundle .bl-b1 { padding-right: 30%; }

/* i libri si misurano su sé stessi: il titolo resta intero a ogni larghezza */
.libro { container-type: inline-size; }
.libro .lb-occhiello { font-size: max(9px, 5.2cqw); }
.libro .lb-titolo { font-size: 15cqw; }
.libro .lb-usp { font-size: max(9px, 5.6cqw); }
.bundle .libro:not(.bl-main) .lb-titolo { font-size: 11.5cqw; }
.bundle .bl-main .lb-titolo { font-size: 15cqw; }
.cartellino .copertina-bonus .lb-titolo { font-size: 13cqw; }
@media (min-width: 720px) {
  .cartellino { grid-template-columns: minmax(0, 1fr); padding: 30px 16px 18px; }
  .cartellino .em { display: none; }
  .cartellino .copertina-bonus { width: 86%; }
}
.libro .lb-titolo, .bundle .bl-main .lb-titolo { font-size: 21cqw; }
.bundle .libro:not(.bl-main) .lb-titolo { font-size: 14cqw; }
.cartellino .copertina-bonus .lb-titolo { font-size: 16cqw; }
.libro .lb-occhiello { font-size: max(9px, 6.5cqw); }
.libro .lb-usp { font-size: max(9px, 7cqw); }
.ap-libro .lb-titolo { font-size: clamp(28px, 8.4vw, 46px); }

/* scena 10 · il film del sogno: avanza con lo scroll, titolo nello spazio libero (a destra al computer, in alto al telefono) */
#s10.s10 { padding-top: 64px; }
@media (min-width: 720px) { #s10.s10 { padding-top: 0; } }
.s10-film { margin-bottom: clamp(48px, 8vw, 96px); color: var(--crema, #FFF8F1); }
.s10-film .scrub-velo { background: linear-gradient(270deg, rgba(43,22,30,.78) 0%, rgba(43,22,30,.5) 34%, rgba(43,22,30,0) 58%); }
.s10-pannello { right: 7vw; top: 14vh; width: min(34vw, 520px); }
.s10-pannello .s10-titolo { font-size: clamp(44px, 4.6vw, 76px); line-height: 1.02; }
.s10-pannello .s10-titolo { color: #FFF8F1; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
@media (max-aspect-ratio: 3/4) {
  .s10-film .scrub-velo { background: linear-gradient(180deg, rgba(43,22,30,.8) 0%, rgba(43,22,30,.45) 26%, rgba(43,22,30,0) 44%); }
  .s10-pannello { left: 22px; right: 22px; top: calc(40px + env(safe-area-inset-top, 0px)); transform: none; width: auto; }
}