/* ═══════════════════════════════════════════════════════════════════════════════════════════
   La plana publica (spec 07 §3.4, §6). Se sirve en /estilo/plana.css, SIN hash, junto a
   gaceta.css: la edicion la enlaza con ?v=<DERROTERO_TAG>.

   Origen: la seccion de portada de mockups/15_plana.html y la plana de 17_plana-escritorio.html,
   sin lo del taller. Si esto y 06_estilo.md chocan, gana el documento.

   Nada de estilos en linea: la CSP es style-src 'self'.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* --- De la hoja de demostracion a la pagina --------------------------------------------------
   La hoja ES la pagina: ancho completo, sobre la mesa oscura. Mismo ajuste que app.css. */
body{padding:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.hoja{max-width:1240px;margin:0 auto;border:none;border-radius:0;min-height:100dvh;box-shadow:0 0 48px rgba(0,0,0,.5)}
.hoja .pant{height:auto;min-height:100dvh;overflow:visible}
.marca a{color:inherit;text-decoration:none}
/* Variante elegida para la columna de telegramas (G.1). Una sola linea si Alan elige otra. */
.plana{--lateral:310px;--lateral-cols:1}


/* ═══ La portada ═══════════════════════════════════════════════════════════════════════════
   Las noticias son la portada de la gaceta; los avisos van atras. Aqui la importancia NO se
   marca con colores ni etiquetas: se lee por el cuerpo de la letra, como entonces.

     alta  -> nota de apertura: titular grande y dos o tres bajadas apiladas, cada una mas
              chica que la anterior y separadas por filete. Es el "deck", y para eso se
              invento la grotesca condensada.
     media -> nota de columna: titular y entradilla.
     baja  -> telegrama: un renglon con la data en versalitas.

   Los seis temas son las rubricas de seccion. La fuente y la fecha van al inicio de cada nota
   como linea de data —"MEDIO DE TECNOLOGIA, 12 DE SEPTIEMBRE.—"— que es exactamente como se
   componia en los diarios del periodo, con la raya que arranca la entradilla. */
.rubrica{position:relative;margin:16px 0 10px;padding-bottom:9px;text-align:center;
  font:600 11.5px/1 var(--titular);letter-spacing:.3em;text-transform:uppercase;color:var(--oxido)}
.rubrica::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:16px;
  background:var(--filete-tinta) center/100% 100% no-repeat;opacity:.8}
.rubrica:first-child{margin-top:4px}

.nota{padding:4px 0 12px;text-align:center}
.nota + .nota{padding-top:12px;position:relative}
.nota + .nota::before{content:"";position:absolute;left:18%;right:18%;top:-6px;height:16px;
  background:var(--filete-tinta) center/100% 100% no-repeat;opacity:.55}
.data{margin:0 0 5px;padding:0 6px;font:400 11px/1.35 var(--lectura);letter-spacing:.09em;text-transform:uppercase;
  color:var(--tenue);text-shadow:0 1px 0 rgba(255,253,242,.6), 0 0 .5px rgba(31,26,18,.4)}

/* La apertura: el deck. */
.apertura h3{margin:0 0 6px;font:600 25px/1.02 var(--titular);text-transform:uppercase;letter-spacing:.005em;
  filter:url(#tinta-texto)}
.deck{margin:0;position:relative;padding:6px 14px 0}
.deck::before{content:"";position:absolute;left:30%;right:30%;top:-1px;height:16px;
  background:var(--filete-tinta) center/100% 100% no-repeat;opacity:.65}
.deck.d1{font:500 15px/1.2 var(--titular);text-transform:uppercase;letter-spacing:.05em;padding-top:8px}
.deck.d2{font:italic 400 13.5px/1.3 var(--lectura);color:#3A2E18}
.deck.d3{font:400 12px/1.3 var(--lectura);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.entradilla{margin:9px 12px 0;font:italic 400 13.5px/1.42 var(--lectura);color:#3A2E18;text-align:left;
  text-shadow:0 1px 0 rgba(255,253,242,.55), 0 0 .5px rgba(31,26,18,.35)}
.entradilla b{font-style:normal;font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px;color:var(--tenue)}
/* Primera letra en capitular chica, como abrian las notas largas. */
.apertura .entradilla::first-letter{font:400 30px/0.8 var(--display);float:left;margin:4px 5px 0 0;color:var(--tinta)}

/* Nota de columna. */
.columna h3{margin:0 0 4px;font:600 18px/1.1 var(--titular);text-transform:uppercase;letter-spacing:.005em;
  filter:url(#tinta-texto)}
.columna .entradilla{margin-top:6px;font-size:13px}

/* Telegramas: un renglon, la data corrida. */
.telegrama{margin:0;padding:6px 4px;text-align:left;font:400 13px/1.4 var(--lectura);color:#3A2E18;
  text-shadow:0 1px 0 rgba(255,253,242,.55), 0 0 .5px rgba(31,26,18,.35)}
.telegrama + .telegrama{border-top:1px solid rgba(156,135,89,.5);box-shadow:0 -1px 0 rgba(255,253,242,.4) inset}
.telegrama b{font-weight:400;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tenue)}

/* Dos acciones en vez de tres, y sin linea de corte: aqui no hay cupon que recortar, es la
   nota misma la que se recorta. */
.cupon.dos{margin-top:10px;padding:0 10%}
.cupon.dos button{padding:6px 2px 5px}

/* Leida: baja de tono y se queda, como el descartado de los avisos. */
.nota.leida h3,.nota.leida .entradilla,.nota.leida .data{opacity:.55}
.nota.leida .deck{opacity:.55}



/* ═══ Lo que se toma de las planas de referencia ═══════════════════════════════════════════
   periodicoviejo.webp (1920) y periodicoviejo2.jpg (1922). Su gramatica es la de 1880-1920
   sin cortes: cabecera con OREJAS, linea de FOLIO en celdas, GRABADO como apertura, cortes
   chicos abriendo notas laterales, CAJAS con filete doble y CINTAS para rotulos, PIE DE PLANA
   con cajitas, y tipografia mixta en la misma plana.

   Tres propuestas, cada una alrededor de un elemento estructural distinto. Las tres comparten
   orejas y folio, que son identidad de diario y no cuestan lectura.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* --- Cabecera con orejas y linea de folio (comun) ----------------------------------------- */
.plana-cabecera{display:grid;grid-template-columns:58px 1fr 58px;align-items:center;gap:4px;padding:10px 8px 0}
.plana-cabecera .gaceta{padding:4px 0 6px;border:none}
.plana-cabecera .gaceta::after{display:none}
.plana-cabecera .gaceta h2{font-size:31px}
.plana-cabecera .gaceta .bajada{font-size:12.5px}
.plana-cabecera .gaceta .bajada span{font-size:9px}
/* La oreja: cajita con filete a mano, versalitas condensadas. */
.oreja{position:relative;padding:8px 3px 7px;text-align:center;
  background:var(--marco-tinta) center/100% 100% no-repeat}
.oreja span{display:block;font:600 8.5px/1.15 var(--titular);letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,253,242,.6)}
.oreja em{display:block;margin-top:3px;font:italic 400 8px/1.1 var(--lectura);color:var(--tenue)}
/* El folio: celdas entre dos filetes a mano, como "RECEIVED BY TELEGRAPH · SUNDAY · 20 AUG". */
.folio{position:relative;display:flex;justify-content:center;margin:0 10px 6px;padding:7px 0 8px}
.folio::before,.folio::after{content:"";position:absolute;left:0;right:0;height:16px;
  background:var(--filete-doble-tinta) center/100% 100% no-repeat}
.folio::before{top:-6px}.folio::after{bottom:-7px;transform:scaleY(-1)}
.folio span{padding:0 8px;font:400 9.5px/1 var(--lectura);letter-spacing:.09em;white-space:nowrap;text-transform:uppercase;
  color:var(--tenue);text-shadow:0 1px 0 rgba(255,253,242,.6)}
.folio span + span{border-left:1px solid rgba(58,42,16,.55);box-shadow:-1px 0 0 rgba(255,253,242,.45)}

/* --- El grabado (P1) ---------------------------------------------------------------------- */
.grabado{position:relative;margin:4px 0 12px;padding:6px 6px 4px;
  background:var(--marco-tinta) center/100% 100% no-repeat}
.grabado canvas{display:block;width:100%;height:auto}
.grabado-svg{display:block;width:100%;height:auto;
  filter:url(#entintado) drop-shadow(0 1px 0 rgba(255,253,242,.55))}
.pie-grabado{margin:5px 0 2px;text-align:center;font:italic 400 11.5px var(--lectura);color:var(--tenue);
  text-shadow:0 1px 0 rgba(255,253,242,.55)}
.rubrica-corrida{margin:8px 0 4px;text-align:center;font:600 11px/1 var(--titular);letter-spacing:.3em;
  text-transform:uppercase;color:var(--oxido)}

/* --- Dos columnas (P2) -------------------------------------------------------------------- */
.banner{margin:2px 0 8px;text-align:center;font:600 24px/1.02 var(--titular);text-transform:uppercase;
  letter-spacing:.005em;filter:url(#tinta-texto)}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;position:relative}
/* El filete vertical entre columnas: a mano, como todo. */
.dos-col::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:16px;transform:translateX(-50%);
  background:var(--vert-tinta) center/100% 100% no-repeat;opacity:.85}
.dos-col .nota{text-align:left}
.dos-col .nota h3{font-size:15.5px;line-height:1.12;text-align:left}
.dos-col .entradilla{margin:4px 0 0;font-size:12px;line-height:1.38}
.dos-col .data{font-size:9.5px;letter-spacing:.07em;text-align:left;padding:0}
.dos-col .deck.d1{font-size:12.5px;padding:5px 0 0;text-align:left;letter-spacing:.04em}
.dos-col .deck::before{display:none}
.dos-col .rubrica{margin:6px 0 6px;font-size:10px}
.dos-col .telegrama{font-size:11.5px;padding:5px 0}
.dos-col .nota + .nota::before{left:0;right:0}
.corte-chico{float:left;width:38px;height:38px;margin:2px 6px 0 0;
  filter:url(#entintado) drop-shadow(0 1px 0 rgba(255,253,242,.55))}
.cupon.dos.chico{padding:0;margin-top:7px;gap:5px}
.cupon.dos.chico button{padding:4px 1px 3px;font-size:9px;letter-spacing:.08em;gap:2px}
.cupon.dos.chico .hue-svg{width:11px;height:11px}

/* --- Cajas y cintas (P3) ------------------------------------------------------------------ */
.caja{padding-top:22px}
.caja h3{margin:0 0 4px;font:600 18px/1.1 var(--titular);text-transform:uppercase;filter:url(#tinta-texto)}
.apertura-caja h3{font-size:23px;line-height:1.02;position:relative}
.apertura-caja .deck.d1{position:relative}
/* La cinta: montada sobre el filete superior de la caja, con las puntas dobladas. */
.cinta{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:172px;height:26px;
  display:grid;place-items:center;filter:drop-shadow(0 1px 0 rgba(255,253,242,.6)) drop-shadow(0 -.5px .6px rgba(52,38,14,.4))}
.cinta svg{position:absolute;inset:0;width:100%;height:100%}
.cinta b{position:relative;font:600 9.5px/1 var(--titular);letter-spacing:.26em;text-transform:uppercase;color:var(--oxido);
  text-shadow:0 1px 0 rgba(255,253,242,.6)}
/* Rayos de sol detras del titular de apertura, tramados como en la referencia. */
.sol{position:absolute;left:8px;right:8px;top:18px;height:80px;pointer-events:none;overflow:hidden}
.sol svg{width:100%;height:100%;filter:url(#entintado)}
.apertura-caja .entradilla{position:relative}
/* Pie de plana: dos cajitas chicas con filete, como la banda inferior de la referencia. */
.pie-plana{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.cajita{position:relative;padding:12px 10px 10px;text-align:center;
  background:var(--marco-tinta) center/100% 100% no-repeat}
.cajita b{display:block;font:600 10px/1 var(--titular);letter-spacing:.24em;text-transform:uppercase;color:var(--oxido);margin-bottom:5px}
.cajita p{margin:0;font:400 11.5px/1.35 var(--lectura);color:#3A2E18;text-shadow:0 1px 0 rgba(255,253,242,.5)}



/* ═══ La plana hibrida ════════════════════════════════════════════════════════════════════
   Alan pidio combinar: el grabado de la 1, las columnas de la 2, y las cajas de la 3 para
   algunas notas. Es, de hecho, como se componia una plana de verdad, y se puede escribir
   como regla para que la fase E la aplique sola con los datos de `Documento`:

     1. GRABADO arriba, siempre: la ilustracion del dia (o la animacion de la fase E).
     2. La nota ALTA de mayor peso -> TITULAR A TODA PLANA + deck y entradilla en la
        columna izquierda.
     3. Las notas MEDIA -> columna derecha, en orden. La primera abre con corte chico. Si su
        tema difiere del de la apertura, va EN CAJA con cinta: la caja marca cambio de tema.
     4. Las notas BAJA -> telegramas bajo la apertura; las que no quepan, al PIE DE PLANA en
        cajitas, a toda anchura.

   La caja estrecha es la misma de los avisos, con cinta angosta y fleurones mas chicos. */
.caja.angosta{padding:20px 9px 9px;margin-bottom:12px;text-align:left}
.caja.angosta h3{font-size:14.5px;line-height:1.12;text-align:left;margin:0 0 3px}
.caja.angosta .data{text-align:left;font-size:9.5px;padding:0}
.caja.angosta .entradilla{margin:4px 0 0;font-size:11.5px;line-height:1.36}
.caja.angosta .esquina{transform-origin:center}
.caja.angosta .esquina.ai{top:5px;left:5px}.caja.angosta .esquina.ad{top:5px;right:5px}
.caja.angosta .esquina.bi{bottom:5px;left:5px}.caja.angosta .esquina.bd{bottom:5px;right:5px}
.caja.angosta .corte-chico{width:30px;height:30px;margin:1px 5px 0 0}
.cinta.angosta{width:118px;height:22px;top:-11px}
.cinta.angosta b{font-size:8.5px;letter-spacing:.2em}
.dos-col .cupon.dos.chico{padding:0}
.pie-plana{margin-top:12px}

/* --- La plana ------------------------------------------------------------------------------ */
.plana{container-type:inline-size;min-height:100%}
.plana a{color:inherit;text-decoration:none}
.plana a:hover .tt, .plana a:focus-visible .tt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.plana a:focus-visible{outline:1.5px dashed var(--oxido);outline-offset:3px}

.cab{display:grid;grid-template-columns:58px 1fr 58px;align-items:center;gap:4px;padding:12px 22px 0 10px}
.marca{text-align:center;padding:2px 0 4px}
.marca h1{margin:0;font:400 29px/.9 var(--display);letter-spacing:.03em;text-transform:uppercase;filter:url(#tinta-texto)}
.marca p{margin:5px 0 0;font:italic 400 10.5px/1.25 var(--lectura);color:var(--tenue);
  text-shadow:0 1px 0 rgba(255,253,242,.6)}
.oreja.entrar span{color:var(--oxido)}

.tronco{padding:4px 22px 18px 14px}
.grabado{margin:6px 0 12px}
.grabado canvas{width:100%}

/* Apertura. En telefono es la nota de la izquierda de dos-col; en escritorio toma su banda. */
.apertura .firma{margin:8px 0 0;font:italic 400 11px var(--lectura);color:var(--tenue);text-align:left;
  text-shadow:0 1px 0 rgba(255,253,242,.55)}
.apertura .cuerpo-nota{display:none}
.leer{display:inline-block;margin-top:8px;font:600 10px/1 var(--titular);letter-spacing:.18em;text-transform:uppercase;color:var(--oxido);
  text-shadow:0 1px 0 rgba(255,253,242,.6)}

/* Telegramas: titular ajeno. Rubrica de tema en versalitas, titular, fuente y un obelo que
   dice "esto lleva fuera". Nada mas. */
.telegramas .rubrica:first-child{margin-top:2px}
.tg{display:block;padding:7px 2px 7px;text-align:left;position:relative}
.tg + .tg::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;
  background:var(--filete-tinta) center/100% 100% no-repeat;opacity:.45}
.tg b{display:block;margin-bottom:2px;font:400 9.5px/1 var(--lectura);letter-spacing:.13em;text-transform:uppercase;color:var(--tenue)}
.tg .tt{font:400 13px/1.34 var(--lectura);color:#2C2416;text-shadow:0 1px 0 rgba(255,253,242,.55),0 0 .5px rgba(31,26,18,.35)}
.tg i{display:block;margin-top:3px;font:italic 400 11px/1.2 var(--lectura);color:var(--tenue)}
.tg i svg{width:10px;height:10px;vertical-align:-1px;margin-left:3px}
.telegramas .pie-tg{margin:10px 0 0;font:italic 400 11px/1.35 var(--lectura);color:var(--tenue);text-align:center}

/* Tendencias como muestrario de tipos: la cifra manda el cuerpo de la letra, como en el
   catalogo de una fundicion, con puntos guia hasta el conteo. */
.muestrario{position:relative;margin:14px 0 4px;padding:16px 14px 20px;background:var(--marco-tinta) center/100% 100% no-repeat}
.muestrario .cinta{top:-12px}
.leyenda{margin:4px 0 10px;text-align:center;font:italic 400 11.5px/1.3 var(--lectura);color:var(--tenue)}
.tipo{display:flex;align-items:baseline;gap:6px;margin:0;line-height:1.02}
.tipo .nom{font-family:var(--titular);font-weight:600;text-transform:uppercase;letter-spacing:.01em;filter:url(#tinta-texto);white-space:nowrap}
.tipo .guia{flex:1;border-bottom:1.5px dotted rgba(58,42,16,.5);transform:translateY(-4px);min-width:12px}
.tipo .cif{font:700 13px var(--lectura);font-variant-numeric:oldstyle-nums tabular-nums;color:#262E1C;text-shadow:0 1px 0 rgba(255,253,242,.6)}
.tipo .cif em{font:italic 400 11px var(--lectura);color:var(--oxido);margin-left:5px}
.t1 .nom{font-size:34px}.t2 .nom{font-size:28px}.t3 .nom{font-size:24px}.t4 .nom{font-size:20px}
.t5 .nom{font-size:17px}.t6 .nom{font-size:15px}.t7 .nom{font-size:14px}.t8 .nom{font-size:13px;font-weight:500}
.reparto{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin:12px 0 2px;padding-top:10px;position:relative;
  font:400 11.5px/1.3 var(--lectura);letter-spacing:.08em;text-transform:uppercase;color:#3A2E18}
.reparto::before{content:"";position:absolute;left:12%;right:12%;top:-4px;height:12px;background:var(--filete-tinta) center/100% 100% no-repeat;opacity:.6}
.reparto b{font-weight:700;font-variant-numeric:oldstyle-nums}
.semanas-bloque{margin-top:10px}
.semanas{display:block;width:100%;height:40px}
.semanas-pie{display:grid;grid-template-columns:repeat(5,1fr);margin:3px 0 0;text-align:center;
  font:400 9.5px/1.2 var(--lectura);letter-spacing:.04em;color:var(--tenue);text-shadow:0 1px 0 rgba(255,253,242,.55)}
.semanas-pie b{font-weight:700;color:#262E1C;font-variant-numeric:oldstyle-nums}

.pie{position:relative;margin:16px 0 0;padding:12px 4px 4px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;
  font:400 10.5px/1.3 var(--lectura);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);text-shadow:0 1px 0 rgba(255,253,242,.55)}
.pie::before{content:"";position:absolute;left:0;right:0;top:-4px;height:16px;background:var(--filete-doble-tinta) center/100% 100% no-repeat}
.pie a{color:var(--oxido)}

/* Telefono: la plana hibrida de 15. Telegramas debajo de las dos columnas. */
.cuadricula{display:block}
.telegramas{margin-top:12px}

/* ═══ Escritorio: la plana a partir de 900 px de ancho ═══════════════════════════════════ */
@container (min-width: 900px){
  .cab{grid-template-columns:120px 1fr 120px;padding:18px 64px 0 26px}
  .oreja{padding:12px 6px 10px}
  .oreja span{font-size:10.5px}.oreja em{font-size:10px}
  .marca h1{font-size:76px;letter-spacing:.05em}
  .marca p{font-size:14px;letter-spacing:.03em}
  .folio{margin:0 64px 8px 26px}
  .folio span{font-size:11px;padding:0 14px}
  .tronco{padding:6px 64px 30px 26px}
  .grabado{margin:8px 0 16px;padding:8px 8px 5px}

  /* Dos pistas: lo del editor y los telegramas. La lateral mide lo que dice la variante. */
  .cuadricula{display:grid;grid-template-columns:1fr var(--lateral,310px);gap:0 26px;position:relative}
  .cuadricula::before{content:"";position:absolute;top:0;bottom:0;right:calc(var(--lateral,310px) + 5px);width:16px;
    background:var(--vert-tinta) center/100% 100% no-repeat;opacity:.85}
  .telegramas{margin-top:0}
  .telegramas .lista{column-count:var(--lateral-cols,1);column-gap:22px;column-rule:1px solid rgba(58,42,16,.28)}
  .tg{break-inside:avoid}
  .telegramas .rubrica{font-size:12px}

  /* La apertura: titular a todo lo ancho de su pista, deck y cuerpo a dos columnas. */
  .banner{font-size:40px;line-height:1;margin:0 0 10px}
  .dos-col{display:block}
  .dos-col::before{display:none}
  .dos-col > .col:first-child{position:relative;padding-bottom:14px;margin-bottom:10px}
  .dos-col > .col:first-child::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:16px;
    background:var(--filete-doble-tinta) center/100% 100% no-repeat}
  .apertura{text-align:left}
  .apertura .data{font-size:11px}
  .apertura .deck.d1{font-size:16px}
  .apertura .entradilla{font-size:15px;line-height:1.5}
  .apertura .cuerpo-nota{display:block;column-count:2;column-gap:26px;column-rule:1px solid rgba(58,42,16,.28);margin-top:10px}
  .apertura .cuerpo-nota p{margin:0 0 9px;font:400 14px/1.55 var(--lectura);color:#2C2416;text-align:justify;hyphens:auto;
    text-shadow:0 1px 0 rgba(255,253,242,.5)}
  .apertura .entradilla::first-letter{font-size:52px;margin:6px 8px 0 0}
  .apertura .leer{display:none}

  /* Las notas al centro: tres en fila bajo la apertura, separadas por filete vertical. */
  .dos-col > .col:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px;position:relative}
  .dos-col > .col:last-child > *{margin:0}
  .dos-col .caja.angosta{padding:24px 12px 12px}
  .dos-col .nota + .nota::before{display:none}
  .dos-col .nota h3,.dos-col .caja.angosta h3{font-size:18px}
  .dos-col .entradilla,.caja.angosta .entradilla{font-size:13px}

  .muestrario{margin-top:22px;padding:20px 22px 16px}
  .muestrario .tipos{column-count:2;column-gap:34px}
  .tipo{break-inside:avoid;margin-bottom:2px}
  .t1 .nom{font-size:46px}.t2 .nom{font-size:38px}.t3 .nom{font-size:32px}.t4 .nom{font-size:27px}
  .t5 .nom{font-size:22px}.t6 .nom{font-size:19px}.t7 .nom{font-size:17px}.t8 .nom{font-size:15px}
  .semanas{height:54px}
  .semanas-pie{font-size:11px}

  .pie{margin:22px 0 0;font-size:11.5px}
}



/* --- Paginas de una sola pieza: tendencias, nota, 404 --------------------------------------- */
.principal.sola{max-width:760px;margin:0 auto}
.explica-datos{margin:14px 6px 0;font:italic 400 13px/1.5 var(--lectura);color:#3A2E18;text-shadow:0 1px 0 rgba(255,253,242,.55)}
.explica-datos a{color:var(--oxido)}
.nota-sola .cuerpo-nota{display:block}
.nota-sola .cuerpo-nota p{margin:0 0 10px;font:400 15px/1.6 var(--lectura);color:#2C2416;text-align:left}
.reparto i{font:italic 400 10px var(--lectura);text-transform:none;letter-spacing:0;color:var(--oxido)}

.principal{display:flex;flex-direction:column}