/* composite sheet (print / PDF), from ModelosComposite.html */
@page{size:A4 landscape;margin:0}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#e9e9e9}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased}

.sheet{width:1200px;height:849px;margin:24px auto;background:#fff;display:grid;grid-template-columns:42% 58%;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.18)}
/* print: always one A4 landscape page. The 1200x849 sheet is scaled to the page (297mm = 1122.5px, x0.934) whatever zoom
   the phone view gave it (the inline zoom made a second, empty page from mobile), and nothing can spill past 210mm */
@media print{html,body{width:297mm;height:210mm;overflow:hidden;background:#fff}.sheet{zoom:.934!important;margin:0;box-shadow:none;break-inside:avoid}}

.comp-photo{position:relative;overflow:hidden;background:#111;min-height:0}
.comp-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}

.comp-right{display:flex;flex-direction:column;padding:40px 48px 36px;min-height:0;overflow:hidden}

.comp-logo{flex:0 0 auto;display:flex;justify-content:center;padding-bottom:28px}
.comp-logo img{height:20px;width:auto}

/* client 04/10: the four photos whole. FAMA crops them to ~1810x2560 (0.707) before uploading, so each cell takes that
   proportion, as big as the space allows (cq units of .comp-grid), and contain keeps any other proportion uncut */
.comp-grid{flex:1 1 0;min-height:0;container-type:size}
.comp-cells{--r:.707;--gap:10px;--h:min(calc((100cqh - var(--gap)) / 2),calc((100cqw - var(--gap)) / 2 / var(--r)));height:100%;display:grid;
  grid-template-columns:repeat(2,calc(var(--h) * var(--r)));grid-template-rows:repeat(2,var(--h));gap:var(--gap);justify-content:center;align-content:center}
.comp-grid .pic{position:relative;overflow:hidden;background:#fff;min-height:0}
.comp-grid .pic img{width:100%;height:100%;object-fit:contain;display:block}

.comp-foot{flex:0 0 auto;text-align:center;padding-top:28px}
.comp-name{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:34px;margin:0}
.comp-specs{margin:10px 0 0;font:500 9px/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:#4A4A4A;white-space:nowrap}
.comp-specs span+span::before{content:"·";margin:0 7px}
.comp-url{margin:18px 0 0;font:500 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.22em;color:#9A9A9A}