/* ============================================================
   Revista La Jolla Uno — hoja de estilo del número
   Geometría: carta (8.5in × 11in). 1in = 96px exactos, así que
   la misma caja sirve para pantalla y para impresión/PDF.
   Pantalla: una página a la vez, escalada para caber (revista.js).
   Impresión: las páginas se apilan, una por hoja.
   Paleta y tipografías: ../styles.css (tokens del portal).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: var(--crema-900); background: var(--crema-200); }

/* ── La hoja ───────────────────────────────────────────────── */
.pg {
  position: relative;
  width: 8.5in; height: 11in;
  padding: 0.7in 0.75in 0.95in;   /* el extra de abajo reserva el sitio del folio */
  background: var(--white);
  overflow: hidden;
  font-size: 10.5pt; line-height: 1.45;
}
.pg.bleed { padding: 0; }                    /* portada / contraportada a sangre */
.pg.deep  { background: var(--crema-800); color: var(--text-on-deep); }

/* Folio y cintillo al pie de cada página interior */
.pg .folio {
  position: absolute; left: 0.75in; right: 0.75in; bottom: 0.42in;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase;
  color: var(--crema-500); border-top: 0.3mm solid var(--crema-200); padding-top: 2mm;
}
.pg .folio .n { font-weight: 800; color: var(--terracota-600); }

/* ── Tipografía editorial ──────────────────────────────────── */
.kick { font-size: 7.5pt; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--terracota-600); margin: 0 0 2.5mm; }
.hl   { font-family: var(--font-serif); font-weight: 500; font-size: 30pt; line-height: 1.04; color: var(--crema-950); margin: 0 0 3.5mm; text-wrap: balance; }
.hl em { font-style: italic; color: var(--terracota-600); }
.hl.sm { font-size: 22pt; }
.lede { font-family: var(--font-serif); font-size: 13pt; line-height: 1.38; color: var(--crema-700); margin: 0 0 5mm; text-wrap: pretty; }
.pg p { margin: 0 0 3mm; text-wrap: pretty; orphans: 3; widows: 3; }
.sec-t { font-family: var(--font-serif); font-weight: 500; font-size: 15pt; color: var(--crema-950); margin: 0 0 3mm; padding-bottom: 1.8mm; border-bottom: 0.3mm solid var(--crema-300); }
.byline { font-size: 8.5pt; letter-spacing: .06em; text-transform: uppercase; color: var(--crema-600); margin: 0 0 4mm; }

/* Columnas reales — fluyen y cortan bien al imprimir */
.cols2 { column-count: 2; column-gap: 7mm; }
.cols2 > :first-child { margin-top: 0; }
.cols2 .span { column-span: all; }

/* Capitular */
.drop::first-letter {
  float: left; font-family: var(--font-serif); font-size: 34pt; line-height: .82;
  padding: 1mm 2mm 0 0; color: var(--terracota-500);
}

/* ── Componentes ───────────────────────────────────────────── */
.quote {
  font-family: var(--font-serif); font-size: 15pt; line-height: 1.32; color: var(--crema-950);
  border-top: 0.5mm solid var(--terracota-500); border-bottom: 0.5mm solid var(--terracota-500);
  padding: 4mm 0; margin: 5mm 0; break-inside: avoid; text-wrap: balance;
}
.quote em { font-style: italic; color: var(--terracota-600); }
.quote .src { display: block; font-family: var(--font-sans); font-size: 8.5pt; font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--crema-600); margin-top: 3mm; }

.callout {
  background: var(--crema-50); border-left: 0.9mm solid var(--terracota-500);
  padding: 4mm 5mm; margin: 4mm 0; font-size: 9.5pt; break-inside: avoid;
}
.callout .lbl { display: block; font-size: 7.5pt; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--terracota-600); margin-bottom: 1.8mm; }
.callout p:last-child { margin-bottom: 0; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 5mm 0; break-inside: avoid; }
.stats .s { background: var(--crema-50); border-top: 0.7mm solid var(--terracota-500); border-radius: 2mm; padding: 4mm; }
.stats .s .v { font-family: var(--font-serif); font-size: 21pt; line-height: 1; color: var(--crema-950); }
.stats .s .l { font-size: 8pt; color: var(--crema-600); margin-top: 1.5mm; line-height: 1.35; }

table.t { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin: 4mm 0; }
table.t thead th { text-align: left; font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracota-600); border-bottom: 0.5mm solid var(--terracota-500); padding: 0 0 2mm; }
table.t td { padding: 2.4mm 0; border-bottom: 0.25mm solid var(--crema-200); vertical-align: top; }
table.t tr { break-inside: avoid; }
table.t td.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; font-size: 7.5pt; font-weight: 700; padding: 0.9mm 2.6mm;
  border-radius: 99px; background: var(--crema-100); color: var(--crema-800); white-space: nowrap; }
.pill.ok   { background: var(--success-100); color: var(--success-600); }
.pill.work { background: var(--warning-100); color: var(--warning-600); }
.pill.wait { background: var(--info-100);    color: var(--info-600); }

/* ── Marcadores de contenido pendiente ─────────────────────── */
/* .ph  = texto por entregar · .ph-img = imagen por entregar   */
.ph { background: var(--terracota-50); box-shadow: inset 0 -0.35mm 0 var(--terracota-300); color: var(--terracota-800); }
.ph-img {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5mm;
  background: var(--crema-100); border: 0.4mm dashed var(--crema-400); border-radius: 2mm;
  color: var(--crema-600); text-align: center; padding: 4mm; break-inside: avoid;
}
.ph-img .ic { font-size: 15pt; opacity: .5; }
.ph-img .n  { font-size: 8.5pt; font-weight: 700; color: var(--crema-700); }
.ph-img .d  { font-size: 7.5pt; line-height: 1.4; max-width: 58mm; }
.ph-img.on-deep { background: rgba(255,255,255,.07); border-color: rgba(247,241,232,.3); color: var(--crema-200); }
.ph-img.on-deep .n { color: var(--crema-50); }

/* Con ?listo=1 (o el botón "Ocultar marcas") los marcadores se vuelven neutros,
   para revisar cómo se verá el número ya terminado. */
body.clean .ph { background: none; box-shadow: none; color: inherit; }
body.clean .ph-img { border-style: solid; border-color: var(--crema-200); background: var(--crema-50); }

/* Aviso de desbordamiento: el contenido no cabe en la hoja. Sólo en pantalla. */
@media screen {
  .pg.over { outline: 0.8mm solid var(--danger-600); outline-offset: -0.8mm; }
  .pg.over::after {
    content: "El contenido no cabe en esta página — recórtalo o pásalo a una página nueva";
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
    background: var(--danger-600); color: var(--white);
    font-family: var(--font-sans); font-size: 8.5pt; font-weight: 700;
    text-align: center; padding: 2mm 4mm;
  }
  .toc a.over .n::after { content: " !"; color: var(--danger-600); }
}

/* ── Sólo pantalla: el visor de páginas ────────────────────── */
@media screen {
  body { min-height: 100vh; overflow: hidden; }

  .stage { position: fixed; inset: 0; padding: 64px 56px 76px; }
  .sheets {
    position: absolute; left: 50%; top: 50%;
    width: 8.5in; height: 11in; transform-origin: center center;
    transform: translate(-50%, -50%);
  }

  /* El escenario da la profundidad; la hoja que gira vive dentro de .sheets. */
  .stage  { perspective: 2800px; perspective-origin: 50% 46%; }
  .sheets { transition: transform .72s cubic-bezier(.36,.06,.2,1); }
  .sheets.wide { width: 17in; }            /* dos hojas, una junto a la otra */

  .pg {
    position: absolute; top: 0; left: 0; width: 8.5in; height: 11in;
    box-shadow: 0 18px 50px rgba(58,45,33,.22), 0 2px 8px rgba(58,45,33,.10);
    visibility: hidden;                    /* oculta pero medible: el aviso de desbordamiento la necesita */
  }
  .pg.on { visibility: visible; z-index: 2; }

  /* Lomo: sólo cuando de verdad hay dos hojas abiertas */
  .sheets.two::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(8.5in - 10mm);
    width: 20mm; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, rgba(58,45,33,0), rgba(58,45,33,.13) 40%,
                rgba(58,45,33,.21) 50%, rgba(58,45,33,.13) 60%, rgba(58,45,33,0));
  }

  /* ── La hoja que gira ───────────────────────────────────── */
  .leaf {
    position: absolute; top: 0; width: 8.5in; height: 11in; z-index: 6;
    transform-style: preserve-3d; transform-origin: left center; will-change: transform;
  }
  .leaf .face {
    position: absolute; inset: 0; overflow: hidden; background: var(--white);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 20px 55px rgba(58,45,33,.3);
  }
  .leaf .face.b { transform: rotateY(180deg); }
  /* Reverso sin contenido (vista de una página): papel, no página en blanco */
  .leaf .face.blank { background: linear-gradient(115deg, var(--crema-50), var(--crema-100) 45%, var(--crema-150)); }
  .leaf .pg.clone { visibility: visible; box-shadow: none; }

  /* Sombreado que recorre la hoja mientras gira */
  .leaf .gl { position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(58,45,33,.5), rgba(58,45,33,.08) 55%, rgba(58,45,33,0)); }
  .leaf .face.b .gl { background: linear-gradient(270deg, rgba(58,45,33,.5), rgba(58,45,33,.08) 55%, rgba(58,45,33,0)); }

  .leaf.fwd  { animation: leaf-fwd  .72s cubic-bezier(.36,.06,.2,1) forwards; }
  .leaf.back { animation: leaf-back .72s cubic-bezier(.36,.06,.2,1) forwards; }
  .leaf.fwd  .face.f .gl { animation: gl-out .72s linear forwards; }
  .leaf.fwd  .face.b .gl { animation: gl-in  .72s linear forwards; }
  .leaf.back .face.b .gl { animation: gl-out .72s linear forwards; }
  .leaf.back .face.f .gl { animation: gl-in  .72s linear forwards; }

  @keyframes leaf-fwd  { from { transform: rotateY(0deg);    } to { transform: rotateY(-180deg); } }
  @keyframes leaf-back { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg);    } }
  @keyframes gl-out { from { opacity: 0; } to { opacity: 1; } }
  @keyframes gl-in  { from { opacity: 1; } to { opacity: 0; } }

  /* Zonas de clic al margen, como pasar la hoja con el dedo */
  .stage { cursor: default; }
  .stage.can-prev, .stage.can-next { cursor: pointer; }

  @media (prefers-reduced-motion: reduce) {
    .sheets { transition: none; }
    .leaf { display: none; }
  }

  /* Barra inferior: navegación */
  .bar {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex-wrap: wrap; max-width: calc(100vw - 24px);
    background: rgba(247,241,232,.93); backdrop-filter: blur(10px);
    border: 1px solid var(--crema-300); border-radius: 99px; padding: 6px 8px;
    box-shadow: 0 8px 24px rgba(58,45,33,.16);
  }
  .bar button {
    appearance: none; border: 0; background: none; cursor: pointer; border-radius: 99px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--crema-800);
    padding: 7px 11px; line-height: 1; white-space: nowrap;   /* que el texto no parta el botón */
    transition: background .15s ease, color .15s ease;
  }
  .bar #rv-view[aria-pressed="true"] { background: var(--terracota-50); color: var(--terracota-700); }
  .bar button:hover:not(:disabled) { background: var(--terracota-50); color: var(--terracota-700); }
  .bar button:disabled { opacity: .3; cursor: default; }
  .bar .count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--crema-700); padding: 0 6px; white-space: nowrap; }
  .bar .count b { color: var(--crema-950); }
  .bar .sep { width: 1px; height: 20px; background: var(--crema-300); margin: 0 3px; }

  /* Índice desplegable de páginas */
  .toc {
    position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%) translateY(6px); z-index: 19;
    width: min(440px, calc(100vw - 32px)); max-height: 52vh; overflow: auto;
    background: var(--white); border: 1px solid var(--crema-300); border-radius: 14px;
    box-shadow: 0 16px 44px rgba(58,45,33,.2); padding: 8px;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .toc.open { opacity: 1; visibility: visible; transform: translateX(-50%); transition-delay: 0s; }
  .toc a {
    display: flex; gap: 10px; align-items: baseline; text-decoration: none;
    padding: 8px 10px; border-radius: 9px; color: var(--crema-800); font-size: 13.5px;
  }
  .toc a:hover { background: var(--crema-50); }
  .toc a.on { background: var(--terracota-50); color: var(--terracota-800); font-weight: 700; }
  .toc a .n { font-size: 11px; font-weight: 800; color: var(--terracota-600); min-width: 18px; font-variant-numeric: tabular-nums; }

  /* Volver al portal */
  .back-portal {
    position: fixed; top: 14px; left: 14px; z-index: 20; text-decoration: none;
    background: rgba(247,241,232,.93); backdrop-filter: blur(10px);
    border: 1px solid var(--crema-300); border-radius: 99px; padding: 8px 14px;
    font-size: 12.5px; font-weight: 700; color: var(--crema-800);
    box-shadow: 0 6px 18px rgba(58,45,33,.12);
  }
  .back-portal:hover { color: var(--terracota-700); border-color: var(--terracota-300); }

  .hint { position: fixed; top: 16px; right: 16px; z-index: 20; font-size: 11.5px; color: var(--crema-600); }
  @media (max-width: 720px) { .hint { display: none; } .stage { padding: 56px 12px 66px; } }
}

/* ── Sólo impresión / PDF ──────────────────────────────────── */
@media print {
  @page { size: 215.9mm 279.4mm; margin: 0; }
  body { background: var(--white); }
  .stage { display: block; padding: 0; }
  .sheets { position: static; width: auto; height: auto; transform: none !important; }
  .pg { position: relative; left: auto !important; top: auto; width: auto !important;
        opacity: 1; visibility: visible; transform: none; box-shadow: none; break-after: page; }
  .leaf { display: none !important; }
  .pg:last-child { break-after: auto; }
  .bar, .toc, .back-portal, .hint { display: none !important; }
  .ph { background: none; box-shadow: none; color: inherit; }
}

/* ============================================================
   Componentes del Núm. 01 (Gaceta Informativa)
   Piezas editoriales que usa este número: cintillo corriente,
   fichas del Consejo, galerías con pie, bandas de cierre,
   bloques numerados, lista de proyectos y resaltado terracota.
   ============================================================ */

/* Cintillo corriente al alto de la página (va dentro del margen) */
.runhead {
  position: absolute; left: 0.75in; right: 0.75in; top: 0.40in;
  display: flex; justify-content: space-between; gap: 6mm;
  font-size: 7.5pt; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crema-500);
}
.runhead .r { color: var(--terracota-600); }
.pg.deep .runhead   { color: var(--crema-400); }
.pg.deep .runhead .r{ color: var(--terracota-300); }
.pg.deep .folio     { color: var(--crema-400); border-top-color: rgba(247,241,232,.22); }
.pg.deep .folio .n  { color: var(--terracota-300); }
.pg.deep .hl, .pg.deep .sec-t { color: var(--crema-50); }
.pg.deep .sec-t { border-bottom-color: rgba(247,241,232,.25); }
.pg.deep .lede  { color: var(--crema-200); }

/* Resaltado terracota — la frase que no debe perderse */
.mark { background: var(--terracota-500); color: var(--crema-50); padding: 0.4mm 1.4mm;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Figuras y galerías ─────────────────────────────────────── */
.fig { position: relative; margin: 0; break-inside: avoid; }
.fig img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2mm; }
.fig .ph-img { height: 100%; }
.fig figcaption { font-size: 7.5pt; line-height: 1.4; color: var(--crema-600); margin-top: 1.5mm; }
.pg.deep .fig figcaption { color: var(--crema-300); }

.gal { display: grid; gap: 4mm; margin: 4mm 0; }
.gal.c2 { grid-template-columns: repeat(2, 1fr); }
.gal.c3 { grid-template-columns: repeat(3, 1fr); }
.gal.c4 { grid-template-columns: repeat(4, 1fr); }
.gal .w2 { grid-column: span 2; }

/* Banda de cierre en café — el principio que queda del texto */
.band { background: var(--crema-800); color: var(--crema-100); border-radius: 2mm;
  padding: 5mm 6mm; margin: 5mm 0; break-inside: avoid; }
.band .lbl { display: block; font-size: 7.5pt; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--terracota-300); margin-bottom: 2.5mm; }
.band p { font-family: var(--font-serif); font-size: 12.5pt; line-height: 1.35;
  color: var(--crema-50); margin: 0 0 2.5mm; }
.band p.s { font-family: var(--font-sans); font-size: 9pt; line-height: 1.5; color: var(--crema-200); }
.band p:last-child { margin-bottom: 0; }
.band .mark { color: var(--crema-50); }
/* Variante clara, sobre página café o cuando la banda no debe pesar tanto */
.band.pale { background: var(--crema-50); color: var(--crema-800); border-top: 0.7mm solid var(--terracota-500); border-radius: 0; }
.band.pale .lbl { color: var(--terracota-600); }
.band.pale p { color: var(--crema-950); }
.band.pale p.s { color: var(--crema-700); }

/* Bloques numerados 01…04 ────────────────────────────────── */
.nbs { display: grid; gap: 5mm; margin: 5mm 0; break-inside: avoid; }
.nbs.c2 { grid-template-columns: repeat(2, 1fr); }
.nbs.c3 { grid-template-columns: repeat(3, 1fr); }
.nbs.c4 { grid-template-columns: repeat(4, 1fr); }
.nb { border-top: 0.6mm solid var(--terracota-500); padding-top: 3mm; }
.nb .n { font-size: 8pt; font-weight: 800; letter-spacing: .1em; color: var(--terracota-500);
  font-variant-numeric: tabular-nums; }
.nb h3 { font-family: var(--font-serif); font-weight: 500; font-size: 12.5pt; line-height: 1.15;
  color: var(--crema-950); margin: 1.5mm 0 2mm; }
.nb p { font-size: 8.5pt; line-height: 1.5; color: var(--crema-700); margin: 0; }
.pg.deep .nb h3 { color: var(--crema-50); }
.pg.deep .nb p  { color: var(--crema-200); }

/* Fichas del Consejo ─────────────────────────────────────── */
.members { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-top: 5mm; }
.member { background: var(--crema-50); border-top: 0.7mm solid var(--terracota-500);
  padding: 4.5mm 5mm; break-inside: avoid; }
.member .hd { display: flex; gap: 4mm; align-items: center; margin-bottom: 3mm; }
.member .hd img { width: 19mm; height: 19mm; border-radius: 99px; object-fit: cover; filter: grayscale(1); flex: none; }
.member .hd .ph-img { width: 19mm; height: 19mm; border-radius: 99px; padding: 2mm; flex: none; }
.member .nm { font-family: var(--font-serif); font-size: 12.5pt; line-height: 1.1; color: var(--crema-950); }
.member .rl { font-size: 7pt; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracota-600); margin: 1.8mm 0 1.2mm; }
.member .cr { font-size: 7.5pt; line-height: 1.35; color: var(--crema-600); }
.member .bd { border-top: 0.25mm solid var(--crema-200); padding-top: 3mm; }
.member p { font-size: 8.5pt; line-height: 1.5; color: var(--crema-800); margin: 0 0 2.5mm; }
.member .em { font-size: 8pt; color: var(--terracota-600); }

/* Proyectos: qué es, en qué va y qué falta ───────────────── */
.proj { display: grid; grid-template-columns: 8mm 1fr 48mm; gap: 5mm;
  padding: 3.2mm 0; border-bottom: 0.25mm solid var(--crema-200); break-inside: avoid; }
.proj .i { font-size: 9pt; font-weight: 800; color: var(--terracota-500); font-variant-numeric: tabular-nums; }
.proj h3 { font-family: var(--font-serif); font-weight: 500; font-size: 12.5pt;
  color: var(--crema-950); margin: 2mm 0 1.5mm; }
.proj p { font-size: 8.5pt; line-height: 1.45; color: var(--crema-700); margin: 0; }
.proj .lbl { display: block; font-size: 7pt; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terracota-600); margin-bottom: 1.5mm; }

/* Tarjeta de enlace — consúltalo en línea */
.linkbox { border-top: 0.6mm solid var(--terracota-500); border-bottom: 0.25mm solid var(--crema-200);
  padding: 4mm 0; margin: 5mm 0; break-inside: avoid; }
.linkbox .lbl { display: block; font-size: 7.5pt; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--terracota-600); margin-bottom: 2mm; }
.url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10pt;
  color: var(--terracota-700); word-break: break-all; }
.linkbox p { font-size: 8.5pt; line-height: 1.5; color: var(--crema-700); margin: 2mm 0 0; }

/* Lista con viñeta terracota */
ul.bul { margin: 0 0 4mm; padding: 0; list-style: none; }
ul.bul li { position: relative; padding-left: 5mm; margin-bottom: 2.5mm; font-size: 9.5pt; line-height: 1.5; }
ul.bul li::before { content: "•"; position: absolute; left: 0; color: var(--terracota-500); font-weight: 800; }

/* Cifra grande suelta (sin la caja de .stats) */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin: 5mm 0;
  border-top: 0.5mm solid var(--terracota-500); border-bottom: 0.25mm solid var(--crema-200);
  padding: 4mm 0; break-inside: avoid; }
.figs .v { font-family: var(--font-serif); font-size: 26pt; line-height: 1; color: var(--terracota-600); }
.figs .l { font-size: 8pt; line-height: 1.4; color: var(--crema-700); margin-top: 2mm; }

/* Portada e interiores a sangre ──────────────────────────── */
.cover { position: absolute; inset: 0; }
.cover .bg { position: absolute; inset: 0; }
.cover .bg .ph-img { height: 100%; border-radius: 0; border-width: 0.6mm; }
.scrim { position: absolute; inset: 0; }
.mast { font-family: var(--font-serif); font-weight: 500; font-size: 32pt; line-height: 1;
  color: var(--crema-950); letter-spacing: -.01em; }
.mast em { font-style: italic; color: var(--terracota-600); }
.toc-cover { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 6mm; }
.toc-cover .it { border-top: 0.25mm solid rgba(247,241,232,.28); padding: 3mm 0 2.5mm; }
.toc-cover .it .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8pt; color: var(--terracota-300); }
.toc-cover .it .t { font-family: var(--font-serif); font-size: 11pt; color: var(--crema-50); margin-top: 1.5mm; }

/* Variante compacta de la lista de proyectos (p. 17: seis proyectos en una hoja) */
.projs.tight .proj { padding: 2mm 0; grid-template-columns: 8mm 1fr 46mm; gap: 4mm; }
.projs.tight .proj h3 { font-size: 11.5pt; margin: 1.2mm 0 1mm; }
.projs.tight .proj p  { font-size: 8pt; line-height: 1.4; }

/* En una galería de filas fijas, el pie es parte de la celda: la foto cede
   el alto que necesita el texto en lugar de desbordarse sobre la fila siguiente. */
.fig { display: flex; flex-direction: column; }
.fig .ph-img,
.fig img { flex: 1 1 auto; min-height: 0; }

/* Fotos a sangre en portada y aperturas */
.cover .bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }

/* Enlaces dentro de una página: se ven como texto del número, no como botón web.
   Al imprimir quedan subrayados, que es como se lee una dirección en papel. */
.pg a { color: var(--terracota-700); text-decoration: none;
  box-shadow: inset 0 -0.3mm 0 var(--terracota-300); }
.pg a:hover { color: var(--terracota-800); box-shadow: inset 0 -0.5mm 0 var(--terracota-500); }
.pg.deep a { color: var(--terracota-200); box-shadow: inset 0 -0.3mm 0 rgba(211,148,111,.55); }
.pg.deep a:hover { color: var(--terracota-100); box-shadow: inset 0 -0.5mm 0 var(--terracota-300); }
@media print {
  .pg a { color: var(--terracota-700); box-shadow: none; text-decoration: underline; }
}

/* Enlace sobre fondo terracota (el aviso de la pág. 11): el color de texto
   normal no contrastaría contra el naranja. */
.pg a.on-terracota { color: var(--crema-50); box-shadow: inset 0 -0.3mm 0 rgba(247,241,232,.55); }
.pg a.on-terracota:hover { color: var(--white); box-shadow: inset 0 -0.5mm 0 var(--crema-100); }

/* "En pausa" no es un estado más: es la razón de ser de la página 17.
   Se distingue del resto de las etiquetas con el rojo de alerta de la paleta. */
.pill.pausa {
  background: var(--danger-600); color: var(--crema-50);
  font-size: 8pt; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 1.3mm 3mm;
}
.pill.pausa .b { letter-spacing: 0; margin-right: 1.2mm; opacity: .85; }

/* Enlaces dentro de una banda café: el color de texto normal no contrasta. */
.pg .band:not(.pale) a { color: var(--terracota-200); box-shadow: inset 0 -0.3mm 0 rgba(211,148,111,.5); }
.pg .band:not(.pale) a:hover { color: var(--crema-50); box-shadow: inset 0 -0.5mm 0 var(--crema-200); }