/* Blogcito — layout 20px.
   App: fondo liso DAR-1. EDI: fondo liso. */

:root {
  --grilla: 20px;
  --fondo: #262522; /* DAR-1 */
  --lai1: #f7f3e9; /* LAI-1 */
  --clara4: #e1d2ad; /* CLARA 4 */
  --papel: var(--fondo);
  --tinta: var(--clara4);
  --suave: rgba(225, 210, 173, 0.55);
  --linea: rgba(225, 210, 173, 0.16);
  --acento: var(--clara4);
  --ok: #41eb0a;
  --vidrio: rgba(225, 210, 173, 0.08);
  --tipo: Georgia, "Times New Roman", Times, serif;
  --sans: Georgia, "Times New Roman", Times, serif;
  --mono: Georgia, "Times New Roman", Times, serif;
  --texto: 10px;
  --interlinea: 20px;
  --etiq: 13px;
  --etiq-lh: 18px;
  --etiq-pad: 1px;
  --tile: 10px;
  --aire: calc(var(--grilla) * 4);
  --marco: 10px;
  --hit: 40px;
  --caja: rgba(128, 128, 128, 0.32);
  --caja-hover: rgba(128, 128, 128, 0.48);
  --medida: min(calc(var(--grilla) * 40), calc(100% - 2 * var(--aire)));
  --nav-v: calc(var(--grilla) * 10);
}

* {
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  font: inherit;
  margin: 0;
  border-radius: 0;
}

html {
  background-color: var(--fondo);
  color: var(--tinta);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

body.blog {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
  background: var(--fondo);
}

a {
  color: inherit;
  text-underline-offset: 4px;
}

.blog-shell {
  min-height: 100dvh;
  display: grid;
  gap: 0;
  align-items: stretch;
}

.blog-shell-intro {
  grid-template-columns: 1fr;
}

.blog-shell-mitades {
  grid-template-columns: 1fr 1fr;
}

.blog-shell-edi-min {
  grid-template-columns: var(--hit) minmax(0, 1fr);
}

.blog-intro,
.blog-intro-mitad {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--grilla);
  background: var(--fondo);
}

.blog-intro-btn {
  appearance: none;
  box-sizing: border-box;
  width: var(--hit);
  height: var(--hit);
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.blog-intro-btn:hover {
  background: var(--caja-hover);
}

.blog-cuerpo {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--marco);
  position: relative;
  isolation: isolate;
  background: var(--fondo);
}

.blog-cuerpo > * {
  position: relative;
  z-index: 1;
}

.blog-fila1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: calc(-1 * var(--marco)) 0 var(--grilla) calc(-1 * var(--marco));
  width: calc(100% + var(--marco));
  padding: 0;
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.blog-fila1-tope {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: var(--hit);
  box-shadow: inset 0 -1px 0 var(--lai1);
}

.blog-marca-der {
  margin-left: auto;
}

.blog-cuenta {
  width: 100%;
}

.blog-cuenta-fila {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: var(--hit);
  width: 100%;
  box-shadow: inset 0 -1px 0 var(--lai1);
}

.blog-cuenta-titulo {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: var(--hit);
}

.blog-cuenta-anon {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: var(--hit);
}

.blog-cuenta-anon .blog-cuenta-ico {
  opacity: 0;
}

.blog-cuenta-anon:hover,
.blog-cuenta-anon:focus-within {
  background: var(--caja-hover);
}

.blog-cuenta-anon:hover .blog-cuenta-ico,
.blog-cuenta-anon:focus-within .blog-cuenta-ico {
  opacity: 1;
}

.blog-cuenta-anon:hover .blog-cuenta-hit,
.blog-cuenta-anon:focus-within .blog-cuenta-hit {
  background: transparent;
}

.blog-cuenta-hit,
.blog-cuenta-ico {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: var(--hit);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}

.blog-cuenta-hit:hover,
.blog-cuenta-ico:hover,
.blog-cuenta-google:hover {
  background: var(--caja-hover);
}

.blog-cuenta-hit:disabled {
  color: var(--suave);
  cursor: default;
}

.blog-cuenta-hit.es-lista:not(:disabled) {
  color: var(--tinta);
  background: var(--caja);
}

.blog-cuenta-hit.es-lista:not(:disabled):hover {
  background: var(--caja-hover);
}

.blog-cuenta-ventana,
.blog-cuenta-ingreso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-height: var(--hit);
}

.blog-cuenta-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  min-height: 20px;
}

.blog-cuenta-in {
  box-sizing: border-box;
  width: 200px;
  height: 20px;
  margin: 0;
  padding: 0 5px;
  border: 0;
  background: var(--caja);
  color: var(--tinta);
  font-family: "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.02em;
}

.blog-cuenta-cod {
  width: 80px;
}

.blog-cuenta-in:focus {
  outline: none;
  background: var(--caja-hover);
}

.blog-cuenta-punto {
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  line-height: var(--etiq-lh);
  padding: 0 2px;
}

.blog-cuenta-ok {
  padding: 0 5px;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  line-height: var(--etiq-lh);
  color: var(--ok);
}

.blog-cuenta-google {
  height: var(--hit);
}

.blog-hit {
  box-sizing: border-box;
  flex: 0 0 var(--hit);
  width: var(--hit);
  height: var(--hit);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.blog-migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-height: var(--hit);
  height: var(--hit);
  color: var(--suave);
  box-shadow: inset 0 -1px 0 var(--lai1);
}

.blog-miga {
  display: inline;
}

.blog-migas-tex {
  box-sizing: border-box;
  height: var(--hit);
  padding: 11px 2px;
  display: flex;
  align-items: flex-start;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: inherit;
  background: transparent;
  white-space: nowrap;
}

.blog-miga-sep {
  margin: 0 0.35em;
  color: var(--suave);
}

.blog-miga a {
  text-decoration: none;
  color: var(--suave);
}

.blog-miga a:hover {
  color: var(--tinta);
}

.blog-superficie {
  background: var(--vidrio);
  box-shadow: 0 0 0 1px var(--linea);
  padding: var(--grilla);
}

.blog-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grilla);
  padding: 0 0 var(--grilla);
  width: 100%;
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.blog-top-aire {
  max-width: none;
  margin: 0;
  padding: 0 0 var(--grilla);
}

.blog-marca {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: var(--hit);
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.blog-marca:hover {
  background: var(--caja-hover);
}

.blog-puerta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-height: 20px;
  margin: 0;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--tinta);
}

.blog-puerta-mail {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 20px;
  margin: 0;
}

.blog-puerta-in {
  box-sizing: border-box;
  width: 200px;
  height: 20px;
  padding: 0 2px;
  border: 0;
  background: var(--caja);
  color: var(--tinta);
  font-family: "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.blog-puerta-cod {
  width: 80px;
}

.blog-puerta-in::placeholder {
  color: var(--suave);
}

.blog-puerta-in:focus {
  outline: none;
  background: var(--caja-hover);
}

.blog-puerta-btn {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: 20px;
  font: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--suave);
  text-decoration: none;
}

.blog-puerta-btn:hover,
.blog-puerta-google:hover {
  color: var(--tinta);
  background: var(--caja-hover);
}

.blog-puerta-google {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: 20px;
  text-decoration: none;
  color: var(--suave);
  background: transparent;
}

.blog-puerta-msg {
  padding: 0 2px;
  color: var(--suave);
  white-space: nowrap;
}

.blog-marca-iso {
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-marca-iso img,
.blog-marca-iso .iso-surtido {
  display: block;
  width: 16px;
  height: 16px;
}

.blog-marca-tex {
  box-sizing: border-box;
  height: var(--hit);
  padding: 11px 2px;
  display: flex;
  align-items: flex-start;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tinta);
  background: transparent;
  white-space: nowrap;
}

.blog-nav {
  display: flex;
  gap: var(--grilla);
  align-items: center;
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
  font-weight: 400;
}

.blog-nav-h {
  flex-wrap: wrap;
  margin: 0 0 var(--grilla);
  padding: 0;
  box-shadow: inset 0 -1px 0 var(--lai1);
}

.blog-nav a {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: 20px;
  text-decoration: none;
  color: var(--suave);
  background: transparent;
}

.blog-nav a:hover {
  color: var(--tinta);
  opacity: 1;
  background: var(--caja-hover);
}

.blog-nav a.blog-nav-activo {
  color: var(--tinta);
  text-decoration: none;
}

.blog-nav-iso {
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.iso-surtido {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: normal;
}

.blog-nav-iso .iso-surtido {
  width: 16px;
  height: 16px;
}

.blog-nav-tex {
  box-sizing: border-box;
  height: 20px;
  padding: var(--etiq-pad) 2px;
  display: flex;
  align-items: flex-start;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: inherit;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
}

.blog-nav-form {
  display: inline;
  margin: 0;
}

.blog-nav button {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: 20px;
  font: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--suave);
  text-decoration: none;
}

.blog-nav button:hover {
  color: var(--tinta);
  background: var(--caja-hover);
}

.blog-nav-hasta {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 var(--grilla);
  box-shadow: inset 0 -1px 0 var(--lai1);
}

.blog-nav-hasta:empty {
  display: none;
  margin: 0;
}

.blog-fila3 {
  display: grid;
  grid-template-columns: var(--nav-v) minmax(0, 1fr);
  gap: var(--grilla);
  align-items: start;
  flex: 1;
  min-height: 0;
}

.blog-nav-v {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.blog-nav-v a,
.blog-nav-v button {
  display: flex;
}

.blog-cosa {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.blog-edi {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: 100dvh;
  position: sticky;
  top: 0;
  overflow: auto;
  padding: 0;
  background: var(--fondo);
  box-shadow: 1px 0 0 var(--linea);
}

.blog-shell-mitades .blog-intro-mitad {
  min-height: 0;
  height: 100%;
}

.blog-edi-toggle {
  appearance: none;
  box-sizing: border-box;
  width: var(--hit);
  height: var(--hit);
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.blog-edi-toggle:hover {
  background: var(--caja-hover);
  color: var(--clara4);
}

.blog-edi-cuerpo {
  min-width: 0;
}

.blog-edi-titulo {
  margin: 0;
  padding: 0 var(--marco);
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  color: var(--tinta);
}

.blog-edi-titulo span {
  display: block;
  box-sizing: border-box;
  height: 20px;
  padding: var(--etiq-pad) 0;
  overflow: hidden;
  white-space: nowrap;
}

.blog-edi-arbol {
  min-width: 0;
  padding: var(--marco);
}

.blog-edi-arbol .blog-arbol {
  margin: 0;
  padding: 0;
}

.blog-edi-arbol .blog-arbol .blog-arbol {
  padding-left: var(--grilla);
}

.blog-arbol-dir,
.blog-arbol-file {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 20px;
  padding: 1px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--suave);
  background: transparent;
}

@media (hover: none) {
  .blog-cuenta-anon .blog-cuenta-ico {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .blog-cuenta-ingreso,
  .blog-cuenta-ventana {
    flex-basis: 100%;
  }

  .blog-cuenta-form {
    flex-wrap: wrap;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .blog-cuenta-in {
    width: 100%;
    max-width: 280px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
  }

  .perfil-lados {
    grid-template-columns: 1fr;
  }

  .blog-shell-mitades {
    grid-template-columns: 1fr;
    grid-template-rows: 50dvh 50dvh;
  }

  .blog-shell-edi-min {
    grid-template-columns: 1fr;
    grid-template-rows: var(--hit) minmax(0, 1fr);
  }

  .blog-edi {
    height: auto;
    min-height: 0;
    position: relative;
    padding: 0;
  }

  .blog-fila3 {
    grid-template-columns: 1fr;
  }

  .blog-nav-v {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--grilla);
    padding: 0 0 var(--grilla);
    box-shadow: inset 0 -1px 0 var(--lai1);
  }
}

.blog-hero {
  margin: 0 0 var(--grilla);
}

.blog-hero h1 {
  font-family: var(--tipo);
  font-weight: 700;
  font-size: var(--texto);
  line-height: var(--interlinea);
  letter-spacing: 0;
  text-transform: lowercase;
  margin: 0;
}

.blog-hero p {
  margin: var(--grilla) 0 0;
  color: var(--suave);
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
  max-width: none;
}

.blog-inicio-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grilla);
}

.blog-inicio-links a {
  text-decoration: none;
}

.cartas-controles {
  margin: 0 0 var(--grilla);
}

.cartas-controles-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grilla);
  margin: 0 0 var(--grilla);
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.cartas-controles-fila a {
  display: flex;
  align-items: stretch;
  height: 20px;
  text-decoration: none;
  background: transparent;
}

.cartas-controles-fila a:hover {
  background: var(--caja-hover);
}

.cartas-activo {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cartas-lista-lineas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cartas-lista-lineas li {
  margin: 0 0 var(--grilla);
}

.cartas-lista-lineas a {
  text-decoration: none;
}

.cartas-tabla {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.cartas-tabla th,
.cartas-tabla td {
  padding: 0 var(--grilla) var(--grilla) 0;
  font-weight: 400;
  vertical-align: baseline;
}

.cartas-tabla th {
  font-family: var(--sans);
  color: var(--suave);
}

.cartas-tabla a {
  text-decoration: none;
}

.cartas-tablero {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: var(--grilla);
  overflow-x: auto;
}

.cartas-tablero li {
  flex: 0 0 calc(var(--grilla) * 20);
  margin: 0;
}

.cartas-tablero-nota {
  max-height: calc(var(--grilla) * 16);
  overflow: hidden;
}

.blog-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grilla);
}

.blog-lista li {
  border: none;
  padding: 0;
  margin: 0;
}

.blog-nota {
  background: var(--vidrio);
  box-shadow: 0 0 0 1px var(--linea);
  padding: var(--grilla);
}

.blog-lista h2 {
  font-family: var(--tipo);
  font-size: var(--texto);
  font-weight: 700;
  margin: 0 0 var(--grilla);
  line-height: var(--interlinea);
}

.blog-lista h2 a {
  text-decoration: none;
}

.blog-meta {
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
  color: var(--suave);
  letter-spacing: 0;
  margin: 0 0 var(--grilla);
}

.blog-arbol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-arbol li {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.blog-extracto {
  margin: 0;
  color: var(--suave);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.blog-vacio {
  color: var(--suave);
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.nodo-teclas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 var(--grilla);
  padding: 0;
}

.nodo-teclas li {
  margin: 0;
  min-height: var(--interlinea);
}

.nodo-tecla {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--suave);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nodo-tecla:hover {
  color: var(--tinta);
}

.nodo-tecla-on {
  color: var(--tinta);
  font-weight: 700;
}

.nodo-cara-titulo {
  font-family: var(--tipo);
  font-size: var(--texto);
  font-weight: 700;
  line-height: var(--interlinea);
  margin: 0 0 var(--grilla);
}

.nodo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nodo-lista li {
  min-height: var(--interlinea);
  margin: 0 0 var(--grilla);
}

.nodo-tiempo {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--grilla);
  border-left: 1px solid var(--linea);
}

.nodo-tiempo li {
  display: flex;
  gap: var(--grilla);
  margin: 0 0 var(--grilla);
  min-height: var(--interlinea);
  position: relative;
}

.nodo-tiempo-marca {
  position: absolute;
  left: calc(var(--grilla) * -1 - 2px);
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--tinta);
}

.nodo-imagenes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nodo-imagenes li {
  margin: 0 0 var(--grilla);
}

.nodo-imagenes img {
  max-width: 100%;
  height: auto;
  display: block;
}

.blog-post-cabeza {
  margin: 0 0 var(--grilla);
}

.blog-post-cabeza h1 {
  font-family: var(--tipo);
  font-size: var(--texto);
  font-weight: 700;
  line-height: var(--interlinea);
  letter-spacing: 0;
  margin: 0 0 var(--grilla);
}

.blog-prosa {
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.blog-prosa img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--grilla) 0;
}

.blog-prosa > *:first-child {
  margin-top: 0;
}

.blog-prosa > *:last-child {
  margin-bottom: 0;
}

.blog-prosa h1,
.blog-prosa h2,
.blog-prosa h3,
.blog-prosa h4 {
  font-family: var(--tipo);
  font-size: var(--texto);
  font-weight: 700;
  line-height: var(--interlinea);
  margin: var(--grilla) 0;
}

.blog-prosa p {
  margin: 0 0 var(--grilla);
}

.blog-prosa br + br {
  display: none;
}

.blog-prosa ul,
.blog-prosa ol {
  padding-left: calc(var(--grilla) * 2);
  margin: 0 0 var(--grilla);
}

.blog-prosa li {
  margin: 0;
}

.blog-prosa pre,
.blog-prosa code {
  font-family: var(--mono);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.blog-prosa pre {
  overflow: auto;
  padding: var(--grilla);
  background: var(--vidrio);
  box-shadow: 0 0 0 1px var(--linea);
  margin: 0 0 var(--grilla);
}

.blog-prosa blockquote {
  margin: 0 0 var(--grilla);
  padding-left: var(--grilla);
  box-shadow: inset 2px 0 0 var(--linea);
  color: var(--suave);
}

.blog-pie {
  margin-top: var(--grilla);
  padding-top: var(--grilla);
  box-shadow: 0 -1px 0 var(--linea);
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

/* Admin / escribir */

.ed-lista-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grilla);
  margin: var(--grilla) 0 calc(var(--grilla) * 2);
}

.ed-lista-cabeza h1 {
  font-size: var(--texto);
  line-height: var(--interlinea);
  font-weight: 700;
  margin: 0;
}

.ed-btn {
  font-family: var(--sans);
  font-size: var(--texto);
  line-height: var(--interlinea);
  letter-spacing: 0.03em;
  border: none;
  border-radius: 0;
  appearance: none;
  background: var(--tinta);
  color: var(--papel);
  padding: calc(var(--grilla) / 2) var(--grilla);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  min-height: calc(var(--grilla) * 2);
}

.ed-btn:hover {
  opacity: 0.85;
}

.ed-btn-sec {
  background: var(--vidrio);
  color: var(--tinta);
  box-shadow: 0 0 0 1px var(--tinta);
}

.ed-docs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ed-docs li {
  box-shadow: 0 -1px 0 var(--linea);
  padding: var(--grilla) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--grilla);
  align-items: baseline;
  font-family: var(--sans);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.ed-docs li:last-child {
  box-shadow: 0 -1px 0 var(--linea), 0 1px 0 var(--linea);
}

.ed-docs a {
  text-decoration: none;
  font-weight: 700;
}

.ed-estado {
  font-size: var(--texto);
  line-height: var(--interlinea);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suave);
}

.ed-estado-pub {
  color: var(--ok);
}

.ed-aviso {
  font-family: var(--sans);
  font-size: var(--texto);
  line-height: var(--interlinea);
  color: var(--suave);
  margin: calc(var(--grilla) * 2) 0;
}

.perfil-form {
  display: flex;
  flex-direction: column;
  gap: var(--grilla);
}

.perfil-firma {
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
  margin: 0;
}

.perfil-eje-activo .ed-preview-label,
.perfil-firma.perfil-eje-activo {
  font-weight: 700;
}

.perfil-handle {
  display: flex;
  align-items: end;
  gap: var(--grilla);
}

.perfil-handle .ed-firma-campo {
  flex: 1;
  min-width: 0;
}

.perfil-punto {
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
  padding-bottom: calc(var(--grilla) / 4);
}

.perfil-form .ed-firma {
  max-width: none;
}

.perfil-form .ed-firma:disabled {
  opacity: 0.45;
}

.perfil-personajes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grilla);
}

.perfil-lados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grilla);
}

.perfil-lado {
  min-width: 0;
  padding: var(--grilla);
  box-shadow: inset 0 0 0 1px var(--lai1);
}

/* Editor dentro de la cosa (no ocupa la viewport entera). */
.ed-pantalla {
  box-sizing: border-box;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grilla);
}

.ed-cabecera {
  flex: 0 0 auto;
  background: var(--vidrio);
  box-shadow: 0 0 0 1px var(--linea);
  padding: var(--grilla);
}

.ed-editor-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grilla);
  align-items: center;
  margin: 0 0 var(--grilla);
  font-family: var(--sans);
  font-size: var(--texto);
  line-height: var(--interlinea);
}

.ed-editor-top a {
  text-decoration: none;
}

.ed-marca {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  margin-right: 0;
}

.ed-status {
  color: var(--suave);
  min-width: calc(var(--grilla) * 5);
  margin-left: auto;
}

.ed-titulo {
  width: 100%;
  font-family: var(--tipo);
  font-size: var(--texto);
  line-height: var(--interlinea);
  font-weight: 700;
  border: none;
  box-shadow: 0 1px 0 var(--linea);
  background: transparent;
  padding: calc(var(--grilla) / 2) 0;
  margin: 0 0 var(--grilla);
  color: inherit;
  outline: none;
}

.ed-firma-campo {
  display: block;
  margin: 0;
}

.ed-firma {
  width: 100%;
  max-width: calc(var(--grilla) * 16);
  font-family: var(--sans);
  font-size: var(--texto);
  line-height: var(--interlinea);
  border: none;
  box-shadow: 0 1px 0 var(--linea);
  background: transparent;
  padding: calc(var(--grilla) / 2) 0;
  color: inherit;
  outline: none;
}

.ed-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grilla);
  align-items: stretch;
  width: 100%;
}

.ed-col {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grilla);
}

.ed-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  font-family: var(--mono);
  font-size: var(--texto);
  line-height: var(--interlinea);
  box-shadow: 0 0 0 1px var(--linea);
  background: var(--vidrio);
  padding: var(--grilla);
  color: inherit;
  resize: none;
  outline: none;
}

.ed-preview-label {
  font-family: var(--sans);
  font-size: var(--texto);
  line-height: var(--interlinea);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 0;
  flex: 0 0 auto;
}

.ed-preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  box-shadow: 0 0 0 1px var(--linea);
  background: var(--vidrio);
  padding: var(--grilla);
}

@media (max-width: 640px) {
  :root {
    --aire: calc(var(--grilla) * 2);
  }

  .blog-nav-hasta,
  .blog-fila3 > .blog-nav-v {
    display: none;
  }

  .perfil-lados {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 896px) {
  .ed-pantalla {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }

  .ed-grid {
    grid-template-columns: 1fr;
    flex: none;
  }

  .ed-cuerpo,
  .ed-preview {
    min-height: calc(var(--grilla) * 16);
    height: calc(var(--grilla) * 16);
  }
}

.marca-pag {
  padding-bottom: var(--grilla);
}

.marca-h {
  margin: var(--grilla) 0 0;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  font-weight: 400;
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  color: var(--tinta);
}

.marca-isos,
.marca-colores {
  display: flex;
  flex-direction: column;
}

.marca-iso-fila,
.marca-color-fila {
  display: grid;
  grid-template-columns: calc(var(--grilla) * 5) auto;
  column-gap: var(--grilla);
  align-items: center;
  width: 100%;
  box-shadow: inset 0 -1px 0 var(--lai1);
}

.marca-iso-nom {
  box-sizing: border-box;
  min-height: var(--grilla);
  padding: 1px 0;
  font-family: "Trebuchet MS", sans-serif;
  font-size: var(--etiq);
  line-height: var(--etiq-lh);
  letter-spacing: 0.02em;
  color: var(--tinta);
}

.marca-iso-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.marca-iso-hit {
  box-sizing: border-box;
  width: var(--grilla);
  height: var(--grilla);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marca-ficha {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.marca-ficha-vacia {
  background: transparent;
}

.marca-ficha-hex {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}