/* ------------------------------------------------------------------
   Llibre de signatures del mural.
   Tot surt dels mateixos tokens de la pagina (argila, terra cuita,
   guix). Els dos unics colors nous son les dues tintes, i son tinta
   de debo: blau d'estilografica i negre de la mateixa gamma del text.
   ------------------------------------------------------------------ */
.llibre {
    --paper: #fdfaf5;
    --paper-ombra: #efe6d9;
    --ratlla: rgba(116, 95, 77, .12);
    --tinta-blava: #31456e;
    --tinta-negra: #241f1d;
    --tapa: #6b3a20;
    --tapa-fosc: #4d2818;
}

/* ---------- el moble: tapa, llom i fulls ---------- */
.llibre__moble {
    perspective: 2400px;
    margin-top: var(--e6);
}

.llibre__tapa {
    position: relative;
    padding: clamp(10px, 2.2vw, 22px);
    border-radius: var(--r-mig);
    background:
        linear-gradient(160deg, var(--tapa) 0%, var(--tapa-fosc) 62%, var(--tapa) 100%);
    box-shadow: var(--om-gran);
}

.llibre__fulls {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform-style: preserve-3d;
    min-height: clamp(360px, 46vw, 540px);
}

/* El plec central: dues ombres que es toquen, no una ratlla dibuixada. */
.llibre__plec {
    position: absolute;
    inset: 0 auto 0 50%;
    width: 46px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(90deg,
        rgba(36,31,29,0) 0%, rgba(36,31,29,.13) 44%,
        rgba(36,31,29,.22) 50%, rgba(36,31,29,.13) 56%, rgba(36,31,29,0) 100%);
}

/* ---------- una pagina ---------- */
.pag {
    /* El paper te ratlles cada 34 px i el text hi ha de caure a sobre, per aixo
       el fons es desplaça just amb el marge de dalt i aqui dins no hi ha cap
       separacio que no sigui multiple de 34. */
    --pad-dalt: clamp(18px, 3vw, 34px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--pad-dalt) clamp(16px, 3vw, 32px) clamp(34px, 4vw, 46px);
    background: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom, transparent 0 33px, var(--ratlla) 33px 34px);
    background-position: 0 calc(var(--pad-dalt) - 34px);
    overflow: hidden;
}
.pag--portadella, .pag__buida { gap: var(--e4); }
.pag--esq { border-radius: var(--r-pet) 0 0 var(--r-pet);
            box-shadow: inset -18px 0 26px -22px rgba(36,31,29,.55); }
.pag--dre { border-radius: 0 var(--r-pet) var(--r-pet) 0;
            box-shadow: inset 18px 0 26px -22px rgba(36,31,29,.55); }

.pag__num {
    position: absolute; bottom: clamp(12px, 1.6vw, 18px); left: 0; right: 0;
    text-align: center;
    font-size: .74rem; color: var(--fang); opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* La portadella: el primer full del llibre, com en un de paper. */
.pag--portadella {
    align-items: center; justify-content: center; text-align: center;
    gap: var(--e4);
    background-image: none;
}
.pag--portadella h3 { font-size: clamp(1.3rem, 3.4vw, 2rem); color: var(--terra); }
.pag--portadella .kicker { margin: 0; }
.pag__filet { width: 64px; height: 2px; background: var(--coure); opacity: .5; }
.pag__dedic { color: var(--fang); font-size: .95rem; max-width: 30ch; margin: 0; }

/* El missatge de llibre buit el matava `.pag p { margin: 0 }`, que te mes
   pes: per aixo queia a la primera ratlla en lloc de quedar al mig del full. */
.pag > .pag__buida {
    margin: auto; color: var(--fang); font-size: .9rem; text-align: center;
    line-height: 34px; max-width: 28ch;
}

/* ---------- una signatura ---------- */
/* El full es una graella de ratlles de 34 px: dins seu no hi pot haver
   cap marge de paragraf del full d'estil general, o el text hi surt a sobre. */
.pag p, .pag figure, .pag figcaption, .mostra p, .llibre__llista p, .llibre__llista figure { margin: 0; }
.sig { margin: 0; display: flex; flex-direction: column; gap: 0; }
.pag .sig + .sig { margin-top: 34px; }

.sig__text {
    margin: 0;
    font-size: clamp(1.02rem, 1.7vw, 1.22rem);
    line-height: 34px;                 /* quadra amb les ratlles del paper */
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.sig__signa { line-height: 34px; height: 34px;
    display: flex; flex-wrap: nowrap; align-items: baseline;
    justify-content: flex-end; gap: var(--e2) var(--e3);
    font-style: normal;
}
.sig__nom { font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 34px; min-width: 0; overflow-wrap: anywhere; }
.sig__data { font-family: var(--lletra); font-size: .72rem; line-height: 34px; white-space: nowrap; color: var(--fang); opacity: .8; }

/* Les quatre mans i les dues tintes. */
.sig--ploma    .sig__text, .sig--ploma    .sig__nom { font-family: "Caveat", cursive; font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
.sig--cursiva  .sig__text, .sig--cursiva  .sig__nom { font-family: "Petit Formal Script", cursive; }
.sig--rodona   .sig__text, .sig--rodona   .sig__nom { font-family: "Kalam", cursive; }
.sig--impremta .sig__text, .sig--impremta .sig__nom { font-family: var(--lletra); }
.sig--ploma .sig__nom, .sig--rodona .sig__nom { font-weight: 600; }

.tinta-blava { color: var(--tinta-blava); }
.tinta-negra { color: var(--tinta-negra); }

/* ---------- el full que gira ---------- */
.gira {
    position: absolute; top: 0; bottom: 0; width: 50%;
    transform-style: preserve-3d;
    z-index: 4; pointer-events: none;
    transition: transform 620ms cubic-bezier(.42,.02,.24,1);
}
.gira[hidden] { display: none; }
.gira--endavant { left: 50%; transform-origin: left center; }
.gira--enrere   { left: 0;   transform-origin: right center; }
.gira--endavant.va { transform: rotateY(-178deg); }
.gira--enrere.va   { transform: rotateY(178deg); }

.gira .pag {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.gira .pag--darrere { transform: rotateY(180deg); }

/* ---------- controls ---------- */
.llibre__comanda {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--e3) var(--e4);
    margin-top: var(--e5);
}
/* Quan no hi ha on girar, el boto s'ha de veure apagat: fins ara nomes
   estava disabled, i semblava igual de clicable. */
.llibre__comanda .btn[disabled] { opacity: .38; cursor: default; box-shadow: none; }

.llibre__pos {
    font-size: .85rem; color: var(--fang); font-variant-numeric: tabular-nums;
    min-width: 9ch; text-align: center;
}
.llibre__llista-bt {
    background: none; border: 0; padding: var(--e2) var(--e3); cursor: pointer;
    font: inherit; font-size: .85rem; color: var(--coure);
    text-decoration: underline; text-underline-offset: 3px;
    border-radius: var(--r-pet);
}

/* La llista plana: mateix contingut, sense llibre. Per a qui llegeix amb
   lector de pantalla, per a qui vol buscar un nom i per als mobils vells. */
.llibre__llista { margin-top: var(--e6); display: grid; gap: var(--e4); padding: 0; list-style: none; }
.llibre__llista li {
    padding: var(--e4); background: var(--calc2);
    border: 1px solid var(--sorra); border-radius: var(--r-mig);
}

/* ---------- el formulari ---------- */
.signar {
    margin-top: var(--e7);
    display: grid; gap: var(--e5);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) { .signar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

.signar__camps { display: grid; gap: var(--e4); }
.camp-l { display: grid; gap: var(--e2); }
.camp-l > span { font-size: .82rem; font-weight: 700; color: var(--terra); }
.camp-l input, .camp-l textarea {
    width: 100%; min-width: 0; font: inherit; color: var(--terra);
    padding: var(--e3); background: var(--calc);
    border: 1.5px solid var(--sorra); border-radius: var(--r-pet);
}
.camp-l textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.camp-l input:focus, .camp-l textarea:focus { outline: 2px solid var(--coure); outline-offset: 1px; border-color: var(--coure); }
.camp-l__compte { font-size: .74rem; color: var(--fang); text-align: right; font-variant-numeric: tabular-nums; }

/* El parany per als robots. Fora de pantalla, mai amagat amb display:none
   (alguns el detecten) i fora del recorregut del tabulador. */
.parany { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tries { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .tries { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

.mans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.mans button {
    cursor: pointer; padding: var(--e3) var(--e2); min-height: 56px;
    background: var(--calc); color: var(--terra);
    border: 1.5px solid var(--sorra); border-radius: var(--r-pet);
    font-size: 1.15rem; line-height: 1.2;
}
.mans button[aria-pressed="true"] { border-color: var(--coure); box-shadow: inset 0 0 0 1px var(--coure); background: var(--calc2); }
.mans button:focus-visible { outline: 2px solid var(--coure); outline-offset: 2px; }
.mans .m-ploma    { font-family: "Caveat", cursive; font-size: 1.45rem; }
.mans .m-cursiva  { font-family: "Petit Formal Script", cursive; }
.mans .m-rodona   { font-family: "Kalam", cursive; }
.mans .m-impremta { font-family: var(--lletra); font-size: .98rem; }

.tintes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e3); }
.tintes button {
    cursor: pointer; display: flex; align-items: center; gap: var(--e2);
    padding: var(--e2) var(--e3); min-height: 44px; font: inherit; font-size: .88rem;
    background: var(--calc); color: var(--terra);
    border: 1.5px solid var(--sorra); border-radius: var(--r-pet);
}
.tintes button[aria-pressed="true"] { border-color: var(--coure); box-shadow: inset 0 0 0 1px var(--coure); }
.tintes button:focus-visible { outline: 2px solid var(--coure); outline-offset: 2px; }
.tintes i { width: 15px; height: 15px; border-radius: 50%; display: block; border: 1px solid rgba(36,31,29,.25); }
.tintes .t-blava i { background: var(--tinta-blava); }
.tintes .t-negra i { background: var(--tinta-negra); }

/* La mostra: el mateix full de paper, amb la lletra i la tinta triades. */
.mostra {
    padding: var(--e5); border-radius: var(--r-mig);
    background: var(--paper);
    background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--ratlla) 33px 34px);
    border: 1px solid var(--sorra);
    box-shadow: var(--om-mig);
}
.mostra__et { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
              font-weight: 700; color: var(--fang); margin: 0 0 var(--e4); }

.avis-l { margin: 0; padding: var(--e3) var(--e4); border-radius: var(--r-pet); font-size: .9rem; }
.avis-l--mal { background: #f7e4dc; color: #7a2f12; border: 1px solid #e0b9a8; }
.avis-l--be  { background: #e6ede2; color: #33502c; border: 1px solid #bfd3b7; }

/* ---------- text de la secció ---------- */
.llibre__lead { color: var(--fang); max-width: 58ch; margin: 0; }
.llibre__compta {
    margin: var(--e3) 0 0; font-size: .8rem; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 700; color: var(--coure);
}
.llibre__nota { margin: 0; font-size: .82rem; color: var(--fang); max-width: 52ch; }
#llibre-envia { justify-self: start; }
.signar__camps h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin: 0; color: var(--terra); }

/* Els dos grups de tria són fieldset de debò: el lector de pantalla ha de
   dir "Lletra" abans de les quatre opcions. Cal desfer l'estil del navegador. */
.camp-l { border: 0; padding: 0; margin: 0; min-width: 0; }
.camp-l > legend {
    font-size: .82rem; font-weight: 700; color: var(--terra);
    padding: 0; margin-bottom: var(--e2);
}
.parany label { font-size: .8rem; }

/* ---------- mobil: un sol full ---------- */
@media (max-width: 47.99rem) {
    .llibre__fulls { grid-template-columns: 1fr; min-height: clamp(320px, 88vw, 460px); }
    .llibre__plec { display: none; }
    .pag--esq, .pag--dre { border-radius: var(--r-pet); box-shadow: none; }
    .gira { width: 100%; }
}

@media (max-width: 30rem) {
    .llibre__comanda { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
    .llibre__comanda .btn { justify-content: center; padding: 0 var(--e3); }
    .llibre__pos { grid-column: 1 / -1; order: 2; }
    .llibre__llista-bt { grid-column: 1 / -1; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .gira { transition: none; }
}