/* Manual de marca: misma retícula que el sitio; en impresión, una hoja A4 apaisada por sección. */

.sheet { grid-auto-rows: auto; }
.sheet + .sheet { margin-top: 0; }
.sheet__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--line); background: var(--ink); padding: 0; }
.sheet__head > * { background: var(--bone); padding: var(--pad); }
.sheet__num { grid-column: 1 / 2; font-stretch: 125%; font-weight: 800; font-size: var(--t-h2); line-height: 1; display: flex; align-items: flex-start; font-variant-numeric: tabular-nums; }
.sheet__head h2 { grid-column: 2 / 8; }
.sheet__head p { grid-column: 8 / 13; max-width: none; display: flex; align-items: flex-end; }

.span-12 { grid-column: 1 / -1; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; } .span-2 { grid-column: span 2; }

.cover { min-height: clamp(420px, 70vh, 720px); }
.cover__logo { grid-column: 1 / 9; display: flex; align-items: center; }
.cover__logo img { width: min(100%, 760px); }
.cover__meta { grid-column: 9 / 13; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }

.stage { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.stage img { width: min(84%, 520px); height: auto; }
.stage--ink { background: var(--ink); }
.stage--orange { background: var(--orange); }
.stage--white { background: #FFFFFF; }
.version { display: flex; flex-direction: column; gap: 0; padding: 0; }
.version .stage { flex: 1; }
.version__info { padding: 14px var(--pad); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; background: var(--bone); border-top: var(--line) solid var(--ink); }
.version__info b { font-weight: 700; font-size: .95rem; }
.dl { display: flex; gap: 14px; font-size: .85rem; font-weight: 650; }
.dl a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }

.construct svg { width: 100%; height: auto; }

.dont { display: flex; flex-direction: column; gap: 12px; }
.dont .stage { min-height: 150px; background: #FFFFFF; position: relative; overflow: hidden; }
.dont .stage img { width: 70%; }
.dont .x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; }
.dont p { font-size: .95rem; }

.swatch { display: flex; flex-direction: column; padding: 0; }
.swatch__chip { min-height: 180px; }
.swatch dl { margin: 0; padding: var(--pad); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.swatch dt { font-weight: 650; color: var(--ink-soft); }
.swatch dd { margin: 0; }
.swatch h3 { padding: var(--pad) var(--pad) 0; }
.ratio { display: grid; grid-template-columns: 60fr 30fr 10fr; min-height: 96px; gap: var(--line); background: var(--ink); padding: 0; }
.ratio > div { display: flex; align-items: flex-end; padding: 12px 16px; font-weight: 700; font-size: .85rem; }

.spec { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 1rem + 5vw, 6rem); line-height: .92; }
.spec-text { font-size: 1.15rem; line-height: 1.5; max-width: 52ch; }
.scale { display: grid; gap: 14px; }
.scale div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); padding-top: 10px; }
.scale small { font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.rules li { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }

.picto-big { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; min-height: 200px; }
.picto-big svg { width: 72px; height: 72px; }
.picto-big h3 { font-size: clamp(.78rem, .5rem + .42vw, .95rem); font-stretch: 100%; letter-spacing: .02em; hyphens: manual; }
.picto-grid { background-image: linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px); background-size: 12.5% 12.5%; width: 160px; aspect-ratio: 1; }
.picto-grid svg { width: 100%; height: 100%; }

/* aplicaciones */
.card-mock { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.biz { width: 300px; max-width: 100%; aspect-ratio: 90 / 50; background: #FFFFFF; position: relative; outline: var(--line) solid var(--ink); }
.biz--back { background: var(--ink); display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px; }
.biz--back div { background: var(--bone); }
.biz--back div:nth-child(2) { background: var(--orange); }
.biz--back div:first-child { grid-row: span 2; display: flex; align-items: center; padding: 14px; }
.biz--front { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; line-height: 1.35; }
.biz--front img { width: 104px; }
.biz--front b { font-size: 12px; display: block; }

.sig { background: #FFFFFF; padding: 22px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.45; color: var(--ink); max-width: 460px; }
.sig img { width: 110px; margin-top: 10px; }
.sig .bar { display: block; width: 26px; height: 6px; background: var(--orange); margin: 10px 0; }

.obra-sign { background: var(--ink); display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(54px, auto); gap: 5px; padding: 5px; max-width: 640px; }
.obra-sign > div { background: var(--bone); padding: 12px; font-size: .78rem; min-width: 0; }
.obra-sign .os-logo { grid-column: 1 / 4; display: flex; align-items: center; }
.obra-sign .os-logo img { width: 100%; }
.obra-sign .os-o { grid-column: 4 / 7; background: var(--orange); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 1.05rem; display: flex; align-items: flex-end; }
.obra-sign .os-w { grid-column: 1 / 7; font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; }
.obra-sign .os-c { grid-column: span 3; }
.obra-sign .os-mail { grid-column: 1 / -1; font-weight: 650; }
.obra-sign b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .sheet__head { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .sheet__num { grid-column: 1 / 2; } .sheet__head h2 { grid-column: 2 / -1; } .sheet__head p { grid-column: 1 / -1; }
  .span-8, .span-7, .span-6, .span-5, .cover__logo, .cover__meta { grid-column: 1 / -1; }
  .span-4 { grid-column: span 3; } .span-3, .span-2 { grid-column: span 3; }
}
@media (max-width: 640px) {
  .sheet__head { grid-template-columns: 64px minmax(0,1fr); }
  .span-4, .span-3, .span-2 { grid-column: 1 / -1; }
  .ratio { grid-template-columns: 60fr 30fr 14fr; }
  .scale div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Impresión: A4 apaisado ---------- */
@page { size: A4 landscape; margin: 0; }
@media print {
  html, body { background: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-head, .foot, .skip, .no-print { display: none !important; }
  :root { --line: 4px; --pad: 18px; --t-h2: 30px; --t-body: 13.5px; --t-display: 56px; }
  body { font-size: 13.5px; }
  .grid { width: 297mm; max-width: none; height: 210mm; overflow: hidden; break-after: page; page-break-after: always; align-content: start; padding-top: var(--line); }
  .sheet:last-of-type { break-after: auto; }
  .cover { min-height: 0; grid-template-rows: 1fr; }
  .stage { min-height: 150px; }
  .swatch__chip { min-height: 110px; }
  .picto-big { min-height: 150px; }
  .lead { font-size: 15px; }
  .spec { font-size: 96px; }
  .spec-text { font-size: 17px; }
  .sheet .cell { align-self: stretch; }
  .sheet { grid-template-rows: auto; grid-auto-rows: 1fr; align-content: stretch; }
  .cover { grid-auto-rows: 1fr; }
  h3 { font-size: 15px; }
  .picto-big h3 { font-size: 12px; }
  .stage img { width: min(80%, 420px); }
  .construct { display: flex; align-items: center; }
  .rules li { padding: 9px 0; }
}
.ret-demo { grid-auto-rows: 46px; }
@media print { .ret-demo { grid-auto-rows: 1fr; } }