/* ===========================================================================
   Sistema visual Elemental — «la hoja de levantamiento»
   Extraído de la propuesta Ganbos (ago–sep 2026). Guía: ESTILO-VISUAL.md
   Implementación de referencia: propuesta.html

   PARA UN CLIENTE NUEVO SOLO SE CAMBIAN LOS TOKENS DE :root.
   El resto de la hoja no debería necesitar ediciones.
   =========================================================================== */
/* Self-hosted: the display voice is the page's only external dependency, and a
     meeting machine that is offline or blocked would fall back to the platform sans. */
  @font-face{
    font-family:'Archivo';
    font-style:normal; font-weight:300 900; font-stretch:62% 125%; font-display:swap;
    /* Pegá acá el woff2 en base64: src:url(data:font/woff2;base64,XXXX) format('woff2');
       Ver ESTILO-VISUAL.md § Tipografía para cómo obtenerlo. */
    src:local('Archivo');
  }

  :root{
    --paper:#ffffff;
    --ink:#183529;
    /* ink-70 is the floor for small text: 5.1:1 on paper. ink-45 never carries
       text — it draws ticks and rules only, where contrast rules do not apply. */
    --ink-70:rgba(24,53,41,0.70);
    --ink-45:rgba(24,53,41,0.45);
    --rule:rgba(24,53,41,0.22);
    --rule-faint:rgba(24,53,41,0.11);
    --measure:#8bb50c;
    --measure-deep:#5f7d08;
    --annotate:#ebc529;
    --unresolved:#c1453b;
    --ease:cubic-bezier(0.22,1,0.36,1);
    --gut:clamp(1.25rem,4.5vw,3.5rem);
    --sheet:1180px;
  }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  section[id]{ scroll-margin-top:5rem; }

  body{
    background:var(--paper); color:var(--ink);
    font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
    font-variation-settings:"wdth" 100;
    font-weight:400; font-size:clamp(0.98rem,0.94rem + 0.2vw,1.06rem); line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* browser surfaces themed from the palette */
  ::selection{ background:var(--measure); color:var(--ink); }
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:var(--paper); border-left:1px solid var(--rule-faint); }
  ::-webkit-scrollbar-thumb{ background:var(--ink-45); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--ink); }
  html{ scrollbar-color:var(--ink-45) var(--paper); scrollbar-width:thin; caret-color:var(--measure-deep); }
  :focus-visible{ outline:2px solid var(--measure-deep); outline-offset:3px; }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  h1,h2,h3{ font-weight:700; letter-spacing:-0.025em; text-wrap:balance; }

  .sheet{ max-width:var(--sheet); margin-inline:auto; padding-inline:var(--gut); }
  :root{ --mark:2.35rem; }

  /* survey lettering: Archivo's condensed width, never a costume mono */
  .lettering{
    font-variation-settings:"wdth" 68;
    font-weight:600; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
    font-variant-numeric:tabular-nums;
  }
  .num{ font-variant-numeric:tabular-nums; font-variation-settings:"wdth" 78; }

  /* ============ NAV ============ */
  .nav{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,0.93);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule-faint);
  }
  .nav__in{
    max-width:var(--sheet); margin-inline:auto; padding:1.15rem var(--gut);
    display:flex; align-items:center; gap:1.6rem;
  }
  /* two houses on one sheet: the agency signs first, the client's mark follows */
  .nav__marks{ display:flex; align-items:center; gap:1rem; margin-right:auto; }
  .nav__mark{ height:26px; width:auto; }
  .nav__mark--el{ height:21px; }
  .nav__marksep{ width:1px; height:22px; background:var(--rule); flex:none; }
  .nav__links{ display:flex; gap:1.5rem; list-style:none; }
  .nav__links a{ color:var(--ink-70); position:relative; padding-bottom:2px; }
  .nav__links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:var(--measure-deep); transform:scaleX(0); transform-origin:right;
    transition:transform 0.3s var(--ease);
  }
  .nav__links a:hover{ color:var(--ink); }
  .nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
  @media (max-width:860px){ .nav__links{ display:none; } .nav{ position:static; } }

  /* language: a two-position selector. Ink only — the accent stays reserved for measurement. */
  .nav__lang{ display:flex; flex:none; border:1px solid var(--ink-45); }
  .nav__lang-btn{
    appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
    font-family:inherit; color:var(--ink-70); padding:0.32rem 0.5rem 0.28rem; line-height:1;
    transition:background 0.25s var(--ease), color 0.25s var(--ease);
  }
  .nav__lang-btn + .nav__lang-btn{ border-left:1px solid var(--ink-45); }
  .nav__lang-btn:hover{ color:var(--ink); }
  .nav__lang-btn.is-on{ background:var(--ink); color:var(--paper); }

  /* ============ TITLE BLOCK ============ */
  .titleblock{ padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(1.5rem,3vw,2.25rem); }
  .titleblock__grid{
    display:grid; grid-template-columns:1fr auto; gap:1.5rem 2rem; align-items:end;
    border-bottom:1px solid var(--ink); padding-bottom:0.85rem;
  }
  .titleblock h1{
    font-variation-settings:"wdth" 112;
    font-size:clamp(2.1rem,1.1rem + 4.4vw,4.15rem);
    line-height:0.96; letter-spacing:-0.035em; font-weight:800; max-width:14ch;
  }
  .titleblock__meta{ display:flex; gap:clamp(1.25rem,3vw,2.5rem); color:var(--ink-70); text-align:right; }
  .titleblock__meta div{ display:flex; flex-direction:column; gap:0.2rem; }
  .titleblock__meta b{ color:var(--ink); font-weight:600; font-variation-settings:"wdth" 78; font-size:0.9rem; letter-spacing:0.02em; text-transform:none; font-variant-numeric:tabular-nums; }
  @media (max-width:700px){
    .titleblock__grid{ grid-template-columns:1fr; align-items:start; }
    .titleblock__meta{ text-align:left; flex-wrap:wrap; gap:1.25rem; }
  }
  .titleblock__sub{
    display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    padding-top:0.6rem; color:var(--ink-70);
  }

  /* ============ HERO PLATE ============ */
  .plate{ padding-bottom:clamp(3rem,7vw,5.5rem); }
  .plate__frame{ position:relative; padding:14px; }
  /* corner registration marks */
  .plate__frame::before,.plate__frame::after{
    content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  }
  .plate__frame::before{ top:0; left:0; border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
  .plate__frame::after{ bottom:0; right:0; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); }
  .plate__reg{ position:absolute; width:22px; height:22px; pointer-events:none; }
  .plate__reg--tr{ top:0; right:0; border-top:1px solid var(--ink); border-right:1px solid var(--ink); }
  .plate__reg--bl{ bottom:0; left:0; border-bottom:1px solid var(--ink); border-left:1px solid var(--ink); }

  .plate__window{
    position:relative; overflow:hidden;
    height:clamp(360px,70vh,720px);
    background:#e9ebe6;
  }
  .plate__video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
  }
  /* the footage carries its own burned-in wordmark, so the crop has to stay off it:
     a tall plate on a narrow screen would cut the logo at both ends */
  @media (max-width:760px){ .plate__window{ height:auto; aspect-ratio:4/3; } }

  /* ============ SECTION SCAFFOLD ============ */
  .band{ padding-block:clamp(3rem,6.5vw,5.5rem); border-top:1px solid var(--rule-faint); }
  .band--first{ border-top:1px solid var(--ink); }
  /* the one inked block on a white sheet: it states what the document is for.
     Ink, not pure black — a second near-black would be a colour the system does not have. */
  .brief{ background:var(--ink); color:var(--paper); }
  .brief__in{ padding-block:clamp(2.75rem,6vw,4.5rem); }
  .brief p{
    font-variation-settings:"wdth" 104; font-weight:600;
    font-size:clamp(1.15rem,0.85rem + 1.35vw,1.8rem);
    line-height:1.32; letter-spacing:-0.02em; max-width:36ch;
  }
  /* the band already separates; a rule on top of it would sit invisible against ink */
  .brief + .band{ border-top:none; }
  .head{ margin-bottom:clamp(1.75rem,3.5vw,2.75rem); }
  /* the section index: sheets are numbered so they can be referred to out loud */
  .head__num{
    display:block; color:var(--ink-70); margin-bottom:0.5rem;
    font-size:clamp(1.05rem,0.85rem + 0.7vw,1.5rem); letter-spacing:0.12em;
  }
  .head h2{
    font-variation-settings:"wdth" 108;
    font-size:clamp(1.55rem,1rem + 2.3vw,2.5rem); line-height:1.06; max-width:26ch;
  }
  .head p{ margin-top:0.7rem; color:var(--ink-70); max-width:62ch; }
  /* each heading names, in small type, the brief item it answers */
  .head__tag{
    font-variation-settings:"wdth" 88; font-weight:600;
    font-size:0.52em; letter-spacing:0; color:var(--ink-70);
    white-space:nowrap;
  }
  .lede-measure{ color:var(--measure-deep); font-weight:600; }
  /* the annotation layer: reserved for the two dates a reader must not miss */
  /* a highlighter band across the line box: on an inline element a sized-and-offset
     gradient collapses to a rule under the text, which reads as a strikethrough */
  .annot{
    background-image:linear-gradient(transparent 8%, var(--annotate) 8%,
                                     var(--annotate) 88%, transparent 88%);
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
  }
  .timeline__axis span.timeline__launch{
    position:absolute; left:0; top:0; transform:none;
    display:flex; flex-direction:column; align-items:flex-start; gap:5px;
    color:var(--ink); font-weight:600;
  }
  .timeline__launch::after{ content:""; width:2px; height:9px; background:var(--annotate); }
  .timeline__launch b{ background:var(--annotate); padding:0.15em 0.4em; font-weight:600; }

  /* ============ OBJETIVO ============
     Lime marks measured quantity, so it never floods a region here; the hero's
     rising field is the page's one large lime moment and this section stays paper. */
  .aim__in{ padding-block:0; }
  .aim p.aim__text{
    position:relative; padding-left:var(--mark);
    font-variation-settings:"wdth" 104; font-weight:600;
    font-size:clamp(1.3rem,0.9rem + 2vw,2.15rem);
    line-height:1.3; letter-spacing:-0.022em; max-width:calc(40ch + var(--mark));
  }
  /* the primary objective is item a); the register below it continues at b) */
  .aim__text::before{
    content:"A)"; position:absolute; left:0; top:0.62em;
    font-variation-settings:"wdth" 68; font-weight:600; font-size:0.66rem;
    letter-spacing:0.16em; color:var(--ink-70); font-variant-numeric:tabular-nums;
  }
  /* a wrap-safe measured mark: survives breaking across lines */
  .aim__text em{
    font-style:normal;
    background-image:linear-gradient(var(--measure),var(--measure));
    background-repeat:no-repeat; background-size:100% 0.28em; background-position:0 92%;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
  }

  /* objectives: a register, not cards */
  .register{
    margin-top:clamp(2.25rem,5vw,3.5rem);
    border-top:1px solid var(--ink);
    display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(2rem,5vw,4rem);
    /* lettered items must run down a column, not across: b,c,d,e,f then g,h,i */
    grid-auto-flow:column; grid-template-rows:repeat(1,auto);
    counter-reset:objective 1;
  }
  .register li{
    padding:0.78rem 0; border-bottom:1px solid var(--rule);
    list-style:none; counter-increment:objective;
    display:grid; grid-template-columns:var(--mark) 1fr; align-items:baseline;
  }
  .register li::before{
    content:counter(objective, upper-alpha) ")";
    font-variation-settings:"wdth" 68; font-weight:600; font-size:0.66rem;
    letter-spacing:0.16em; color:var(--ink-70); font-variant-numeric:tabular-nums;
  }
  .register p{ font-weight:500; font-size:0.95rem; }
  @media (max-width:820px){ .register{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; } }

  /* ============ PÚBLICO — parcel table ============ */
  .parcels{ border-top:1px solid var(--ink); }
  .parcels__row{
    display:grid; grid-template-columns:8.5rem 1fr 12rem; gap:1rem clamp(1rem,3vw,2.25rem);
    padding:clamp(1rem,2.2vw,1.5rem) 0; border-bottom:1px solid var(--rule);
    align-items:start;
  }
  .parcels__row h3{ font-variation-settings:"wdth" 92; font-size:1.02rem; font-weight:700; letter-spacing:-0.01em; }
  .parcels__row p{ color:var(--ink-70); max-width:58ch; }
  .parcels__attr{ display:flex; flex-direction:column; gap:0.3rem; color:var(--ink-70); }
  .parcels__attr span{ display:flex; gap:0.5rem; align-items:baseline; }
  .parcels__attr span::before{ content:""; width:5px; height:5px; flex:none; background:var(--measure); transform:translateY(-2px); }
  @media (max-width:860px){
    .parcels__row{ grid-template-columns:1fr; gap:0.5rem; }
    .parcels__attr{ flex-direction:row; flex-wrap:wrap; gap:0.4rem 1.1rem; }
  }

  /* ============ ESTRATEGIA — four plates ============ */
  /* the one belief statement in a document otherwise made of commitments:
     ruled top and bottom, set at display size, quoted by the stylesheet */
  .creed{
    /* the plates' own top rule closes the block, so it takes only a top border */
    margin:0 0 clamp(1.5rem,3.2vw,2.25rem);
    padding:clamp(1.5rem,3.5vw,2.5rem) 0 0;
    border-top:1px solid var(--ink);
  }
  .creed p{
    color:var(--ink);
    font-variation-settings:"wdth" 104; font-weight:600;
    font-size:clamp(1.15rem,0.85rem + 1.45vw,1.95rem);
    line-height:1.3; letter-spacing:-0.022em; max-width:44ch; text-wrap:balance;
  }
  .creed p::before{ content:"\201C"; }
  .creed p::after{ content:"\201D"; }
  .voice{
    margin-top:clamp(1.75rem,3.5vw,2.5rem);
    font-weight:500; font-size:clamp(1rem,0.95rem + 0.3vw,1.12rem);
    max-width:64ch; line-height:1.5;
  }
  .plays{ border-top:1px solid var(--ink); counter-reset:play; }
  .plays__row{
    counter-increment:play;
    display:grid; grid-template-columns:var(--mark) 1fr; gap:0 0.6rem;
    padding:1.1rem 0; border-bottom:1px solid var(--rule);
  }
  .plays__row > *{ grid-column:2; }
  .plays__row::before{
    content:counter(play, upper-alpha) ")";
    font-variation-settings:"wdth" 68; font-weight:600; font-size:0.66rem;
    letter-spacing:0.16em; color:var(--ink-70); font-variant-numeric:tabular-nums;
    padding-top:0.45em;
  }
  /* title and body share one measure, so the two lines of a row register against each other */
  .plays h3{ font-variation-settings:"wdth" 96; font-size:1.02rem; margin-bottom:0.35rem; max-width:74ch; text-wrap:normal; }
  .plays p{ color:var(--ink-70); font-size:0.94rem; max-width:74ch; }
  .plays__caveat{
    margin-top:0.55rem; display:grid; grid-template-columns:0.9rem 1fr; gap:0.6rem;
    font-size:0.88rem;
  }
  .plays__caveat::before{ content:""; width:9px; height:1px; background:var(--ink-45); margin-top:0.72em; }
  .expect{
    /* the action register already closes on a full-width rule; a second short one
       right under it reads as an accident, so this block separates by space alone */
    margin-top:clamp(1.5rem,3vw,2rem); max-width:64ch;
    font-weight:500; font-size:clamp(1rem,0.95rem + 0.3vw,1.12rem);
  }
  .fronts{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--ink); }
  .fronts > div{ padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2.5vw,2rem); border-right:1px solid var(--rule); }
  .fronts > div:first-child{ padding-left:0; }
  .fronts > div:last-child{ border-right:none; padding-right:0; }
  .fronts svg{ width:100%; height:auto; max-width:250px; margin-bottom:1.4rem; stroke-width:1.4; }
  .fronts h3{ font-variation-settings:"wdth" 96; font-size:1.08rem; margin-bottom:0.5rem; }
  .fronts p{ color:var(--ink-70); font-size:0.95rem; }
  /* four across needs a two-up step before collapsing, or each column starves */
  @media (max-width:1040px) and (min-width:821px){
    .fronts{ grid-template-columns:repeat(2,1fr); }
    .fronts > div{ border-bottom:1px solid var(--rule); }
    .fronts > div:nth-child(2n+1){ padding-left:0; }
    .fronts > div:nth-child(2n){ border-right:none; padding-right:0; }
    .fronts > div:nth-last-child(-n+2){ border-bottom:none; }
  }
  @media (max-width:820px){
    .fronts{ grid-template-columns:1fr; }
    .fronts > div{ border-right:none; border-bottom:1px solid var(--rule); padding-left:0; padding-right:0; }
    .fronts > div:last-child{ border-bottom:none; }
  }

  /* ============ PLAN 90 DÍAS — real day scale ============ */
  .timeline{ border-top:1px solid var(--ink); padding-top:1.1rem; }
  .timeline__axis{ position:relative; height:34px; margin-bottom:0.4rem; }
  .timeline__axis span{
    position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    color:var(--ink-70);
  }
  .timeline__axis span::after{ content:""; width:1px; height:9px; background:var(--rule); }
  .phases{ display:grid; gap:0; }
  .phase{
    padding:clamp(1rem,2.2vw,1.45rem) 0; border-bottom:1px solid var(--rule);
  }
  .phase:first-child{ border-top:1px solid var(--rule); }
  /* the bar spans the same track as the day axis above it, so the span a phase
     claims is literally where it sits on the 90 days */
  .phase__bar{ display:block; height:7px; background:var(--rule-faint); position:relative; margin-bottom:0.9rem; }
  .phase__bar i{ position:absolute; top:0; bottom:0; background:var(--measure); }
  .phase__row{
    display:grid; grid-template-columns:9.5rem 1fr; gap:0.6rem clamp(1rem,3vw,2.25rem);
    align-items:start;
  }
  .phase__days{ color:var(--ink-70); }
  .phase h3{ font-variation-settings:"wdth" 96; font-size:1.05rem; margin-bottom:0.4rem; }
  .phase p{ color:var(--ink-70); max-width:60ch; }
  /* phases are a sequence the reader acts on in order, so the actions are numbered */
  .acts{ counter-reset:act; display:grid; gap:0.4rem; max-width:62ch; }
  .acts li{
    counter-increment:act; list-style:none; color:var(--ink-70);
    display:grid; grid-template-columns:1.7rem 1fr; align-items:baseline;
  }
  .acts li::before{
    content:counter(act, upper-alpha) ")";
    font-variation-settings:"wdth" 68; font-weight:600; font-size:0.66rem;
    letter-spacing:0.16em; color:var(--ink-70); font-variant-numeric:tabular-nums;
  }
  .phase__ch{ display:flex; flex-wrap:wrap; gap:0.4rem 1rem; margin-top:0.7rem; color:var(--ink-70); }
  @media (max-width:760px){ .phase__row{ grid-template-columns:1fr; gap:0.4rem; } }

  /* ============ ENTREGABLES — a countable monthly cadence ============ */
  /* two blocks inside one section: what gets made, and what gets run */
  .subhead{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0.4rem;
    font-variation-settings:"wdth" 100; font-size:clamp(1.12rem,1rem + 0.5vw,1.35rem);
    margin:clamp(2.25rem,4.5vw,3.25rem) 0 0.95rem;
  }
  /* el primer subtítulo de una sección no necesita separación extra:
     ajustá el id al de tu sección */
  #entregables .subhead:first-of-type{ margin-top:0; }
  .subhead__num{ color:var(--ink-70); font-size:0.72rem; flex:none; margin-right:0.4rem; }
  /* a heading nested inside a lettered block carries no letter; it reads its rank from size */
  .subhead--sub{ font-size:clamp(1rem,0.95rem + 0.35vw,1.16rem); margin-top:clamp(1.75rem,3.5vw,2.5rem); }
  .manage{ border-top:1px solid var(--ink); }
  .manage__row{
    display:grid; grid-template-columns:minmax(0,1fr) 8rem; gap:clamp(1rem,3vw,2.25rem);
    align-items:baseline; padding:0.95rem 0; border-bottom:1px solid var(--rule);
  }
  .manage h3{ font-variation-settings:"wdth" 96; font-size:1.02rem; margin-bottom:0.25rem; }
  .manage p{ color:var(--ink-70); font-size:0.92rem; }
  .manage__when{ text-align:right; color:var(--ink-70); }
  @media (max-width:760px){ .manage__row{ grid-template-columns:1fr auto; gap:0.3rem 1rem; } }
  .sub__lede{ color:var(--ink-70); font-size:0.92rem; max-width:62ch; margin-bottom:1.1rem; }


  /* what the proposal does not cover reads in full ink: an exclusion is not "unresolved" */
  /* a commercial condition reads in full ink, like an exclusion: it is not fine print */
  .excluded,.term{ margin-top:1.15rem; color:var(--ink); font-size:0.92rem; }
  .excluded b{ font-weight:700; }
  .deliv{ border-top:1px solid var(--ink); }
  .deliv__head, .deliv__row{
    display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1.25fr) 5.5rem;
    grid-template-areas:"what weeks sum";
    gap:clamp(1rem,3vw,2.25rem); align-items:baseline;
    border-bottom:1px solid var(--rule);
  }
  .deliv__head{ padding:0.6rem 0; color:var(--ink-70); }
  .deliv__row{ padding:1.05rem 0; }
  .deliv__what{ grid-area:what; }
  .deliv__weeks{ grid-area:weeks; display:grid; grid-template-columns:repeat(4,1fr); gap:0.45rem; }
  .deliv__sum{ grid-area:sum; text-align:right; }
  .deliv h3{ font-variation-settings:"wdth" 96; font-size:1.02rem; margin-bottom:0.3rem; }
  .deliv__what p{ color:var(--ink-70); font-size:0.92rem; }
  .deliv__head .deliv__weeks span{ text-align:center; }
  /* one mark per piece: lime counts a real quantity, here the pieces produced */
  .deliv__row .deliv__weeks i{ display:block; height:13px; background:var(--measure); }
  .deliv__row .deliv__weeks i.off{ background:none; }
  .deliv__row .deliv__sum{ font-weight:700; font-size:1.1rem; }
  .deliv__total{ padding-top:0.9rem; color:var(--ink-70); font-size:0.92rem; }
  .deliv__total b{ color:var(--ink); font-weight:700; }
  /* stories are coverage, not production: an outlined mark, never a lime count */
  .deliv__row--support .deliv__weeks i{ background:none; border:1px solid var(--ink-45); }
  .deliv__row--support .deliv__sum{ color:var(--ink-70); font-weight:600; font-size:0.66rem; }
  .deliv__notes{ margin-top:1.1rem; display:grid; gap:0.55rem; }
  .deliv__notes li{
    list-style:none; display:grid; grid-template-columns:0.9rem 1fr; gap:0.6rem;
    color:var(--ink-70); font-size:0.92rem;
  }
  .deliv__notes li::before{ content:""; width:9px; height:1px; background:var(--ink-45); margin-top:0.72em; }
  .deliv__note--out{ color:var(--ink); }
  .deliv__note--out b{ font-weight:700; }
  @media (max-width:760px){
    .deliv__head{ display:none; }
    .deliv__row{
      grid-template-columns:1fr auto; grid-template-areas:"what sum" "weeks weeks";
      gap:0.35rem 1rem;
    }
    .deliv__weeks{ max-width:230px; margin-top:0.5rem; }
  }

  /* ============ RESPALDO / COLABORADORES ============ */
  .stamp{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; border-top:1px solid var(--ink); padding-top:clamp(1.5rem,3vw,2.25rem); }
  .stamp__logo{ padding:clamp(1rem,2.5vw,1.6rem) clamp(1.25rem,3vw,2rem); border:1px solid var(--rule); }
  .stamp__logo img{ height:clamp(56px,9vw,84px); width:auto; }
  .stamp__notes{ display:flex; flex-direction:column; gap:0.55rem; }
  .stamp__notes p{ color:var(--ink-70); max-width:52ch; }
  @media (max-width:700px){ .stamp{ grid-template-columns:1fr; } }
  /* the backing is not decoration: this line says what the campaign does with it */
  .use{ margin-bottom:clamp(1.5rem,3vw,2.25rem); color:var(--ink-70); font-size:0.98rem; max-width:68ch; }
  .use b{ color:var(--ink); font-weight:700; }

  .collab{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); }
  .collab > div{
    display:flex; align-items:center; justify-content:center;
    padding:clamp(1.1rem,2.5vw,1.75rem) 1rem; border-right:1px solid var(--rule-faint);
    min-height:104px;
  }
  .collab > div:last-child{ border-right:none; }
  .collab img{ max-height:46px; max-width:100%; width:auto; object-fit:contain; }
  @media (max-width:700px){
    .collab{ grid-template-columns:repeat(2,1fr); }
    .collab > div:nth-child(2n){ border-right:none; }
    .collab > div:nth-child(-n+2){ border-bottom:1px solid var(--rule-faint); }
  }

  /* ============ INVERSIÓN — the priced register ============ */
  .cost{ border-top:1px solid var(--ink); }
  .cost__head, .cost__row{
    display:grid; grid-template-columns:minmax(0,1fr) 15rem;
    gap:clamp(1rem,3vw,2.25rem); align-items:baseline;
    border-bottom:1px solid var(--rule);
  }
  .cost__head{ padding:0.6rem 0; color:var(--ink-70); }
  .cost__row{ padding:1.05rem 0; }
  .cost h3{ font-variation-settings:"wdth" 96; font-size:1.02rem; margin-bottom:0.25rem; }
  .cost__row p{ color:var(--ink-70); font-size:0.92rem; }
  .cost__amt{ text-align:right; }
  .cost__row .cost__amt{ font-weight:700; font-size:1.15rem; }
  .cost__amt small{
    font-weight:600; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
    font-variation-settings:"wdth" 68; color:var(--ink-70); margin-left:0.4rem;
  }
  /* el rojo sigue significando una sola cosa: una cifra que nadie acordó todavía.
     Se aplica con .cost__amt--open en el contenedor del monto. Cuando la cifra se
     acuerda, la nota se BORRA, no se recolorea. */
  .cost__amt--open .cost__note{ color:var(--unresolved); }
  .cost__note{
    display:block; margin-top:0.25rem;
    font-weight:600; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
    font-variation-settings:"wdth" 68; color:var(--ink-70);
  }
  /* campaign scenarios: one register, two money columns, read against each other */
  .camp{ border-top:1px solid var(--ink); }
  .camp__head, .camp__row{
    display:grid; grid-template-columns:minmax(0,1fr) 6.5rem 7.5rem;
    gap:clamp(0.75rem,2.5vw,2rem); align-items:baseline;
    border-bottom:1px solid var(--rule);
  }
  .camp__head{ padding:0.6rem 0; color:var(--ink-70); }
  .camp__row{ padding:1rem 0; }
  .camp h3{ font-variation-settings:"wdth" 96; font-size:1.02rem; margin-bottom:0.25rem; }
  .camp__row p{ color:var(--ink-70); font-size:0.92rem; }
  .camp__amt{ text-align:right; }
  .camp__row .camp__amt{ font-weight:700; font-size:1.02rem; }
  .camp__amt small{
    font-weight:600; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
    font-variation-settings:"wdth" 68; color:var(--ink-70); margin-left:0.3rem;
  }
  .camp__row--total{ border-bottom:none; border-top:1px solid var(--ink); }
  .camp__row--total h3{ margin-bottom:0; }
  .rationale{ margin-top:1rem; color:var(--ink-70); font-size:0.92rem; max-width:72ch; }
  .rationale b{ color:var(--ink); font-weight:700; }
  @media (max-width:760px){
    .camp__head{ display:none; }
    .camp__row{ grid-template-columns:1fr 1fr; gap:0.45rem 1rem; }
    .camp__row > div:first-child{ grid-column:1 / -1; }
    .camp__amt{ text-align:left; }
  }
  .cost__sum{ padding-top:0.95rem; color:var(--ink-70); font-size:0.92rem; max-width:64ch; }
  /* the line the client actually signs: full ink, no detail row under it */
  .cost__row--total{ border-bottom:none; border-top:1px solid var(--ink); }
  .cost__row--total h3{ margin-bottom:0; }
  .cost__row--total .cost__amt{ font-size:1.3rem; }
  @media (max-width:700px){
    .cost__head{ display:none; }
    .cost__row{ grid-template-columns:1fr; gap:0.5rem; }
    .cost__row .cost__amt{ text-align:left; }
  }

  /* ============ COLOPHON ============ */
  /* the last thing read before the colophon: not a second creed — no quotation marks,
     no display size — a plain statement of what the client is signing up to. */
  .closing{ border-top:1px solid var(--ink); padding-block:clamp(2.75rem,6vw,4.5rem); }
  .closing p{
    font-variation-settings:"wdth" 100; font-weight:600;
    font-size:clamp(1.05rem,0.9rem + 0.75vw,1.42rem);
    line-height:1.4; letter-spacing:-0.015em; max-width:54ch;
  }

  .colophon{ border-top:1px solid var(--ink); padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4.5rem); }
  .colophon__in{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:flex-end; }
  .colophon img{ height:30px; width:auto; }
  .colophon__right{ display:flex; gap:clamp(1.25rem,3vw,2.5rem); color:var(--ink-70); }
  .colophon__right span{ white-space:nowrap; }
  @media (max-width:560px){
    .colophon__in{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
    .colophon__right{ flex-direction:column; gap:0.4rem; }
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
    html{ scroll-behavior:auto; }
  }

  @media print{
    @page{ size:A4; margin:13mm 11mm; }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .nav{ display:none; }

    /* A print viewport is about 740px wide, which trips every mobile breakpoint and
       stacks the whole document into one column. Put the tabular layouts back. */
    .register{ grid-template-columns:repeat(2,1fr); grid-auto-flow:column; grid-template-rows:repeat(1,auto); }
    .parcels__row{ grid-template-columns:7.5rem 1fr 10rem; gap:1rem; }
    .fronts{ grid-template-columns:repeat(2,1fr); }
    .fronts > div{ border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding-left:1.25rem; padding-right:1.25rem; }
    .fronts > div:nth-child(2n+1){ padding-left:0; }
    .fronts > div:nth-child(2n){ border-right:none; padding-right:0; }
    .fronts > div:nth-last-child(-n+2){ border-bottom:none; }
    .phase__row{ grid-template-columns:8.5rem 1fr; gap:0.6rem 1.25rem; }
    .deliv__head{ display:grid; }
    .deliv__head,.deliv__row{ grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) 4.5rem; grid-template-areas:"what weeks sum"; gap:1.25rem; }
    .deliv__weeks{ margin-top:0; max-width:none; }
    .cost__head{ display:grid; }
    .cost__head,.cost__row{ grid-template-columns:minmax(0,1fr) 11rem; gap:1.25rem; }
    .cost__row .cost__amt{ text-align:right; }
    .camp__head{ display:grid; }
    .camp__head,.camp__row{ grid-template-columns:minmax(0,1fr) 5.5rem 6.5rem; gap:1rem; }
    .camp__row > div:first-child{ grid-column:auto; }
    .camp__amt{ text-align:right; }
    .manage__row{ grid-template-columns:minmax(0,1fr) 7rem; gap:1.25rem; }
    .stamp{ grid-template-columns:auto 1fr; }
    .collab{ grid-template-columns:repeat(4,1fr); }
    .colophon__in{ flex-direction:row; align-items:flex-end; }
    .colophon__right{ flex-direction:row; }

    /* screen breathing room becomes wasted paper */
    .band{ padding-block:1.5rem; }
    .brief__in{ padding-block:1.75rem; }
    .titleblock{ padding-top:0; }
    .plate__window{ height:auto; aspect-ratio:16/9; }
    .plate{ padding-bottom:1.25rem; }
    .closing{ padding-block:1.75rem; }

    /* a heading stranded at the foot of a page is the classic print defect;
       the index and its title must also stay together */
    .head,.subhead{ break-after:avoid; }
    .head{ break-inside:avoid; }
    .deliv__head,.cost__head,.camp__head{ break-after:avoid; }
    .colophon,.closing,.deliv,.cost,.camp,.manage,.plays,.fronts,.timeline{ break-before:avoid; }
    /* nothing that reads as one unit may be split across two sheets */
    .phase,.parcels__row,.fronts > div,
    .plays__row,.deliv__row,.cost__row,.camp__row,.manage__row,
    .creed,.use,.closing,.brief__in,.stamp,.collab,.aim__text,
    .register li,.deliv__notes li,.excluded,.term,.rationale{ break-inside:avoid; }
  }