/* =====================================================================
   #renault — Periódico «Renault México vs. Renault Egipto»  (Lane E)
   Cream-light newspaper sheet on the cream papyrus paper. Mobile-first.
   Tokens only (§4). Charts: inline SVG, colours via --chart-* tokens.
   ===================================================================== */

#renault { padding: 0; }

.renault__wrap {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad) var(--gutter);
}

.renault__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rn-hatch__line { stroke: var(--c-cream-light); stroke-width: 1.6; }

/* ---- SVG colour classes (labels never carry colour; marks do) ---- */
#renault .c-mx { fill: var(--chart-mx); }
#renault .c-eg { fill: var(--chart-eg); }
#renault .c-neutral { fill: var(--chart-neutral); }
#renault .c-navy { fill: var(--c-navy); }
#renault .c-hatch { fill: url(#rn-hatch); }
#renault .s-eg { stroke: var(--chart-eg); fill: none; }
#renault .s-mx { stroke: var(--chart-mx); fill: none; }
#renault .s-neutral { stroke: var(--chart-neutral); fill: none; }
#renault .s-navy { stroke: var(--c-navy); fill: none; }
#renault .s-gold { stroke: var(--c-gold); fill: none; }
#renault .s-grid { stroke: var(--chart-grid); fill: none; }

/* ---- The sheet ---- */
.renault__sheet {
  position: relative;
  background: var(--c-cream-light);
  box-shadow: var(--sh-lift), var(--sh-inset-paper);
  border-radius: 2px;
  padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  color: var(--c-navy);
  font-family: var(--ff-body);
}

/* ---- Masthead ---- */
.masthead { text-align: center; }

.masthead__ed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: 0;
}
.masthead__ed::before,
.masthead__ed::after {
  content: "";
  flex: 1 1 0;
  max-width: 140px;
  height: 1px;
  background: var(--c-cream-dark);
}

.masthead__title {
  margin: var(--sp-4) 0 var(--sp-5);
  font: 900 var(--fs-h1) / var(--lh-tight) var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  color: var(--c-navy);
  text-wrap: balance;
}
.masthead__line { display: block; }
.masthead__vs { font-style: italic; font-weight: 400; color: var(--c-terracotta-text); }

.filete {
  height: 1px;
  background: var(--c-navy);
  transform-origin: 0 50%;
}
.filete--double {
  height: 6px;
  background: none;
  border-top: 3px solid var(--c-navy);
  border-bottom: 1px solid var(--c-navy);
}

.masthead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-cream-dark);
  font: 600 var(--fs-eyebrow) / 1.4 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}
.masthead__sub { margin: 0; }

.legend {
  display: flex;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend__sw { width: 14px; height: 14px; flex: none; display: inline-block; }
.legend__sw--eg { background: var(--chart-eg); border-radius: 2px; }

/* ---- Editorial grid ---- */
.notes {
  --ncol: 1;
  --ngap: var(--sp-6);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--ngap);
  row-gap: 0;
  margin-top: var(--sp-2);
}

.note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--c-cream-dark);
  background: var(--c-cream-light);
  contain: layout paint;
}
.notes > .note:first-child { border-top-color: transparent; }

.note__folio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font: 600 var(--fs-eyebrow) / 1 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}
.note__n { padding-top: .1em; }

#renault .stamp--mini {                /* lane E override of the Core .stamp--mini (components.css) */
  display: inline-block;
  padding: .45em .65em .38em;
  font-size: .6875rem;
  line-height: 1;
  color: var(--c-red-ink);
  border: 2px solid currentColor;
  border-radius: var(--r-sm);
  text-decoration: none;
  letter-spacing: .18em;
  transition: color var(--t-micro), background-color var(--t-micro);
}
/* §10: ≥ 44 px touch target without changing the look — invisible hit area around the mini stamp */
#renault .stamp--mini { position: relative; }
#renault .stamp--mini::before { content: ""; position: absolute; inset: -10px -4px; }
#renault .stamp--mini:hover,
#renault .stamp--mini:focus-visible { color: var(--c-cream-light); background-color: var(--c-red-ink); }

.note__title {
  margin: 0;
  font: 700 clamp(1.25rem, 1.75vw, 1.75rem) / var(--lh-heading) var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-navy);
  text-wrap: balance;
}
.note--8 .note__title { font-size: var(--fs-h3); }

.note__body {
  margin: 0;
  font: 400 var(--fs-body) / var(--lh-body) var(--ff-body);
  color: var(--c-navy);
  max-width: var(--measure);
}
.note__body::first-letter {
  float: left;
  padding: .06em .12em 0 0;
  font: 700 2.9em / .82 var(--ff-display);
  color: var(--c-terracotta-text);
}
.note__body strong { font-weight: 700; }

.note__leadin {
  margin: 0;
  font: 600 var(--fs-small) / 1.4 var(--ff-body);
  color: var(--c-ink-soft);
}

.note__kicker {
  margin: auto 0 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-gold);
  font: 700 var(--fs-small) / 1.5 var(--ff-body);
  color: var(--c-terracotta-text);
}

/* ---- Chart chrome ---- */
.chart {
  position: relative;
  margin: 0;
  padding: var(--sp-4) 0 var(--sp-2);
  border-top: 1px dotted var(--c-cream-dark);
}
.chart__cap {
  margin: 0 0 var(--sp-3);
  font: 600 var(--fs-eyebrow) / 1.4 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}
.chart__cap + .chart__cap,
.chart__note + .chart__cap { margin-top: var(--sp-5); }
.chart__note {
  margin: var(--sp-3) 0 0;
  font: 400 var(--fs-small) / 1.4 var(--ff-body);
  color: var(--c-ink-soft);
}
.chart__note b { color: var(--c-red-ink); font-variant-numeric: tabular-nums; }

.chart__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: .45em .75em;
  border-radius: var(--r-sm);
  background: var(--c-navy);
  color: var(--c-cream);
  font: 500 var(--fs-small) / 1.3 var(--ff-body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-micro);
}
.chart__tip.is-on { opacity: 1; }

#renault .num { font-variant-numeric: tabular-nums; }

/* ---- Stat tiles ---- */
.tiles { display: grid; gap: var(--sp-3); }
.tiles--vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.tiles--vs .tile__num { font-size: clamp(2.5rem, 7vw, 6.5rem); }
.tiles--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--c-cream-dark);
  background: var(--c-cream);
  box-shadow: var(--sh-1);
}
.tile__num {
  display: block;
  font: 700 var(--fs-stat) / var(--lh-tight) var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-navy);
}
.tiles--4 .tile__num { font-size: clamp(1.9rem, 3.4vw, 3.5rem); }
.tile__num--approx { font-size: clamp(1.75rem, 3vw, 3rem); }
.waffle .tile__num { font-size: clamp(2rem, 3.4vw, 3.5rem); }
.tile--mx .tile__num { color: var(--c-red); }
.tile--eg .tile__num { color: var(--c-teal); }
.tile__unit {
  font: 600 var(--fs-eyebrow) / 1.4 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}
.tile__label { font: 400 var(--fs-small) / 1.4 var(--ff-body); color: var(--c-navy); }
.tiles__vs {
  align-self: center;
  font: italic 400 var(--fs-h3) / 1 var(--ff-display);
  color: var(--c-terracotta-text);
}
.tile--stamp { align-items: center; justify-content: center; text-align: center; gap: var(--sp-3); }

.stamp--pct {
  display: inline-block;
  padding: .22em .5em .16em;
  border: 3px solid var(--c-teal-ink);
  border-radius: 6px;
  color: var(--c-teal-ink);
  font: 700 clamp(1.5rem, 2.6vw, 2.5rem) / 1 var(--ff-body);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  transform: rotate(var(--rot, 0deg));
}
.stamp--rank {
  display: inline-block;
  padding: .35em .45em .28em;
  border: 2px solid var(--c-teal-ink);
  border-radius: 999px;
  color: var(--c-teal-ink);
  font: 700 .75rem / 1 var(--ff-body);
  letter-spacing: .06em;
  transform: rotate(var(--rot, 0deg));
}

/* ---- Chip lists ---- */
.lists { display: grid; gap: var(--sp-4); }
.list__label {
  margin: 0 0 var(--sp-2);
  font: 600 var(--fs-eyebrow) / 1.4 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}
.list--mx .list__label { color: var(--c-red-ink); }
.list--eg .list__label { color: var(--c-teal-ink); }
.list__count { color: var(--c-navy); letter-spacing: .1em; }
#renault .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
#renault .pill { background: var(--c-cream); transition: background-color var(--t-micro), color var(--t-micro); }
#renault .pill--mx:hover { background: var(--c-red-ink); color: var(--c-cream-light); }
#renault .pill--eg:hover { background: var(--c-teal-ink); color: var(--c-cream-light); }
#renault .pill .ico { width: 1em; height: 1em; flex: none; }

/* ---- Network (Nota 4) ---- */
.net { display: grid; gap: var(--sp-5); }
.net__half { text-align: center; }
.net__svg { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.net__guide { stroke-width: 1; stroke-dasharray: 2 5; }
.net__spoke { stroke-width: 2.5; stroke-linecap: round; }
.net__hub-ring { stroke-width: 1; stroke-dasharray: 3 4; }
.net__label {
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font: 400 var(--fs-small) / 1.4 var(--ff-body);
  color: var(--c-navy);
}
.net__big {
  font: 700 clamp(1.75rem, 2.6vw, 2.5rem) / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-navy);
}
.net__half--mx .net__big { color: var(--c-red); }
.net__half--eg .net__big { color: var(--c-teal); }
.net__label small {
  font: 600 var(--fs-eyebrow) / 1.4 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}

/* ---- Horizontal bars (Notas 6 y 13) ---- */
.bars { position: relative; display: grid; gap: var(--sp-2) 0; }
.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label val" "svg svg";
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  transition: opacity var(--t-micro);
}
.bars--rank .bar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "rank label val" "svg svg svg";
}
.bar__rank { grid-area: rank; }
.bar__label { grid-area: label; }
.bar__svg { grid-area: svg; }
.bar__val { grid-area: val; }
.bars:hover .bar { opacity: .55; }
.bars .bar:hover { opacity: 1; }
.bar__rank {
  font: 700 var(--fs-small) / 1 var(--ff-body);
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
.bar__label { font: 500 var(--fs-small) / 1.2 var(--ff-body); color: var(--c-navy); }
.bar--renault .bar__label { font-weight: 700; }
.bar__svg { display: block; width: 100%; height: auto; max-height: 28px; margin-bottom: var(--sp-2); }
.bar__val {
  text-align: right;
  font: 700 var(--fs-small) / 1 var(--ff-body);
  font-variant-numeric: tabular-nums;
  color: var(--c-navy);
  white-space: nowrap;
}
.bar--mx .bar__val { color: var(--c-red-ink); }
.bar--eg .bar__val { color: var(--c-teal-ink); }
.bars__gap {
  height: 1px;
  margin: var(--sp-1) 0;
  background: repeating-linear-gradient(90deg, var(--c-cream-dark) 0 4px, transparent 4px 9px);
}

/* Dumbbell (Nota 6, participación) */
.dumbbell { position: relative; padding: 2.3em 0 1.6em; }
.db__svg { display: block; width: 100%; height: auto; }
.db__axis { stroke-width: 2; }
.db__tick { stroke-width: 1.5; }
.db__line { stroke-width: 4; stroke-linecap: round; }
.db__lab {
  position: absolute;
  left: var(--x);
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 var(--fs-small) / 1.2 var(--ff-body);
  color: var(--c-navy);
}
.db__lab b { font-weight: 700; font-variant-numeric: tabular-nums; }
.db__lab--mx { top: 0; }
.db__lab--mx b { color: var(--c-red-ink); }
.db__lab--eg { bottom: 0; }
.db__lab--eg b { color: var(--c-teal-ink); }
.db__axis-lab {
  position: absolute;
  top: .2em;
  font: 500 var(--fs-eyebrow) / 1 var(--ff-body);
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
.db__axis-lab--0 { left: 0; }
.db__axis-lab--4 { right: 0; }

/* ---- Timeline (Nota 7) ---- */
.tl__svg { display: block; width: 100%; height: auto; }
.tl__line { stroke-width: 2; }
.tl__tick { stroke-width: 1.5; }
.tl__ring { stroke-width: 1.5; }
.tl__labels { display: flex; justify-content: space-between; gap: var(--sp-5); }
.tl__lab {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: 46%;
  font: 400 var(--fs-small) / 1.35 var(--ff-body);
  color: var(--c-navy);
}
.tl__lab--end { text-align: right; align-items: flex-end; }
.tl__year {
  font: 700 clamp(2rem, 3vw, 3rem) / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-navy);
}
.tl__lab--start .tl__year { color: var(--c-teal); }

/* ---- Flip card (Nota 9) ---- */
.chart--flip { display: grid; place-items: center; }
.flip {
  display: block;
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 5 / 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  margin-bottom: var(--sp-6);
  cursor: pointer;
  perspective: 1000px;
}
.flip__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip__face--mx {
  background: var(--c-cream);
  border: 1px solid var(--c-red);
  box-shadow: var(--sh-2);
  color: var(--c-navy);
}
.flip__face--eg {
  transform: rotateY(180deg);
  background: var(--c-navy);
  border: 1px solid var(--c-gold);
  color: var(--c-cream);
}
.flip__market {
  font: 600 var(--fs-eyebrow) / 1.4 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
}
.flip__face--mx .flip__market { color: var(--c-red-ink); }
.flip__face--eg .flip__market { color: var(--c-gold); }
.flip__name {
  font: 700 var(--fs-h3) / 1.05 var(--ff-display);
  letter-spacing: 0;
}
.flip__stat {
  font: 900 clamp(1.75rem, 2.6vw, 2.5rem) / 1 var(--ff-display);
  white-space: nowrap;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.flip__face--mx .flip__stat { color: var(--c-red); }
.flip__face--eg .flip__stat { color: var(--c-gold-light); }
.flip__desc { font: 400 var(--fs-small) / 1.35 var(--ff-body); }
.flip__face--eg .flip__desc { color: var(--c-paper-soft); }
.flip__hint {
  position: absolute;
  right: var(--sp-3);
  bottom: calc(-1 * var(--sp-5));
  font: 600 var(--fs-eyebrow) / 1 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}

/* ---- Gama (Nota 10) ---- */
.gama { display: grid; gap: var(--sp-4); align-items: center; }
.gama__rombo {
  width: 56px;
  height: 56px;
  justify-self: center;
  color: var(--c-gold-ink);
}

/* ---- Waffle (Nota 14) ---- */
.waffle { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: center; justify-items: start; }
.waffle__svg { display: block; width: 150px; height: auto; }
.waffle__side { display: flex; flex-direction: column; gap: var(--sp-3); }
.waffle__legend {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font: 500 var(--fs-small) / 1.3 var(--ff-body);
  color: var(--c-navy);
}

/* ---- Colophon ---- */
.colophon { margin-top: var(--sp-6); text-align: center; }
.colophon__line { margin: var(--sp-3) 0 0; }

/* ---- Focus (inside paper) ---- */
#renault :focus-visible { outline: 2px solid var(--c-terracotta-deep); outline-offset: 4px; }

/* =====================================================================
   ≥ 640px — two columns
   ===================================================================== */
@media (min-width: 640px) {
  .notes {
    --ncol: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    background-image: linear-gradient(90deg,
      transparent calc(100% - var(--ngap) / 2 - .5px),
      var(--c-cream-dark) calc(100% - var(--ngap) / 2 - .5px),
      var(--c-cream-dark) calc(100% - var(--ngap) / 2 + .5px),
      transparent calc(100% - var(--ngap) / 2 + .5px));
    background-size: calc((100% - (var(--ncol) - 1) * var(--ngap)) / var(--ncol) + var(--ngap)) 100%;
    background-repeat: repeat-x;
  }
  .note--8 { grid-column: span 2; }
  .net { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lists { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .gama { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .gama__row--mx { text-align: right; }
  .gama__row--mx .chips { justify-content: flex-end; }
  .waffle { grid-template-columns: auto minmax(0, 1fr); }
  .waffle__svg { width: 190px; }
  .flip { aspect-ratio: 8 / 5; }
  .tl__lab { max-width: 40%; }
  .bar {
    grid-template-columns: 5.5em minmax(0, 1fr) 4.75em;
    grid-template-areas: "label svg val";
    gap: var(--sp-3);
  }
  .bars--rank .bar {
    grid-template-columns: 2.25em 5.5em minmax(0, 1fr) 4.75em;
    grid-template-areas: "rank label svg val";
  }
  .bar__svg { margin-bottom: 0; }
}

/* =====================================================================
   ≥ 1024px — 12-column editorial grid, vertical hairlines
   ===================================================================== */
@media (min-width: 1024px) {
  .notes {
    --ncol: 12;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .note { padding: var(--sp-6) 0; gap: var(--sp-5); }
  .note--4 { grid-column: span 4; }
  .note--6 { grid-column: span 6; }
  .note--8 { grid-column: span 8; }
  .notes > .note:nth-child(2) { border-top-color: transparent; }
  .note--4 .lists { grid-template-columns: 1fr; }
  .note--4 .note__title { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
  .waffle__svg { width: 220px; }
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .bar { grid-template-columns: 6.5em minmax(0, 1fr) 5.5em; }
  .bars--rank .bar { grid-template-columns: 2.5em 6.5em minmax(0, 1fr) 5.5em; }
  .gama__rombo { width: 72px; height: 72px; }
  .flip__face { padding: var(--sp-6); }
}

@media (min-width: 1280px) {
  .renault__sheet { padding-inline: clamp(2rem, 5vw, 5rem); }
}