/* Obra Viva — tótem para imprimir (A4 vertical) */
@import url("estilos.css");

body { background: #e9e6df; color: #111; }
.totem {
  width: 210mm; min-height: 297mm; margin: 12px auto; padding: 16mm 16mm 12mm;
  background: #f7f5f0; color: #111;
  display: grid; grid-template-rows: auto 1fr 1fr 1fr auto; gap: 7mm;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.totem header { text-align: center; }
.totem .marca { color: #6b6962; }
.totem h1 { font-family: var(--serif); font-weight: 300; font-size: 44pt; line-height: 1; margin: 3mm 0 4mm; }
.pasos { font-size: 12pt; color: #3a3935; display: flex; justify-content: center; gap: 10mm; align-items: center; }
.paso { display: inline-flex; align-items: center; gap: 2.5mm; }
.pasos b {
  display: inline-grid; place-items: center; width: 8mm; height: 8mm; border-radius: 50%;
  background: #111; color: #f7f5f0; font-weight: 700; font-size: 10pt;
}
.obra {
  display: grid; grid-template-columns: 52mm 1fr 52mm; align-items: center; gap: 7mm;
  padding: 5mm; border: 0.4mm solid #d9d5cc; border-radius: 4mm; background: #fff;
}
.mini { width: 52mm; height: 52mm; object-fit: cover; border-radius: 2mm; }
.numero { font-size: 10pt; font-weight: 700; letter-spacing: 0.2em; color: #8a877f; }
.obra h2 { font-family: var(--serif); font-weight: 300; font-size: 22pt; line-height: 1.05; margin-top: 2mm; }
.obra .autor { font-family: var(--serif); font-style: italic; font-size: 13pt; color: #4a4843; margin-top: 1.5mm; }
.qr svg { width: 52mm; height: 52mm; display: block; }
.totem footer { text-align: center; font-size: 9pt; letter-spacing: 0.2em; text-transform: uppercase; color: #8a877f; }
.ayuda { text-align: center; font: 13px var(--sans); color: #555; margin: 10px 0 24px; }

@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: none; }
  .totem { margin: 0; box-shadow: none; }
  .ayuda { display: none; }
}