/* La lámina A4: en pantalla, una vista previa con el botón; impresa, sólo la hoja. */
@font-face { font-family: "Cormorant"; src: url("/fuentes/cormorant-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Inter"; src: url("/fuentes/inter-variable.woff2") format("woff2"); font-weight: 100 900; }
@page { size: A4; margin: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; font-family: "Inter", system-ui, sans-serif; color: #1a1512; }
body { background: #3a3530; padding: 24px 16px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.acciones { max-width: 210mm; margin: 0 auto 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: #e8e2d8; font-size: 14px; }
.boton { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #f3efe8; color: #0d0c0b; font: 500 15px "Inter", sans-serif; cursor: pointer; }
.hoja { width: 210mm; height: 297mm; margin: 0 auto; background: #fff; padding: 16mm 18mm 14mm; display: grid; grid-template-rows: auto 1fr auto; gap: 8mm; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.marca { font-size: 9pt; letter-spacing: 0.3em; text-transform: uppercase; color: #6b6259; display: flex; justify-content: space-between; }
.obra { display: grid; place-items: center; min-height: 0; }
.obra img { max-height: 196mm; max-width: 174mm; width: auto; height: auto; display: block; box-shadow: 0 0 0 0.35mm #d8d2c8; }
.pie { display: grid; grid-template-columns: 1fr auto; gap: 10mm; align-items: end; border-top: 0.3mm solid #d8d2c8; padding-top: 6mm; }
.titulo { font-family: "Cormorant", Georgia, serif; font-size: 24pt; font-style: italic; margin: 0; }
.autor { font-size: 10pt; color: #4a433c; margin: 1mm 0 0; }
.como { font-size: 10pt; line-height: 1.5; color: #4a433c; margin: 4mm 0 0; max-width: 115mm; }
.como b { color: #1a1512; }
.qr { text-align: center; font-size: 8pt; color: #6b6259; }
#qr { width: 30mm; height: 30mm; margin-bottom: 1.5mm; }
#qr svg { display: block; width: 100%; height: 100%; }
@media print {
  body { background: #fff; padding: 0; }
  .acciones { display: none; }
  .hoja { box-shadow: none; margin: 0; }
}
@media screen and (max-width: 840px) { .hoja { zoom: 0.45; } }