:root{
    /* color */
    --paper:#FFFFFF;        /* página blanca (base) */
    --paper2:#F5F5F3;       /* alterno muy claro */
    --ink:#1D1D1F;          /* negro Kelso */
    --muted:#6E6E73;        /* secundario Kelso */
    --rule:#E5E4E1;         /* filete claro */
    --on:#F4F2EE;           /* texto sobre imagen */
    --on-muted:#D4D2CC;     /* secundario sobre imagen (más legible) */
    --black:#101010;        /* fondo negro (ejercicios) */
    --on-black:#F4F3F0;     /* texto sobre negro */
    --on-black-muted:#8F8C86;
    /* tipografía: una sola autoridad — Kelso */
    --serif:"Newsreader",Georgia,"Times New Roman",serif;        /* cuerpo */
    --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;  /* títulos / aparato */
    --display:"Instrument Serif",Georgia,serif;                   /* macro + emblema */
    /* escala modular ~1.25 */
    --fs-part:88px; --fs-display:62px; --fs-chapter:40px; --fs-chaptersm:26px;
    --fs-sub:16px; --fs-body:12px; --fs-cap:11px; --fs-micro:9.5px;
    /* retícula: base 8pt */
    --u:8px; --mx:64px; --my:64px; --gutter:32px;
    --page:680px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:#c9c9c7;}
  body{font-family:var(--serif);color:var(--ink);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;}
  .stage{display:flex;flex-direction:column;align-items:center;gap:30px;padding:44px 16px 90px;}
  .note{max-width:var(--page);width:100%;color:#5f574b;font-family:var(--sans);font-size:12px;letter-spacing:.02em;line-height:1.55;text-align:center;margin:0 auto 4px;}
  .note b{color:#2c271f}
  .tier{max-width:920px;width:100%;margin:46px auto 6px;border-top:1px solid #b3aa9a;padding-top:16px;text-align:center;font-family:var(--sans)}
  .tier .t{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#5a5246;}
  .tier .d{font-size:12.5px;color:#6f675a;margin-top:6px;letter-spacing:.01em}

  /* página cuadrada */
  .page{width:var(--page);height:var(--page);background:var(--paper);position:relative;overflow:hidden;
    box-shadow:0 16px 42px rgba(0,0,0,.22);display:flex;flex-direction:column;}
  .page.alt{background:var(--paper2)}
  .pad{position:absolute;inset:0;padding:var(--my) var(--mx);display:flex;flex-direction:column;}
  .center{justify-content:center}
  .between{justify-content:space-between}

  /* spread / doble página */
  .spread{width:min(96vw,1180px);aspect-ratio:2/1;display:flex;background:var(--paper);
    box-shadow:0 16px 42px rgba(0,0,0,.22);position:relative;overflow:hidden;}
  .spread .half{flex:1;position:relative;overflow:hidden;}
  .gutter{position:absolute;left:50%;top:0;bottom:0;width:24px;transform:translateX(-50%);
    background:linear-gradient(90deg,rgba(0,0,0,.10),transparent 40%,transparent 60%,rgba(0,0,0,.10));pointer-events:none;z-index:3}

  /* cornisa + folio (sans) */
  .runhead{position:absolute;top:calc(var(--my)/2);left:var(--mx);right:var(--mx);display:flex;justify-content:space-between;
    font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);z-index:2}
  .folio{position:absolute;bottom:calc(var(--my)/2 - 6px);left:0;right:0;text-align:center;font-family:var(--sans);font-size:10.5px;color:var(--muted);letter-spacing:.1em;z-index:2}

  /* títulos / aparato = SANS humanista */
  h1.title{font-family:var(--sans);font-weight:600;font-size:var(--fs-display);line-height:1.0;letter-spacing:-.015em;margin:0;}
  .sub{font-family:var(--sans);font-size:var(--fs-sub);letter-spacing:0;color:var(--muted);margin-top:calc(var(--u)*2);font-weight:400;}
  .kicker{font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);}
  .chapno{font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;}
  h2.ch{font-family:var(--sans);font-weight:600;font-size:var(--fs-chapter);line-height:1.04;letter-spacing:-.01em;margin:0;}
  h2.ch .es{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-sub);letter-spacing:0;color:var(--muted);margin-top:calc(var(--u)*1.75);}
  .partbig{font-family:var(--sans);font-weight:600;font-size:var(--fs-part);line-height:.9;letter-spacing:-.02em}
  .macro{font-family:var(--sans);font-weight:400;line-height:.86;letter-spacing:-.02em;margin:0}
  .secthead{font-family:var(--sans);font-weight:600;font-size:var(--fs-sub);letter-spacing:-.01em;margin:0 0 calc(var(--u)*1.5);color:var(--ink)}

  /* cuerpo = SERIF editorial, medida y leading de libro */
  .body{font-family:var(--serif);font-size:var(--fs-body);line-height:1.46;max-width:62ch;}
  .body p{margin:0 0 calc(var(--u)*1.25);text-align:left;hyphens:none}
  .body p:first-of-type{text-indent:0}
  .body p+p{text-indent:1.2em}
  .marg{font-family:var(--serif);font-size:12.5px;line-height:1.5;color:#5f574b;font-style:italic}
  .small{font-family:var(--sans);font-size:var(--fs-cap);color:var(--muted);letter-spacing:.02em;line-height:1.6}

  /* citas = serif, mancha estrecha */
  .pull{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.3;letter-spacing:-.005em;max-width:16ch;}
  .pull .src{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:calc(var(--u)*4);font-weight:400;}

  /* imagen real — disciplina monocroma (B/N) + un solo cálido */
  .ph{position:absolute;inset:0;background-size:cover;background-position:center;}
  .ph.warm{}
  .ph.inset{position:relative;inset:auto;flex:1;}
  /* TEXTO SOBRE IMAGEN — regla de contraste: texto SIEMPRE claro + zona garantizada oscura */
  .veil{position:absolute;inset:0;background:rgba(8,8,10,.62);z-index:1}
  .scrim-b{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,8,.94),rgba(6,6,8,.70) 38%,rgba(6,6,8,.30) 66%,rgba(6,6,8,.05) 88%,transparent);z-index:1}
  .scrim-t{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,8,.90),rgba(6,6,8,.35) 45%,transparent 70%);z-index:1}
  .onimg{color:#FFFFFF;text-shadow:0 1px 4px rgba(0,0,0,.7)}
  .onimg .pad,.onimg .body,.onimg .pull,.onimg .reftag{position:relative;z-index:2}
  .onimg h1.title,.onimg h2.ch,.onimg .secthead,.onimg .pull,.onimg .es,.onimg h2.ch .es,.onimg .src,.onimg .kicker,.onimg .chapno,.onimg .sub,.onimg .small,.onimg .body{color:#FFFFFF}
  .reftag{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--sans);font-size:8px;letter-spacing:.22em;
    text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);padding:3px 7px;}

  /* ejercicios en negro (inversión) */
  .page.black{background:var(--black);color:var(--on-black)}
  .black h1.title,.black h2.ch,.black .pull,.black .partbig,.black .secthead,.black .marg{color:var(--on-black)}
  .black .es,.black .src,.black .kicker,.black .chapno,.black .sub,.black .small,.black .folio,.black .runhead{color:var(--on-black-muted)}
  .black .body,.black .acorde .anote{color:var(--on-black)}
  .black .tl .row,.black .crit li{border-color:#2a2a2a}

  /* utilitarios */
  .colofon{font-family:var(--serif);font-size:12px;color:var(--muted);line-height:1.9;letter-spacing:.01em}
  .detailgrid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--u);padding:var(--my)}
  .detailgrid .cell{background-size:cover;background-position:center;position:relative}
  /* composiciones fotográficas */
  .pg{position:absolute;inset:0;display:grid;gap:6px}
  .pg .c{background-size:cover;background-position:center;position:relative}
  .band{position:absolute;left:0;right:0}
  .strip{position:absolute;left:0;right:0;display:grid;gap:6px}
  .sheet{position:absolute;inset:0;display:grid;gap:6px}
  .crit{font-family:var(--serif);font-size:12.5px;line-height:1.5}
  .crit .area{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:calc(var(--u)*2) 0 var(--u)}
  .crit ol{margin:0;padding:0;list-style:none;counter-reset:c}
  .crit li{counter-increment:c;padding:5px 0;border-bottom:1px solid var(--rule);display:flex;gap:12px}
  .crit li::before{content:counter(c,decimal-leading-zero);font-family:var(--sans);color:var(--muted);font-size:10px;letter-spacing:.05em;min-width:22px}
  .tl{font-family:var(--serif);font-size:12.5px;line-height:1.5}
  .tl .row{display:flex;gap:18px;padding:9px 0;border-bottom:1px solid var(--rule)}
  .tl .yr{min-width:88px;font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.06em}
  /* acorde — puramente tipográfico, sin líneas */
  .acorde{margin-top:calc(var(--u)*2)}
  .anote{font-family:var(--serif);font-size:26px;line-height:1;margin-bottom:calc(var(--u)*3)}
  .anote span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:8px}

  @media print{
    html,body{background:#fff}
    .stage{gap:0;padding:0}
    .note,.tier{display:none}
    .page{box-shadow:none;width:260mm;height:260mm;page-break-after:always}
    .spread{box-shadow:none;width:260mm;height:130mm;page-break-after:always}
    @page{size:260mm 260mm;margin:0}
  }